/* ==========================================================================
   Motion — keyframes + scroll reveal utilities
   Timing/easing grounded in real interaction data (150–450ms, power-out curves)
   ========================================================================== */

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scrollX {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(3deg); }
}

@keyframes orbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dashFlow {
  to { stroke-dashoffset: -24; }
}

@keyframes pulseSoft {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 12px 24px rgba(193, 33, 38, 0.24); }
  50% { box-shadow: 0 14px 34px rgba(193, 33, 38, 0.48); }
}

@keyframes heroPop {
  from { opacity: 0; transform: translateY(30px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal: elements start hidden, JS adds .is-in-view via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 650ms var(--ease-out), transform 650ms var(--ease-out);
}
.reveal.is-in-view { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 550ms var(--ease-out), transform 550ms var(--ease-out);
}
.reveal-stagger.is-in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-in-view > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.is-in-view > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.is-in-view > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.is-in-view > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.is-in-view > *:nth-child(6) { transition-delay: 400ms; }
.reveal-stagger.is-in-view > *:nth-child(7) { transition-delay: 480ms; }
.reveal-stagger.is-in-view > *:nth-child(8) { transition-delay: 560ms; }
.reveal-stagger.is-in-view > *:nth-child(9) { transition-delay: 640ms; }
.reveal-stagger.is-in-view > *:nth-child(10) { transition-delay: 720ms; }

/* Hero: plays immediately on load, no scroll needed — the first thing visitors see should move */
.hero-pop { animation: heroPop 850ms var(--ease-out) both; }
.hero-pop--delay1 { animation-delay: 120ms; }
.hero-pop--delay2 { animation-delay: 240ms; }

.float-el { animation: floatSlow 4.5s var(--ease-in-out) infinite; }
.orbit-spin { animation: orbitSpin 16s linear infinite; }
.orbit-spin--slow { animation: orbitSpin 26s linear infinite; }
.orbit-spin--rev { animation: orbitSpin 20s linear infinite reverse; }
.dash-flow { stroke-dasharray: 6 6; animation: dashFlow 1s linear infinite; }
.pulse-node { animation: pulseSoft 2.6s var(--ease-in-out) infinite; }
.cta-glow { animation: ctaGlow 2.4s var(--ease-in-out) infinite; }

/* ---------------------------------------------------------------------------
   Page transitions — subtle cross-page fade so navigation never hard-cuts.
   Entrance plays automatically on every load (pure CSS, works even if JS
   fails). Exit is toggled by JS (initPageTransitions in main.js) just before
   navigating to another internal page.
   --------------------------------------------------------------------------- */
body { animation: pageEnter 420ms var(--ease-out) both; }
body.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease-in, ease-in), transform 180ms var(--ease-in, ease-in);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-pop, .hero-pop--delay1, .hero-pop--delay2 { animation: none !important; opacity: 1 !important; transform: none !important; }
  .float-el, .orbit-spin, .orbit-spin--slow, .orbit-spin--rev, .dash-flow, .pulse-node, .cta-glow, .trust-strip__track { animation: none !important; }
  body { animation: none !important; }
  body.is-leaving { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ==========================================================================
   PRO MOTION LAYER — animation only. No content, layout or colour changes:
   everything below uses the existing brand navy #111F37 / red #C12126.
   ========================================================================== */

/* ---- 1. Flowing brand-colour aurora behind hero / page-hero / dark sections ---- */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.hero > .container, .page-hero > .container, .section--dark > .container { position: relative; z-index: 1; }
.aurora__blob {
  position: absolute; width: 56vmax; height: 56vmax; border-radius: 50%;
  will-change: transform; opacity: 1;
}
.aurora__blob--1 { top: -22vmax; left: -14vmax; animation: auroraA 22s var(--ease-in-out) infinite alternate; }
.aurora__blob--2 { bottom: -26vmax; right: -12vmax; animation: auroraB 26s var(--ease-in-out) infinite alternate; }
.aurora__blob--3 { top: 10%; left: 38%; width: 38vmax; height: 38vmax; animation: auroraC 30s var(--ease-in-out) infinite alternate; }
.aurora__cursor {
  position: absolute; top: 0; left: 0; width: 34vmax; height: 34vmax; margin: -17vmax 0 0 -17vmax;
  border-radius: 50%; will-change: transform; opacity: 0; transition: opacity 600ms var(--ease-out);
}
.aurora.has-pointer .aurora__cursor { opacity: 1; }

/* light surfaces (home hero) */
.aurora--light .aurora__blob--1 { background: radial-gradient(circle, rgba(193,33,38,0.11), transparent 66%); }
.aurora--light .aurora__blob--2 { background: radial-gradient(circle, rgba(17,31,55,0.09), transparent 66%); }
.aurora--light .aurora__blob--3 { background: radial-gradient(circle, rgba(193,33,38,0.08), transparent 60%); }
.aurora--light .aurora__cursor { background: radial-gradient(circle, rgba(193,33,38,0.14), transparent 62%); }
/* dark surfaces (page-hero, dark sections) */
.aurora--dark .aurora__blob--1 { background: radial-gradient(circle, rgba(193,33,38,0.32), transparent 62%); }
.aurora--dark .aurora__blob--2 { background: radial-gradient(circle, rgba(62,84,124,0.50), transparent 62%); }
.aurora--dark .aurora__blob--3 { background: radial-gradient(circle, rgba(193,33,38,0.16), transparent 60%); }
.aurora--dark .aurora__cursor { background: radial-gradient(circle, rgba(193,33,38,0.26), transparent 62%); }

/* film grain */
.aurora::after {
  content: ""; position: absolute; inset: -50%; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainShift 1.2s steps(6) infinite;
}
.aurora--dark::after { opacity: 0.09; filter: invert(1); }
.aurora.is-paused .aurora__blob, .aurora.is-paused::after { animation-play-state: paused; }

@keyframes auroraA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(14vmax,10vmax,0) scale(1.18); } }
@keyframes auroraB { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-16vmax,-8vmax,0) scale(0.92); } }
@keyframes auroraC { from { transform: translate3d(0,0,0) scale(0.9); } to { transform: translate3d(-12vmax,12vmax,0) scale(1.15); } }
@keyframes grainShift {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-2%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}

/* ---- 2. Button text-roll: label slides up, duplicate slides in from below ---- */
.btn__roll { display: inline-block; position: relative; overflow: hidden; height: 1.35em; line-height: 1.35em; vertical-align: middle; }
.btn__roll > span { display: block; transition: transform 500ms cubic-bezier(0.25,0.1,0.25,1); }
.btn__roll > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; }
.btn:hover .btn__roll > span, .btn:focus-visible .btn__roll > span { transform: translateY(-100%); }

/* ---- 3. Headline word-rise reveal ---- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.wi { display: inline-block; transform: translateY(112%); animation: wordUp 850ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 200ms); }
.reveal:not(.is-in-view) .wi { animation-play-state: paused; }
@keyframes wordUp { to { transform: translateY(0); } }

/* ---- 4. Scroll progress bar (brand red) ---- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--red-600), #E5484D); pointer-events: none; }

/* ---- 5. Cursor spotlight on cards ---- */
@media (hover: hover) and (pointer: fine) {
  .card:hover { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(193,33,38,0.07), transparent 45%); }
  .section--dark .card:hover { background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.07), transparent 45%); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora__blob, .aurora::after { animation: none !important; }
  .aurora__cursor { display: none; }
  .btn__roll > span { transition: none !important; transform: none !important; }
  .wi { animation: none !important; transform: none !important; }
  .scroll-progress { display: none; }
}