/* ============================================================
   Kingscrowd — Motion layer
   Hover/interaction polish (always on) + entrance/scroll motion
   (gated behind prefers-reduced-motion: no-preference)
   ============================================================ */

:root {
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.34,1.4,.5,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
}

/* ---------- Scroll progress bar ---------- */
.scroll-prog {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--purple), #7C5CFF);
  z-index: 200; pointer-events: none;
  box-shadow: 0 0 12px rgba(75,45,255,0.5);
  transition: width .1s linear;
}

/* ============================================================
   HOVER / INTERACTION POLISH  (kept on even w/ reduced motion)
   ============================================================ */

/* Cards — lift + shadow */
.card, .proof-card, .fp-card, .rail-card, .update-card, .flow-card,
.cstep, .dark-card, .scorecard, .util-container {
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
              border-color .4s var(--ease-out);
  will-change: transform;
}
.proof-card:hover, .fp-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: var(--purple-soft);
}
.card--pad:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.rail-card:hover {
  transform: translateY(-4px) scale(1.015);
  box-shadow: var(--shadow);
  border-color: var(--purple-soft);
}

/* Proof / numbers icons spring on hover */
.proof-card .ic, .ns-cell .ic { transition: transform .4s var(--ease-soft); }
.proof-card:hover .ic { transform: translateY(-2px) scale(1.12) rotate(-4deg); }

/* Dark traction stats */
.tstat { transition: transform .35s var(--ease-out); }
.tstat:hover { transform: translateY(-4px); }
.tstat:hover .ic { color: rgba(255,255,255,0.9); }
.tstat .ic { transition: color .35s ease; }

/* Scorecard rows highlight on hover */
.sc-row { transition: background .3s ease; }
.sc-row:hover { background: var(--purple-tint); }
.sc-row .sc-dim svg { transition: transform .4s var(--ease-soft); }
.sc-row:hover .sc-dim svg { transform: scale(1.18) rotate(-6deg); }

/* Timeline steps */
.cstep:hover .cstep-n { transform: translateY(-2px); }
.cstep-n { transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-out); }

/* Mosaic rating / report rows slide */
.prod-rate, .report-row, .ratings-row, .row, .exit-row, .update-card {
  transition: transform .3s var(--ease-out), background .3s ease;
}
.report-row:hover, .update-card:hover { transform: translateX(4px); }

/* Avatar tiles pop */
.avt, .ptile { transition: transform .35s var(--ease-soft); }
.report-row:hover .avt, .row:hover .avt, .prod-rate:hover .avt { transform: scale(1.12) rotate(-5deg); }
.pi:hover .ptile { transform: scale(1.12) rotate(-4deg); }
.pi { transition: transform .3s var(--ease-out); }
.pi:hover { transform: translateX(3px); }

/* Logos */
.logo { transition: opacity .3s ease, transform .35s var(--ease-out), color .3s ease; }
.logo:hover { transform: translateY(-3px); }

/* Buttons — lift already in styles; add sheen sweep on primary */
.btn--primary { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.38) 50%, transparent 80%);
  transform: translateX(-130%) skewX(-15deg);
}
.btn--primary:hover::after { animation: btn-sheen .85s var(--ease-out); }
@keyframes btn-sheen { to { transform: translateX(130%) skewX(-15deg); } }

/* Ghost/on-dark buttons subtle */
.btn { transition: transform .18s var(--ease-out), background .2s ease,
                   box-shadow .2s ease, border-color .2s ease; }

/* tlink arrow already nudges; add to se-link */
.se-link .top svg { transition: transform .2s var(--ease-out); }
.se-link:hover .top svg { transform: translate(2px,-2px); }

/* FAQ rows */
.faq-q { transition: padding-left .25s var(--ease-out); }
.faq-item:hover .faq-q { padding-left: 4px; }
.faq-q .qic { transition: background .3s ease, color .3s ease, transform .35s var(--ease-soft); }
.faq-item:hover .qic { background: var(--purple-soft); color: var(--purple); }
.faq-item.open .qic { background: var(--purple); color: #fff; }

/* Footer social */
.footer-social a { transition: background .25s ease, transform .3s var(--ease-soft); }
.footer-social a:hover { transform: translateY(-3px) scale(1.08); }

/* Flow / capital loop chip */
.cap-loop { transition: transform .3s var(--ease-soft), background .3s ease; }
.cstep:hover .cap-loop { transform: scale(1.04); }

/* image-slot frames lift */
.update-thumb, .cap-frame, .founder-frame { transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.update-card:hover .update-thumb { transform: scale(1.03); }

/* ---------- Fallback: if the doc can't animate (hidden tab / print),
   never leave entrance content stuck invisible ---------- */
.force-show .reveal, .force-show [data-stagger],
.force-show [data-stagger] > *,
.force-show .anim-area, .force-show .anim-dot {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.force-show .anim-line { stroke-dashoffset: 0 !important; transition: none !important; }
.force-show .header-in { opacity: 1 !important; transform: none !important; transition: none !important; }
.force-show .note { animation: none !important; transform: none !important; }
.force-show .mark::after { transform: scaleX(1) rotate(-.6deg) !important; transition: none !important; }
.force-show .bracketed::before, .force-show .bracketed::after { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   ENTRANCE + SCROLL MOTION  (reduced-motion safe)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* refine the existing .reveal easing */
  .reveal { transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
  /* stagger parents: don't translate the whole block (children carry motion) */
  .reveal[data-stagger] { transform: none; }

  /* ---- Staggered children ---- */
  [data-stagger] > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
    transition-delay: calc(var(--si, 0) * 65ms);
  }
  [data-stagger].in > * { opacity: 1; transform: none; }
  [data-stagger="pop"] > * { transform: translateY(22px) scale(.94); }
  [data-stagger="pop"].in > * { transform: none; }
  /* absolutely-positioned annotation children inside stagger parents: keep them out of the flow motion */
  [data-stagger] > .hero-anno-2, [data-stagger] > .hero-anno-1 { transition-delay: 420ms; }

  /* ---- Chart drawing ---- */
  .anim-line {
    stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
    transition: stroke-dashoffset 1.5s var(--ease-out);
  }
  .anim-line.drawn { stroke-dashoffset: 0; }
  .anim-area {
    opacity: 0; transform: scaleY(.001); transform-box: fill-box; transform-origin: bottom;
    transition: opacity .9s ease .35s, transform 1.1s var(--ease-out) .3s;
  }
  .anim-area.drawn { opacity: 1; transform: scaleY(1); }
  .anim-dot {
    opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center;
    transition: opacity .3s ease, transform .55s var(--ease-soft);
  }
  .anim-dot.drawn { opacity: 1; transform: scale(1); }

  /* ---- Star pop ---- */
  .stars.pop svg { opacity: 0; transform: scale(0) rotate(-35deg); animation: star-pop .5s var(--ease-soft) forwards; }
  .stars.pop svg:nth-child(1) { animation-delay: .02s; }
  .stars.pop svg:nth-child(2) { animation-delay: .08s; }
  .stars.pop svg:nth-child(3) { animation-delay: .14s; }
  .stars.pop svg:nth-child(4) { animation-delay: .20s; }
  .stars.pop svg:nth-child(5) { animation-delay: .26s; }
  @keyframes star-pop { to { opacity: 1; transform: none; } }

  /* ---- Marker underline draws in ---- */
  .mark::after { transform: scaleX(0) rotate(-.6deg); transform-origin: left center; transition: transform .7s var(--ease-out) .25s; }
  .mark.mark-in::after { transform: scaleX(1) rotate(-.6deg); }

  /* ---- Bracket corners draw in ---- */
  .bracketed::before, .bracketed::after { opacity: 0; transition: opacity .5s ease .15s, transform .6s var(--ease-out) .15s; }
  .bracketed::before { transform: translateX(8px); }
  .bracketed::after { transform: translateX(-8px); }
  .bracketed.br-in::before, .bracketed.br-in::after { opacity: 1; transform: none; }

  /* ---- Header load ---- */
  .header-in { transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  body:not(.ld) .header-in { opacity: 0; transform: translateY(-12px); }

  /* ---- Hand annotation float ---- */
  .note { animation: anno-float 5.5s ease-in-out infinite; }
  .hero-anno-2 .note, .founder-anno .note { animation-duration: 6.5s; }
  .prod-hand .note { animation: none; }
  @keyframes anno-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

  /* ---- Why-Now step icons: icon stays still, accent dot drifts in place ---- */
  .step-dot { transform-box: fill-box; transform-origin: center; animation: step-dot-drift 4.5s ease-in-out infinite; }
  .why-steps .step:nth-child(2) .step-dot { animation-delay: .7s; animation-duration: 5s; }
  .why-steps .step:nth-child(3) .step-dot { animation-delay: 1.4s; animation-duration: 5.5s; }
  @keyframes step-dot-drift {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(-1.5px, 5px); }
    75% { transform: translate(2px, 3px); }
  }
  /* Step hand-annotations reveal on card hover */
  .step .note { opacity: 0; transition: opacity .3s ease; }
  .step:hover .note { opacity: 1; }

  /* ---- Parallax targets get smoothed ---- */
  .banner-media image-slot { transition: transform .12s linear; will-change: transform; }
}