/* Motion is opt-in through JS; content is never hidden while waiting for a reveal. */
@keyframes ocean-enter {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes ocean-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -13px; }
}
@keyframes ocean-turn {
  from { rotate: 0deg; }
  to { rotate: 180deg; }
}
@keyframes ocean-glint {
  0%, 75%, 100% { translate: -160% 0; }
  40%, 60% { translate: 160% 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Render primary text immediately; animate only decorative hero elements. */
  .motion-enabled .ocean-sphere { animation: ocean-float 7s ease-in-out infinite; }
  .motion-enabled .art-card-top { animation: ocean-float 5.5s ease-in-out infinite; }
  .motion-enabled .art-card-bottom { animation: ocean-float 6.5s ease-in-out -2s infinite reverse; }
  .motion-enabled .art-sticker { animation: ocean-float 8s ease-in-out -3s infinite; }
  .motion-enabled .star-one { animation: ocean-turn 24s linear infinite; }
  .motion-enabled .about-shape > span { animation: ocean-float 6s ease-in-out infinite; }
  .motion-enabled .about-shape > :nth-child(2) { animation-delay: -.7s; }
  .motion-enabled .about-shape > :nth-child(3) { animation-delay: -1.4s; }
  .motion-enabled .about-shape > :nth-child(4) { animation-delay: -2.1s; }
  .motion-enabled .service-dialog[open],
  .motion-enabled .project-dialog[open] { animation: ocean-enter .28s ease-out; }
  .motion-enabled .button-primary { position: relative; overflow: hidden; isolation: isolate; }
  .motion-enabled .button-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, #ffffff25 50%, transparent 75%);
    translate: -160% 0;
  }
  .motion-enabled .button-primary:hover::after { animation: ocean-glint 1.2s ease-out; }
  .motion-enabled .button svg { transition: translate .25s ease; }
  .motion-enabled .button:hover svg { translate: 3px -2px; }
  .motion-enabled .service-card { position: relative; isolation: isolate; }
  .motion-enabled .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity .35s ease;
    background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), #1581bd0c, transparent 70%);
  }
  .motion-enabled .service-card:hover::before { opacity: 1; }
  .motion-enabled .service-icon { transition: rotate .3s ease, scale .3s ease; }
  .motion-enabled .service-card:hover .service-icon { rotate: -7deg; scale: 1.06; }
  .motion-enabled .nav-contact svg { transition: translate .25s; }
  .motion-enabled .nav-contact:hover svg { translate: 2px -2px; }
}

/* Pause controls stop decorative motion, including when the page is backgrounded. */
.motion-paused *, .motion-paused *::after,
.motion-background *, .motion-background *::after { animation-play-state: paused !important; }
.motion-paused .hero-copy > * { animation: none !important; }
.motion-paused .button:hover svg { translate: none; }
.motion-paused .service-card:hover .service-icon { rotate: none; scale: none; }
.motion-paused .service-card::before { opacity: 0 !important; }
.motion-offscreen, .motion-offscreen * { animation-play-state: paused !important; }
#motion-toggle { min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .service-card, .project-card { opacity: 1 !important; translate: none !important; }
  #motion-toggle { display: none; }
}
@media print {
  *, *::before, *::after { animation: none !important; }
  #motion-toggle { display: none; }
}