/* =========================================================================
   ScanUP — Animation layer
   Scroll-driven reveals, staggered entrances, hero timeline, hover delight.
   Sits on top of scanup.css. Every hidden state is reset under
   prefers-reduced-motion so nothing can stay invisible.
   ========================================================================= */

/* ---------- Scroll progress bar ---------- */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%; z-index: 200; pointer-events: none;
  background: linear-gradient(90deg, var(--blue-600), var(--blue-400), var(--blue-300));
  box-shadow: 0 0 14px rgba(22, 179, 187, 0.55);
  will-change: transform;
}

/* keep horizontal slides from spawning a scrollbar (clip, not hidden,
   so it never turns html into a scroll container and breaks position:sticky) */
html { overflow-x: clip; }

/* ---------- Reveal — words SLIDE IN from the side ---------- */
.reveal {
  opacity: 0;
  transform: translateX(-58px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* directional variants (set by JS on split children) */
.reveal[data-anim="left"]  { transform: translateX(-58px); }
.reveal[data-anim="right"] { transform: translateX(58px); }
.reveal[data-anim="left"].in,
.reveal[data-anim="right"].in { transform: none; }

/* large full-width blocks rise instead of sliding sideways (no overflow) */
.reveal.scanframe, .reveal.cta-split { transform: translateY(54px); }
.reveal.scanframe.in, .reveal.cta-split.in { transform: none; }

/* a container that staggers its own children doesn't move as a block */
.reveal.stagger { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ---------- Staggered children — cards DROP IN from above ---------- */
.stagger > .anim-item {
  opacity: 0;
  transform: translateY(-52px);
  transition: opacity .5s ease, transform .72s cubic-bezier(.34,1.45,.64,1);
  transition-delay: calc(var(--i, 0) * .085s);
  will-change: opacity, transform;
}
.stagger.in > .anim-item { opacity: 1; transform: none; }

/* ---------- Section heads — accent rule draw + head lift ---------- */
.section-head .accent-rule {
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.16,1,.3,1) .15s;
}
.section-head--center .accent-rule { transform-origin: center; }
.section-head.in .accent-rule { transform: scaleX(1); }

.section-head .eyebrow { opacity: 0; transform: translateY(10px); transition: opacity .6s ease .05s, transform .6s ease .05s; }
.section-head.in .eyebrow { opacity: 1; transform: none; }

/* ---------- How It Works — sequential bar fill ---------- */
.steps .step::before { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * .12s + .12s); }
.steps.in .step::before { transform: scaleX(1); }

/* the editorial step numeral sweeps its stroke in */
.steps .step__big { opacity: 0; transform: translateX(-12px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * .12s + .2s); }
.steps.in .step__big { opacity: 1; transform: none; }

/* ---------- HERO — entrance timeline ---------- */
/* hidden states; #hero.is-lit releases them in sequence */
.hero__bleed-inner .coords { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; transition-delay: .05s; }

.hero__title { }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .line > span { display: block; transform: translateY(112%); transition: transform 1.05s cubic-bezier(.16,1,.3,1); will-change: transform; }
.hero__title .line:nth-child(1) > span { transition-delay: .16s; }
.hero__title .line:nth-child(2) > span { transition-delay: .30s; }
.hero__title .line:nth-child(3) > span { transition-delay: .44s; }

.hero .vdd      { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: .56s; }
.hero .lead     { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: .66s; }
.hero .btn-row  { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: .76s; }
.hero .powered  { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; transition-delay: .86s; }

.hero__caps-inner .cap { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(.9s + var(--i, 0) * .08s); }

#hero.is-lit .coords,
#hero.is-lit .vdd,
#hero.is-lit .lead,
#hero.is-lit .btn-row,
#hero.is-lit .powered,
#hero.is-lit .cap { opacity: 1; transform: none; }
#hero.is-lit .hero__title .line > span { transform: none; }

/* live HUD pills fade in last */
.hero__livepill, .hero__liveread { opacity: 0; transition: opacity .6s ease; transition-delay: 1.05s; }
#hero.is-lit .hero__livepill, #hero.is-lit .hero__liveread { opacity: 1; }

/* point cloud fades up with the hero */
.ptcloud { opacity: 0; transition: opacity 1.2s ease .2s; }
#hero.is-lit .ptcloud { opacity: .92; }

/* vdd dots pulse subtly to keep the ribbon alive */
@media (prefers-reduced-motion: no-preference) {
  #hero.is-lit .vdd i { animation: vddPulse 2.4s ease-in-out infinite; }
  #hero.is-lit .vdd i:nth-child(4) { animation-delay: .35s; }
  #hero.is-lit .vdd i:nth-child(6) { animation-delay: .7s; }
}
@keyframes vddPulse { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } }

/* ---------- Dashboard reveal flourishes ---------- */
/* timeline dots draw their connector */
.panel .tl__item { opacity: 0; transform: translateX(-10px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i, 0) * .1s); }
.stagger.in .panel .tl__item, .reveal.in .tl__item { opacity: 1; transform: none; }

/* risk / doc list rows cascade */
.list .list__row { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * .07s); }
.reveal.in .list .list__row { opacity: 1; transform: none; }

/* progress bar fills inside dash */
.bar__fill { transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.16,1,.3,1) .2s; }
.reveal.in .bar__fill { transform: scaleX(1); }

/* ===================== HOVER DELIGHT ===================== */

/* nav links — underline grow */
.nav__links a { position: relative; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--blue-400); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.nav__links a:hover::after { transform: scaleX(1); }

/* button arrow nudge (on top of existing sheen) */
.btn svg { transition: transform .25s cubic-bezier(.16,1,.3,1); }
.btn:hover svg { transform: translateX(4px); }

/* icon chips — pop + glow on card hover */
.pcard__ic, .feat__ic, .aud__ic, .flow__ic, .driver__ic, .cap__ic, .plite__ic, .step__ic, .card__icon {
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease, color .3s ease;
}
.pcard:hover .pcard__ic { transform: scale(1.08) rotate(-4deg); border-color: var(--blue-400); color: var(--blue-500); box-shadow: 0 0 0 6px rgba(22,179,187,.08); }
.feat:hover .feat__ic   { transform: scale(1.1) rotate(4deg); }
.aud:hover .aud__ic     { transform: translateY(-3px) scale(1.06); }
.plite__col:hover .plite__ic { transform: translateY(-4px) scale(1.06); }
.flow__step:hover .flow__ic  { transform: scale(1.1); box-shadow: 0 8px 20px rgba(22,179,187,.28); }

/* audience media — subtle zoom of the placeholder texture */
.aud__media { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.aud:hover .aud__media { transform: scale(1.03); }

/* dashboard nav items slide */
.navitem { transition: background .2s ease, color .2s ease, transform .2s cubic-bezier(.16,1,.3,1); }
.navitem:hover { transform: translateX(4px); color: #fff; }

/* list rows lift on hover */
.list__row { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.list__row:hover { transform: translateX(3px); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* score gauge gentle breathing glow */
@media (prefers-reduced-motion: no-preference) {
  .gauge--lg::after { box-shadow: 0 0 0 0 rgba(22,179,187,0); }
  .gauge.is-counted { animation: gaugeGlow 3.2s ease-in-out infinite; border-radius: 50%; }
}
@keyframes gaugeGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(22,179,187,0); } 50% { box-shadow: 0 0 26px 2px rgba(22,179,187,.25); } }

/* AI send button pulse to invite interaction */
@media (prefers-reduced-motion: no-preference) {
  .reveal.in .ai__send { animation: sendPulse 2.6s ease-in-out infinite; }
}
@keyframes sendPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,179,187,.5); } 60% { box-shadow: 0 0 0 9px rgba(22,179,187,0); } }

/* ===================== REDUCED MOTION — show everything ===================== */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal[data-anim], .stagger > .anim-item,
  .hero__bleed-inner .coords, .hero .vdd, .hero .lead, .hero .btn-row, .hero .powered,
  .hero__caps-inner .cap, .hero__livepill, .hero__liveread,
  .panel .tl__item, .list .list__row {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .hero__title .line > span { transform: none !important; transition: none !important; }
  .section-head .accent-rule, .steps .step::before, .bar__fill { transform: none !important; }
  .steps .step__big, .section-head .eyebrow { opacity: 1 !important; transform: none !important; }
  .ptcloud { opacity: 0 !important; }
  .scroll-prog { display: none; }
}

/* hard JS-off fallback */
html.no-anim .reveal, html.no-anim .stagger > .anim-item { opacity: 1 !important; transform: none !important; }