/* ============================================================
   QuantumBlock — landing motion v2
   Stack:
   - Locomotive Scroll (smooth scroll + data-scroll observers)
   - CSS scroll-driven animations (view-timeline) — modern browsers
   - JS spring system (Framer Motion-style) for micro-interactions
   No section stamps, no kinetic typography, no magnetic cursor.
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html.has-scroll-smooth { overflow: hidden; }
html.has-scroll-smooth body { overflow: hidden; }
.has-scroll-smooth [data-scroll-container] {
  min-height: 100vh;
  position: relative;
}
.c-scrollbar {
  position: fixed; right: 0; top: 0; width: 6px; height: 100vh;
  z-index: 1000; opacity: 0.4;
  background: transparent;
  transition: opacity 0.3s;
}
.c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar { opacity: 1; }
.c-scrollbar_thumb {
  position: absolute; top: 0; right: 0;
  width: 4px; margin-right: 1px;
  background: var(--green);
  opacity: 0.5;
  cursor: grab;
  border-radius: 0;
}
.c-scrollbar_thumb:active { cursor: grabbing; }

/* ============== Reveal primitives ==============
   data-anim attributes apply initial state.
   .is-inview is set by Locomotive Scroll observer (data-scroll + data-scroll-class).
   Falls back to scroll-driven CSS animation on browsers that support it. */

[data-anim] {
  will-change: transform, opacity;
}
[data-anim="fade-up"] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-anim="fade-up"].is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-anim="fade-in"] {
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
[data-anim="fade-in"].is-inview { opacity: 1; }

[data-anim="reveal-mask"] {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out), opacity 0.6s var(--ease-out);
}
[data-anim="reveal-mask"].is-inview {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

[data-anim="scale-in"] {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.8s var(--ease-out), transform 1s var(--ease-spring);
}
[data-anim="scale-in"].is-inview {
  opacity: 1;
  transform: scale(1);
}

[data-anim="line-grow"] {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s var(--ease-out);
}
[data-anim="line-grow"].is-inview { transform: scaleX(1); }

/* stagger children — each child animates with its own delay */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-stagger].is-inview > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-stagger].is-inview > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-inview > *:nth-child(2) { transition-delay: 0.13s; }
[data-stagger].is-inview > *:nth-child(3) { transition-delay: 0.21s; }
[data-stagger].is-inview > *:nth-child(4) { transition-delay: 0.29s; }
[data-stagger].is-inview > *:nth-child(5) { transition-delay: 0.37s; }
[data-stagger].is-inview > *:nth-child(6) { transition-delay: 0.45s; }
[data-stagger].is-inview > *:nth-child(7) { transition-delay: 0.53s; }
[data-stagger].is-inview > *:nth-child(8) { transition-delay: 0.61s; }

/* Section heading kicker — small horizontal underline that grows */
.kicker-row {
  display: flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--green);
}
.kicker-row::after {
  content: ""; flex: 0 0 64px; height: 1px; background: var(--green);
  transform-origin: left center; transform: scaleX(0);
  transition: transform 1.1s 0.15s var(--ease-out);
}
.is-inview .kicker-row::after,
.kicker-row.is-inview::after { transform: scaleX(1); }

/* ============== Scroll-driven CSS (modern browsers) ============== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* parallax for the hero art block — moves slightly with page scroll */
    .hero-art {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 40vh;
    }
    @keyframes hero-parallax {
      from { transform: translate3d(0, 0, 0); }
      to   { transform: translate3d(0, -30px, 0); }
    }

    /* anatomy block — light scale on view enter */
    .anatomy {
      animation: anatomy-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes anatomy-rise {
      from { opacity: 0; transform: translate3d(0, 40px, 0); }
      to   { opacity: 1; transform: translate3d(0, 0, 0); }
    }

    /* section progress underline under .serif h2 */
    section h2.serif {
      position: relative;
    }
    section h2.serif::after {
      content: ""; position: absolute; left: 0; bottom: -10px;
      height: 1px; width: 120px;
      background: var(--green);
      transform-origin: left center;
      transform: scaleX(0);
      animation: h2-underline linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    @keyframes h2-underline {
      to { transform: scaleX(1); }
    }
  }
}

/* ============== Spring buttons / cells (Framer-Motion-ish) ============== */
.btn, .pricing .price, .why-cell, .how-step, .feat li, .field,
.metric, .trade-card, .qb-tweaks .seg button, tr {
  transition: transform 0.55s var(--ease-spring), border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.btn:hover {
  transform: translate3d(0, -2px, 0);
}
.why-cell { transition: background-color 0.4s var(--ease-out), transform 0.45s var(--ease-spring); }
.why-cell:hover {
  background: color-mix(in srgb, var(--green) 6%, transparent);
  transform: translate3d(0, -2px, 0);
}
.how-step { transition: border-color 0.4s, transform 0.55s var(--ease-spring); }
.how-step:hover {
  transform: translate3d(0, -3px, 0);
}
.pricing .price {
  transition: transform 0.6s var(--ease-spring), border-color 0.4s, box-shadow 0.5s;
}
.pricing .price:hover {
  transform: translate3d(0, -4px, 0);
  border-color: var(--green);
  box-shadow: 0 14px 36px -18px rgba(0, 0, 0, 0.6);
}
/* Track-record specific springs */
.metric { transition: transform 0.45s var(--ease-spring), border-color 0.4s, background-color 0.4s; }
.metric:hover { transform: translate3d(0, -2px, 0); border-color: var(--green); }
.trade-card { transition: transform 0.45s var(--ease-spring), border-color 0.4s; }
.trade-card:hover { transform: translate3d(0, -2px, 0); }

/* counter visual hint */
.counter { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  [data-anim], [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .kicker-row::after, .h2.serif::after { transform: scaleX(1) !important; }
  html.has-scroll-smooth { overflow: auto; }
  html.has-scroll-smooth body { overflow: auto; }
  .c-scrollbar { display: none; }
}