/* Movement is part of the explanation: the hand reaches, the boundary responds.
   This file is loaded after site.css so the timings stay easy to tune. */

@media (prefers-reduced-motion: no-preference) {
  .hero-grid {
    animation: motion-grid-drift 40s ease-in-out infinite alternate;
  }

  .hero .scene-haze {
    animation: motion-haze 32s ease-in-out infinite alternate;
  }

  .hero .scene-shadow-body {
    animation: motion-shadow-breathe 8.8s ease-in-out infinite;
  }

  .hero .scene-shadow-hand {
    animation: motion-reach 8.8s linear infinite;
  }

  .hero .scene-shield-aura {
    animation: motion-shield-impact 8.8s ease-in-out infinite;
  }

  .hero .scene-shield-highlight {
    animation: motion-shield-highlight 8.8s ease-in-out infinite;
  }

  .hero .scene-repel-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: motion-repel 8.8s ease-out infinite;
  }

  .hero .scene-core-halo {
    animation: motion-core-halo 6.8s ease-in-out infinite;
  }

  .hero .scene-card-self {
    animation: motion-card-self 8.8s ease-in-out infinite;
  }

  .hero .scene-card-feedback {
    animation: motion-card-feedback 8.8s ease-in-out infinite;
  }

  .hero .scene-flow-track-one,
  .hero .scene-flow-track-two {
    animation-duration: 5.6s;
  }

  .hero .scene-repel-track {
    animation-duration: 5.6s;
  }

  .hero .scene-flow-dot {
    animation: motion-flow-point 5.6s ease-in-out infinite;
  }

  .hero .scene-flow-dot-two {
    animation-delay: -2.8s;
  }

  .audio-prologue::before {
    animation: motion-ambient-drift 27s ease-in-out infinite alternate-reverse;
  }

  .button {
    transition-duration: .36s;
    transition-timing-function: cubic-bezier(.2, .75, .25, 1);
  }

  .button span[aria-hidden] {
    display: inline-block;
    transition: transform .36s cubic-bezier(.2, .75, .25, 1);
  }

  .button:hover span[aria-hidden] {
    transform: translate(3px, -2px);
  }
}

/* Soft edge light replaces the outlined circle and moving point fields.
   Gradients fade inside their bounds: no blur filters or visible layer edges. */
.showcase-section,
.people-section,
.assurance-section,
.support-section {
  --ambient-color: 117, 237, 240;
  --ambient-opacity: .9;
  --ambient-travel: 14px;
  --ambient-duration: 36s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.showcase-section { background: #07111f; }
.people-section { --ambient-color: 255, 208, 155; --ambient-duration: 42s; background: #0b1b29; }
.assurance-section { --ambient-color: 184, 165, 255; --ambient-duration: 44s; }
.support-section { --ambient-color: 255, 200, 139; --ambient-duration: 40s; }

.showcase-section::before,
.people-section::before,
.assurance-section::before,
.support-section::before {
  position: absolute;
  z-index: 0;
  top: -100px;
  right: -27vw;
  width: clamp(420px, 70vw, 1000px);
  height: clamp(480px, 72vw, 880px);
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse, rgba(var(--ambient-color), .065), rgba(var(--ambient-color), .025) 34%, rgba(var(--ambient-color), 0) 70%);
  content: "";
  opacity: var(--ambient-opacity);
  pointer-events: none;
}

.people-section::before {
  top: 0;
  right: auto;
  left: -27vw;
}

.assurance-section::before { top: 12%; }

.support-section::before {
  top: calc(50% - 220px);
  right: auto;
  left: clamp(-240px, -15vw, -100px);
  width: clamp(450px, 55vw, 760px);
  height: 440px;
}

.showcase-section > .container,
.people-section > .container,
.assurance-section > .container,
.support-section > .container {
  position: relative;
  z-index: 1;
}

@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .showcase-section::before,
  .people-section::before,
  .assurance-section::before,
  .support-section::before {
    animation: motion-edge-light var(--ambient-duration) ease-in-out infinite alternate;
  }
}

/* Visibility is controlled separately from the animation itself. Pausing keeps
   its position on return, without touching explanatory or reveal animations. */
[data-ambient]:not(.is-ambient-active)::before,
[data-ambient]:not(.is-ambient-active)::after,
.hero:not(.is-ambient-active) .hero-grid,
.hero:not(.is-ambient-active) .scene-haze {
  animation-play-state: paused;
}

@keyframes motion-edge-light {
  from { transform: translate3d(calc(0px - var(--ambient-travel)), 5px, 0); opacity: calc(var(--ambient-opacity) * .82); }
  to { transform: translate3d(var(--ambient-travel), -5px, 0); opacity: var(--ambient-opacity); }
}

@keyframes motion-grid-drift {
  from { transform: translate3d(-4px, -3px, 0) scale(1.015); opacity: .3; }
  to { transform: translate3d(4px, 3px, 0) scale(1.015); opacity: .36; }
}

@keyframes motion-haze {
  from { opacity: .85; }
  to { opacity: .94; }
}

@keyframes motion-shadow-breathe {
  0%, 25%, 100% { transform: translateX(0); }
  42%, 54% { transform: translateX(-2px); }
  67% { transform: translateX(1px); }
}

@keyframes motion-reach {
  0%, 23%, 100% { transform: translateX(0); }
  38% { transform: translateX(-15px); animation-timing-function: cubic-bezier(.18, .8, .3, 1); }
  44% { transform: translateX(-17px); animation-timing-function: cubic-bezier(.2, .8, .25, 1); }
  49% { transform: translateX(5px); animation-timing-function: cubic-bezier(.25, .6, .3, 1); }
  55% { transform: translateX(1px); }
  67% { transform: translateX(0); }
}

@keyframes motion-shield-impact {
  0%, 35%, 62%, 100% { opacity: .72; }
  43% { opacity: 1; }
  48% { opacity: .88; }
  53% { opacity: .98; }
}

@keyframes motion-shield-highlight {
  0%, 35%, 62%, 100% { opacity: .75; }
  43% { opacity: 1; }
  50% { opacity: .9; }
}

@keyframes motion-repel {
  0%, 37%, 60%, 100% { opacity: .55; transform: scale(1); }
  44% { opacity: 1; transform: scale(1.22); }
  52% { opacity: .62; transform: scale(1.04); }
}

@keyframes motion-core-halo {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: .9; transform: scale(1.07); }
}

@keyframes motion-card-self {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(4px, -6px, 0) rotate(-3deg); }
}

@keyframes motion-card-feedback {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
  50% { transform: translate3d(-4px, 5px, 0) rotate(3deg); }
}

@keyframes motion-flow-point {
  0%, 100% { opacity: .48; }
  50% { opacity: 1; }
}

@keyframes motion-ambient-drift {
  from { transform: translate3d(-12px, 5px, 0); opacity: .65; }
  to { transform: translate3d(15px, -9px, 0); opacity: 1; }
}

@media (max-width: 1100px) {
  .showcase-section,
  .people-section,
  .assurance-section,
  .support-section {
    --ambient-opacity: .7;
    --ambient-travel: 7px;
  }
}

@media (max-width: 700px) {
  .showcase-section,
  .people-section,
  .assurance-section,
  .support-section { --ambient-opacity: .55; }

  .showcase-section::before,
  .people-section::before,
  .assurance-section::before {
    width: 440px;
    height: 540px;
  }

  .hero-grid,
  .hero .scene-haze { animation: none; }
}

@media (max-width: 850px) {
  /* Cards become part of the mobile reading layout, so they stay still. */
  .hero .scene-card-self,
  .hero .scene-card-feedback {
    animation: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid,
  .hero .scene-haze,
  .hero .scene-shadow-body,
  .hero .scene-shadow-hand,
  .hero .scene-shield-aura,
  .hero .scene-shield-highlight,
  .hero .scene-repel-spark,
  .hero .scene-core-halo,
  .hero .scene-card-self,
  .hero .scene-card-feedback,
  .hero .scene-flow-track,
  .hero .scene-flow-dot,
  .hero .scene-repel-track,
  .signal-section::before,
  .audio-prologue::before,
  .showcase-section::before,
  .people-section::before,
  .assurance-section::before,
  .support-section::before,
  .button,
  .button span[aria-hidden] {
    animation: none !important;
    transition: none !important;
  }
}