/* Preserve approved scene motion; current-role emphasis is scoped below. */
.home-page {
  /* A clearly perceptible round trip, with staggered phases preserved. */
  --home-float-cycle: 4s;
  --home-float-half-cycle: 2s;
}

/* One round-trip rhythm for existing floating elements. Phase offsets stay
   staggered; reveal timing, pause rules, carousel and current-role pulse do not change. */
@media (prefers-reduced-motion: no-preference) {
  /* Supporting objects travel 8px; phone and character poses stay unchanged. */
  @keyframes fns-fish-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    50% { transform: translate3d(3px, -8px, 0) rotate(-0.6deg); }
  }
  @keyframes project-prop-bob {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
    50% { transform: translate3d(3px, -8px, 0) rotate(0.7deg); }
  }
  @keyframes project-search-tile {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-7deg); }
    50% { transform: translate3d(3px, -8px, 0) rotate(-6.3deg); }
  }
  .home-page .fns-mock.is-revealed.is-motion-active :is(.fns-phone-shell, .fns-fish-stage img),
  .home-page .project-mock.is-revealed.is-motion-active :is(.project-phone-shell, .mutton-meat-stage img, .search-tile),
  .home-page .cv-product-visual.is-motion-active :is(.cv-device-image, .cv-screen-crop, .cv-metric),
  .home-page .home-floating-prop > :first-child,
  .home-page .freshness-home-art > .freshness-home-leaf {
    animation-duration: var(--home-float-cycle);
    animation-timing-function: ease-in-out;
  }
  /* Hero drift uses alternate direction: two iterations form one full cycle. */
  .home-page .character .character-media {
    animation-duration: var(--home-float-half-cycle);
    animation-timing-function: ease-in-out;
  }
}

body.home-motion-paused *,
body.home-motion-paused *::before,
body.home-motion-paused *::after,
.home-motion-ready .hero:not(.is-motion-active) *,
.home-motion-ready .hero:not(.is-motion-active) *::before,
.home-motion-ready .hero:not(.is-motion-active) *::after {
  animation-play-state: paused !important;
}

/* An image remains visible if JavaScript is unavailable. */
body:not(.home-motion-ready) .character-thinking { opacity: 1; transform: none; }
.character { will-change: auto; }
.hero.is-motion-active .character:is(.is-visible, .is-exiting) { will-change: transform, opacity; }

/* September 19: a softened present-role accent, without moving the dot.
   The existing journey observer still pauses this pulse outside the viewport. */
.home-page .experience-stop-licious::before {
  box-shadow: 0 0 0 0.3rem #fff,
    0 0 0 0.55rem rgb(237 23 72 / 6%),
    0 0 1.7rem rgb(237 23 72 / 25%);
}

.home-page .experience-stop-licious::after {
  background: rgb(237 23 72 / 45%);
  animation-name: home-current-role-ripple;
  animation-duration: 1.6s;
}

@keyframes home-current-role-ripple {
  0% { transform: scale(1); opacity: 0.9; }
  45% { transform: scale(2.2); opacity: 0.55; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Keep the upper poses outside the central copy at wider laptop sizes. */
@media (min-width: 1122px) {
  .hero .character-thinking { left: clamp(1.25rem, 6vw, 7rem); }
  .hero .character-building { right: clamp(1.25rem, 6vw, 7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .character, .hero-copy, .selected-work-intro { transition: none !important; }
  /* A paused backwards-filled entrance must never conceal the introduction. */
  .hero-copy { animation: none !important; opacity: 1 !important; }
}