/* =====================================================================
   MOTION LAYER
   Everything here is opt-in through animations.js and is disabled for
   users who ask for reduced motion.
   ===================================================================== */

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--yellow), var(--red) 55%, var(--blue));
  z-index: 3000;
  pointer-events: none;
  will-change: transform;
}

/* ---------- hero motion ---------- */
.hero__media img,
.page-hero__media img { will-change: transform; }

.hero__copy > *, .hero__actions, .hero__trust {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: heroIn .85s cubic-bezier(.16,.84,.3,1) forwards;
}
.hero__copy > *:nth-child(1) { animation-delay: .08s; }
.hero__copy > *:nth-child(2) { animation-delay: .18s; }
.hero__copy > *:nth-child(3) { animation-delay: .28s; }
.hero__copy > *:nth-child(4) { animation-delay: .38s; }
.hero-card { opacity: 0; transform: translate3d(0, 28px, 0) scale(.985); animation: heroIn .95s cubic-bezier(.16,.84,.3,1) .34s forwards; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* animated flag ribbon sweep on the hero */
.hero__bg::before { animation: ribbonSlide 9s ease-in-out infinite alternate; }
@keyframes ribbonSlide {
  from { transform: rotate(-28deg) translate3d(-24px, 6px, 0); }
  to   { transform: rotate(-24deg) translate3d(24px, -6px, 0); }
}

/* ---------- staggered reveals ---------- */
.sector-grid > .reveal,
.project-grid > .reveal,
.why-grid > .reveal,
.indicator-strip > .reveal,
.fh-grid > .reveal,
.ne-news-grid > .reveal,
.media-lib-grid > .reveal,
.event-list > .reveal,
.ne-events-list > .reveal,
.story-grid > .reveal,
.fh-risk-grid > .reveal,
.playbook-grid > .reveal { transition-delay: var(--d, 0ms); }

/* ---------- card tilt ---------- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.tilt-card.is-tilting { transition: transform .08s linear, box-shadow .3s ease, border-color .3s ease; }
.tilt-card .tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0,163,224,.14), transparent 62%);
  z-index: 1;
}
.tilt-card.is-tilting .tilt-glare { opacity: 1; }

/* ---------- primary CTA shine ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: "";
  position: absolute;
  top: -60%;
  left: -80%;
  width: 45%;
  height: 220%;
  transform: rotate(22deg) translateX(-140%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation: ctaShine 5.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaShine {
  0%, 62% { transform: rotate(22deg) translateX(-160%); }
  78%, 100% { transform: rotate(22deg) translateX(520%); }
}
.btn--primary:hover::before { animation-duration: 1.1s; }

/* ---------- nav active underline ---------- */
.nav-menu { position: relative; }
.nav-underline {
  position: absolute;
  bottom: -6px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--yellow));
  transition: transform .38s cubic-bezier(.2,.8,.2,1), width .38s cubic-bezier(.2,.8,.2,1), opacity .25s;
  pointer-events: none;
  opacity: 0;
}

/* ---------- map zone pulse ---------- */
.zone { position: relative; }
.zone::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(247,214,24,.6);
  animation: zonePulse 3.4s ease-out infinite;
  pointer-events: none;
}
.zone:nth-child(2)::after { animation-delay: .5s; }
.zone:nth-child(3)::after { animation-delay: 1s; }
.zone:nth-child(4)::after { animation-delay: 1.5s; }
.zone:nth-child(5)::after { animation-delay: 2s; }
@keyframes zonePulse {
  0% { opacity: .85; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(1.12); }
}

/* ---------- ticker ---------- */
.motion-ticker {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, var(--blue-900), #075980);
  color: white;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.motion-ticker__label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 18px;
  background: linear-gradient(90deg, var(--red), #a80c1a);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 2;
  white-space: nowrap;
}
.motion-ticker__label::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 0;
  bottom: 0;
  width: 12px;
  background: linear-gradient(90deg, #a80c1a, transparent);
}
.motion-ticker__track {
  display: flex;
  width: max-content;
  padding: 12px 0 12px 150px;
  animation: tickerMove 46s linear infinite;
}
.motion-ticker:hover .motion-ticker__track { animation-play-state: paused; }
.motion-ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 26px; font-size: .86rem; color: #d8eefa; white-space: nowrap; }
.motion-ticker__item b { color: var(--yellow); font-weight: 950; }
.motion-ticker__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.5); }
@keyframes tickerMove { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- count-up shimmer ---------- */
.counting { font-variant-numeric: tabular-nums; }
.stat-pop { animation: statPop .5s cubic-bezier(.2,.8,.2,1); }
@keyframes statPop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* ---------- floating assistant ---------- */
.assistant-launcher, #assistantLauncher, .ai-launcher {
  animation: floatBob 4.5s ease-in-out infinite;
}
@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ---------- page transition ---------- */
.page--active { animation: pageIn .42s cubic-bezier(.2,.8,.2,1); }
@keyframes pageIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ---------- back to top ---------- */
.back-to-top { transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease, background .2s; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .motion-ticker { display: none !important; }
  .hero__copy > *, .hero__actions, .hero__trust, .hero-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero__bg::before, .btn--primary::before, .zone::after,
  .assistant-launcher, #assistantLauncher, .ai-launcher { animation: none !important; }
  .motion-turn, .motion-fade, .tilt-card, .reveal { transition: none !important; }
}

/* ---------- safety net: content never stays invisible ----------
   If scripting or the animation engine fails, or the user prefers
   reduced motion, hero content is shown immediately. The keyframes
   below are the source of truth for the entrance animation. */
@media (prefers-reduced-motion: reduce) {
  .hero__copy > *, .hero__actions, .hero__trust, .hero-card { opacity: 1 !important; transform: none !important; }
}
.no-js-motion .hero__copy > *, .no-js-motion .hero__actions, .no-js-motion .hero__trust, .no-js-motion .hero-card {
  opacity: 1 !important; transform: none !important; animation: none !important;
}