/* ============================================================
   TableUpgrade — Motion enhancement layer
   Vanilla translation of the framer-motion / lenis spec.
   All motion respects prefers-reduced-motion.
   ============================================================ */

:root {
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);  /* most reveals */
  --ease-subtle: cubic-bezier(0.4, 0, 0.2, 1);    /* tiny opacity/color */
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* light spring feel */
}

/* ------------------------------------------------------------
   1. Lenis baseline
   ------------------------------------------------------------ */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* When Lenis is active, drop the native smooth-scroll fallback
   so we don't fight it. */
html.lenis { scroll-behavior: auto; }

/* ------------------------------------------------------------
   2. Scroll progress bar (PART 7)
   ------------------------------------------------------------ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 60;                 /* above sticky nav (50) */
  pointer-events: none;
  will-change: transform;
}

/* ------------------------------------------------------------
   3. Hero headline word-by-word reveal (PART 2)
   ------------------------------------------------------------ */
.hero-headline .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 600ms var(--ease-smooth),
    transform 600ms var(--ease-smooth);
  will-change: opacity, transform;
}
.hero-headline .word.is-in {
  opacity: 1;
  transform: translateY(0);
}
/* preserve trailing whitespace between words */
.hero-headline .word + .word { margin-left: 0.25em; }

/* ------------------------------------------------------------
   4. Section reveal cascade (PART 3)
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 600ms var(--ease-smooth),
    transform 600ms var(--ease-smooth);
  will-change: opacity, transform;
}
[data-reveal="eyebrow"]   { transform: translateY(12px); transition-duration: 400ms; }
[data-reveal="closing"]   { transform: translateY(12px); transition-duration: 500ms; }
[data-reveal="primary"]   { transform: translateY(20px); }

[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   5. Phone reveal (PART 11)
   ------------------------------------------------------------ */
[data-phone-reveal] {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition:
    opacity 800ms var(--ease-smooth),
    transform 800ms var(--ease-smooth);
  will-change: opacity, transform;
}
[data-phone-reveal].is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* twin-phones tilt is preserved by composing with their tilt classes; the
   .phone-tilt wrappers handle rotate, this layer animates the outer reveal */
[data-phone-reveal="twin"] {
  transform: translateY(30px) scale(0.97);
  transition-duration: 700ms;
}

/* ------------------------------------------------------------
   6. Industry-logic SVG icons — always visible (PART 5 disabled)
   The original draw-in animation set stroke-dashoffset to the path's
   full length, then animated it to 0 when .is-in was added by an
   IntersectionObserver. Two issues made it leave icons invisible:
   (a) the inline-style stroke-dashoffset from motion.js beats the
   CSS .is-in rule on specificity; (b) the observer was unreliable on
   initial load when the section was already in view. Override with
   !important so icons render correctly regardless of JS state.
   ------------------------------------------------------------ */
.industry-col svg [data-draw],
.industry-col svg path,
.industry-col svg line,
.industry-col svg polyline,
.industry-col svg polygon,
.industry-col svg rect,
.industry-col svg circle {
  stroke-dasharray: none !important;
  stroke-dashoffset: 0 !important;
}

/* ------------------------------------------------------------
   7. FAQ accordion — springy easing (PART 6)
   Keep max-height (JS sets it from scrollHeight) but swap the easing
   for a soft spring approximation and animate the chevron with the
   same curve.
   ------------------------------------------------------------ */
.faq-a {
  transition: max-height 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-q .chev {
  transition: transform 350ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ------------------------------------------------------------
   8. Button micro-interactions (PART 9)
   ------------------------------------------------------------ */
.btn {
  transition:
    background-color 200ms var(--ease-subtle),
    color 200ms var(--ease-subtle),
    border-color 200ms var(--ease-subtle),
    transform 200ms var(--ease-spring),
    box-shadow 200ms var(--ease-subtle);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 80ms; }

/* ------------------------------------------------------------
   9. FOH magnetic hover (PART 8)
   ------------------------------------------------------------ */
.foh-logo {
  display: inline-flex;
  transition:
    transform 400ms var(--ease-spring),
    color 250ms var(--ease-subtle),
    opacity 250ms var(--ease-subtle);
  will-change: transform;
  transform-origin: center;
}
.foh-logo.is-hover {
  transform: scale(1.05) translate(var(--mx, 0), var(--my, 0));
}

/* ------------------------------------------------------------
   10. Calculator output pulse (PART 10)
   ------------------------------------------------------------ */
.calc-card-output {
  transition: box-shadow 600ms var(--ease-subtle);
}
.calc-card-output.is-pulsing {
  box-shadow: 0 0 24px 4px rgba(197, 165, 114, 0.18);
}

/* ------------------------------------------------------------
   11. Reduced motion — opacity-only fallback per spec
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .hero-headline .word,
  [data-reveal],
  [data-phone-reveal] {
    transform: none !important;
    transition: opacity 200ms linear !important;
  }

  /* SVG draw-in: show fully drawn immediately */
  .industry-col svg path,
  .industry-col svg line,
  .industry-col svg polyline,
  .industry-col svg polygon,
  .industry-col svg rect,
  .industry-col svg circle {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  /* FAQ + buttons: instant */
  .faq-a { transition: none !important; }
  .faq-q .chev { transition: none !important; }
  .btn { transition: background-color 200ms, color 200ms, border-color 200ms !important; }
  .btn:hover, .btn:active { transform: none !important; }

  /* Magnetic hover: opacity + color only */
  .foh-logo { transition: opacity 200ms, color 200ms !important; }
  .foh-logo.is-hover { transform: none !important; }

  /* Calculator pulse: no glow */
  .calc-card-output, .calc-card-output.is-pulsing { transition: none !important; box-shadow: none !important; }

  /* Progress bar: still tracks scroll but unspringed (JS handles) */
}