/*
 * ============================================================
 * ADVENIQ BIOSCIENCES — ANIMATION SYSTEM
 * Revised per design audit — v2
 * ============================================================
 *
 * CHANGES FROM v1:
 * [ANIM-5.1] IntersectionObserver targets: .stage-item, .pull-quote,
 *            .highlight-statement added to JS (see HTML <script>)
 *            CSS here provides their initial + revealed states
 * [ANIM-5.2] Button hover lift added via design system CSS
 * [ANIM-5.3] Hero CTA delay reduced: 760ms → 600ms max
 * [ANIM-5.4] card--interactive hover now applied in HTML (all advisory cards)
 * [MOTION]   prefers-reduced-motion: comprehensive coverage retained
 * ============================================================
 */

:root {
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:    cubic-bezier(0.4, 0, 1, 1);
  --dur-fast:     180ms;
  --dur-default:  320ms;
  --dur-medium:   480ms;
  --dur-slow:     640ms;
  --dur-hero:     900ms;
}


/* ────────────────────────────────────────────────────────────
   REDUCED MOTION — Global override
   Covers all animated elements on the page
──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:       0.01ms !important;
    animation-iteration-count: 1     !important;
    transition-duration:      0.01ms !important;
    animation-delay:          0s     !important;
  }

  /* All reveal elements become immediately visible */
  .reveal-fade,
  .reveal-clip,
  .stagger-child,
  .hero__headline,
  .hero__eyebrow,
  .hero__lead,
  .hero__trust,
  .hero__cta-group,
  .hero__status,
  .pull-quote,
  .pull-quote .pull-quote__text,
  .highlight-statement,
  .stage-item,
  .stage-item__index,
  .stage-item__title,
  .stage-item__body,
  .section-label-wrap,
  .hair-animate,
  .footer__main,
  .footer__disclosure {
    opacity:       1 !important;
    clip-path:     none !important;
    letter-spacing: inherit !important;
    transform:     none !important;
  }
}


/* ────────────────────────────────────────────────────────────
   HERO — Staggered entrance (CSS animation on load)
   [ANIM-5.3] Max cumulative delay reduced to 600ms
──────────────────────────────────────────────────────────── */
.hero__status {
  opacity: 0;
  animation: adv-fade-settle var(--dur-medium) var(--ease-premium) both;
  animation-delay: 60ms;
}

.hero__eyebrow {
  opacity: 0;
  animation: adv-fade-settle var(--dur-medium) var(--ease-premium) both;
  animation-delay: 140ms;
}

.hero__headline {
  opacity: 0;
  animation: adv-fade-settle var(--dur-slow) var(--ease-premium) both;
  animation-delay: 260ms;
}

.hero__lead {
  opacity: 0;
  animation: adv-fade-settle var(--dur-medium) var(--ease-premium) both;
  animation-delay: 400ms;
}

.hero__trust {
  opacity: 0;
  animation: adv-fade-settle var(--dur-medium) var(--ease-premium) both;
  animation-delay: 490ms;
}

.hero__cta-group {
  opacity: 0;
  animation: adv-fade-settle var(--dur-medium) var(--ease-premium) both;
  animation-delay: 580ms; /* [ANIM-5.3] was 760ms */
}

@keyframes adv-fade-settle {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ────────────────────────────────────────────────────────────
   SCROLL REVEALS
   Default state: visible (no-JS / no-support fallback)
   JS adds .is-visible; scroll-timeline for modern browsers
──────────────────────────────────────────────────────────── */
.reveal-fade  { opacity: 1; }
.reveal-clip  { opacity: 1; clip-path: none; }

/* Modern scroll-driven animation (Chrome 115+, Firefox 110+) */
@supports (animation-timeline: scroll()) {
  .reveal-fade {
    opacity: 0;
    animation: adv-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 85%;
  }

  .reveal-clip {
    clip-path: inset(10% 0 0 0);
    opacity: 0;
    animation: adv-clip-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 90%;
  }

  @keyframes adv-fade-in    { to { opacity: 1; } }
  @keyframes adv-clip-reveal { to { clip-path: inset(0% 0 0 0); opacity: 1; } }
}

/* IntersectionObserver fallback — JS adds .is-visible */
.reveal-fade.is-visible,
.reveal-clip.is-visible {
  opacity: 1 !important;
  clip-path: none !important;
}


/* ────────────────────────────────────────────────────────────
   SECTION LABEL WRAP — Animated line + fade
──────────────────────────────────────────────────────────── */
.section-label-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  opacity: 0;
  transition: opacity var(--dur-default) var(--ease-premium);
  position: relative;
}

.section-label-wrap::before {
  content: '';
  display: block;
  width: 0;
  height: 1px;
  background: var(--color-ochre);
  flex-shrink: 0;
  transition: width var(--dur-medium) var(--ease-premium);
}

.section--forest .section-label-wrap::before,
.section--deep   .section-label-wrap::before {
  background: var(--color-sage);
}

.section-label-wrap.is-visible         { opacity: 1; }
.section-label-wrap.is-visible::before { width: 12px; }


/* ────────────────────────────────────────────────────────────
   PULL QUOTE — Border fade then text reveal
   [ANIM-5.1] .pull-quote now in observer targets (see HTML JS)
   Border uses ochre from design system (2px per TYPO-1.4)
──────────────────────────────────────────────────────────── */
.pull-quote,
.highlight-statement {
  border-left-color: transparent !important;
  transition: border-left-color var(--dur-medium) var(--ease-premium);
}

.pull-quote.is-visible,
.highlight-statement.is-visible {
  border-left-color: var(--color-ochre) !important;
}

.section--forest .pull-quote.is-visible,
.section--forest .highlight-statement.is-visible,
.section--deep   .pull-quote.is-visible,
.section--deep   .highlight-statement.is-visible {
  border-left-color: var(--color-sage) !important;
}

/* Text reveals after border */
.pull-quote .pull-quote__text,
.pull-quote .accent-display,
.highlight-statement {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-premium);
  transition-delay: 200ms;
}

.pull-quote.is-visible .pull-quote__text,
.pull-quote.is-visible .accent-display,
.highlight-statement.is-visible {
  opacity: 1;
}


/* ────────────────────────────────────────────────────────────
   STAGE ITEMS — Staggered index / title / body reveal
   [ANIM-5.1] .stage-item now directly in observer targets
   Initial states set here; .is-visible applied by JS
──────────────────────────────────────────────────────────── */
.stage-item__index {
  opacity: 0;
  letter-spacing: 0.45em;
  transition:
    opacity        var(--dur-medium) var(--ease-premium),
    letter-spacing var(--dur-slow)   var(--ease-premium);
}

.stage-item__title {
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-premium);
  transition-delay: 100ms;
}

.stage-item__body {
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-premium);
  transition-delay: 200ms;
}

/* [ANIM-5.1] is-visible class applied to .stage-item by observer */
.stage-item.is-visible .stage-item__index {
  opacity: 1;
  letter-spacing: var(--tracking-eyebrow);
}
.stage-item.is-visible .stage-item__title,
.stage-item.is-visible .stage-item__body {
  opacity: 1;
}

/* Stage item icons fade with the title */
.stage-item__icon {
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-premium);
  transition-delay: 80ms;
}
.stage-item.is-visible .stage-item__icon { opacity: 0.75; }

/* Principle item icons */
.principle-item__icon {
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-premium);
}
.principle-item.is-visible .principle-item__icon { opacity: 0.80; }


/* ────────────────────────────────────────────────────────────
   CARD INTERACTIONS
   [ANIM-5.4] card--interactive hover state — CSS handles transitions
   Applied via .card--interactive class in HTML (all advisory cards)
──────────────────────────────────────────────────────────── */
.card {
  transition:
    border-color     var(--dur-default) var(--ease-premium),
    background-color var(--dur-default) var(--ease-premium);
}


/* ────────────────────────────────────────────────────────────
   FOOTER REVEAL
──────────────────────────────────────────────────────────── */
.footer__main,
.footer__disclosure {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-premium);
}

.footer__main.is-visible,
.footer__disclosure.is-visible {
  opacity: 1;
}


/* ────────────────────────────────────────────────────────────
   PRINCIPLE ITEMS — Treat like reveal-fade items
   [ANIM-5.1] .principle-item initial opacity; observer adds is-visible
──────────────────────────────────────────────────────────── */
.principle-item__heading,
.principle-item__body {
  opacity: 0;
  transition: opacity var(--dur-medium) var(--ease-premium);
}
.principle-item__heading { transition-delay: 80ms; }
.principle-item__body    { transition-delay: 160ms; }

.principle-item.is-visible .principle-item__heading,
.principle-item.is-visible .principle-item__body {
  opacity: 1;
}


/* ════════════════════════════════════════════════════════════
   MEDIA REVEALS — v3
   Subtle, premium fade-in for embedded videos & background
   imagery. Restrained so motion supports the composition.
════════════════════════════════════════════════════════════ */

/* Reusable media frames fade in gently when their parent
   .reveal-fade ancestor enters the viewport (handled by the
   existing IntersectionObserver in the HTML). */
.media-frame {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--dur-slow)   var(--ease-premium),
    transform var(--dur-slow)   var(--ease-premium);
}

.reveal-fade.is-visible .media-frame,
.is-visible .media-frame {
  opacity: 1;
  transform: translateY(0);
}

/* When the media frame is itself a reveal-fade target. */
.reveal-fade.media-frame {
  opacity: 0;
  transform: translateY(8px);
}
.reveal-fade.media-frame.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero media: fade in shortly after the headline lands.
   Uses CSS animation (page-load) for instant entry rather than
   waiting for IntersectionObserver. */
.hero__media,
.hero__media-video {
  /* Start invisible; settle in just after the headline. */
  animation: adv-media-settle var(--dur-hero) var(--ease-premium) both;
  animation-delay: 220ms;
}

.hero__media-veil {
  animation: adv-fade-settle var(--dur-slow) var(--ease-premium) both;
  animation-delay: 320ms;
}

@keyframes adv-media-settle {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}

/* Section background fade-in on load.
   The image is already partially veiled by the static CSS in
   adveniq-design-system.css — each variant settles at its OWN
   target opacity (Platform 0.40, Regulatory 0.45) instead of
   the generic adv-fade-settle keyframes (which would end at 1
   and visually override the variant’s target). */
@keyframes adv-bg-settle-platform {
  from { opacity: 0; }
  to   { opacity: 0.40; }
}

@keyframes adv-bg-settle-regulatory {
  from { opacity: 0; }
  to   { opacity: 0.45; }
}

.section--platform-bg .section__bg-img {
  animation: adv-bg-settle-platform 1200ms var(--ease-premium) both;
  animation-delay: 100ms;
}

.section--regulatory-bg .section__bg-img {
  animation: adv-bg-settle-regulatory 1200ms var(--ease-premium) both;
  animation-delay: 100ms;
}

/* Mobile dial-down (≤700px): each variant lands at its lower
   end opacity so the imagery stays calm on small screens. */
@media (max-width: 700px) {
  @keyframes adv-bg-settle-platform {
    from { opacity: 0; }
    to   { opacity: 0.30; }
  }
  @keyframes adv-bg-settle-regulatory {
    from { opacity: 0; }
    to   { opacity: 0.34; }
  }
}

/* Section break video reveal — reveal-fade compatible.
   Add a smooth opacity ramp when intersected. */
.media-break {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-premium);
}
.media-break.is-visible,
.media-break:not(.reveal-fade) {
  opacity: 1;
}

/* Reduced motion: skip the entrance transforms.
   Note: .section--with-bg .section__bg-img is handled separately
   below — we DO want to disable its animation, but we must NOT
   force opacity: 1 on it, otherwise the variant’s tuned opacity
   (0.40 / 0.45) is lost and the imagery overpowers body copy. */
@media (prefers-reduced-motion: reduce) {
  .media-frame,
  .reveal-fade.is-visible .media-frame,
  .reveal-fade.media-frame.is-visible,
  .hero__media,
  .hero__media-video,
  .hero__media-veil,
  .media-break {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .section--with-bg .section__bg-img {
    animation: none !important;
    /* opacity intentionally left to the variant’s static rule  */
  }
}