/* ============================================================
   Lamia Lens — Motion layer
   • Scroll-driven reveals (pop / rise as you scroll)
   • Divider lines that DRAW themselves in on scroll
   • Accent-word underlines that draw in
   • Staggered hero entrance (feels alive on load)

   Everything is gated so reduced-motion, print, and browsers
   without scroll-driven-animation support see the final state.
   A `body[data-motion="off"]` switch (Tweaks) disables it all.
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   0. Shared keyframes
   ─────────────────────────────────────────────────────────── */
@keyframes line-grow      { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes line-grow-y    { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes soft-in        { from { opacity: 0; } to { opacity: 1; } }

/* Stronger reveal than the base file — pop up + un-blur.
   (Redefining the existing keyframe name upgrades every reveal.) */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(46px) scale(.985); filter: blur(6px); }
  62%  { filter: blur(0); }
  to   { opacity: 1; transform: translateY(0) scale(1);       filter: blur(0); }
}
@keyframes reveal-pop {
  from { opacity: 0; transform: translateY(20px) scale(.9);  filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    filter: blur(0); }
}

/* ───────────────────────────────────────────────────────────
   1. Drawn divider lines — scroll-driven
   The line scales from 0→1 across its own view() range, so it
   literally draws on as the section scrolls into view.
   ─────────────────────────────────────────────────────────── */
@supports (animation-timeline: view()) {

  /* Section-header underline (Work / About / …) */
  body:not([data-motion="off"]) .sec .sec-hd { border-bottom-color: transparent; position: relative; }
  body:not([data-motion="off"]) .sec .sec-hd::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--ink-20);
    transform: scaleX(0); transform-origin: left;
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 12% cover 42%;
  }

  /* Full-bleed separators between major sections — these are the
     "lines drawn as you scroll into the section" the client meant. */
  body:not([data-motion="off"]) :is(.statement, .marquee, .brands-marquee, .brands-row,
       .brands-grid, .footer, .lens) {
    border-top-color: transparent; position: relative;
  }
  body:not([data-motion="off"]) :is(.statement, .marquee, .brands-marquee, .brands-row,
       .brands-grid, .footer, .lens)::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--ink-20);
    transform: scaleX(0); transform-origin: left;
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 2% cover 32%;
    z-index: 4;
  }

  /* Services accordion — top rule + each row's rule draw in turn */
  body:not([data-motion="off"]) .svc-list { border-top-color: transparent; position: relative; }
  body:not([data-motion="off"]) .svc-list::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 6% cover 30%;
  }
  body:not([data-motion="off"]) .svc-row { border-bottom-color: transparent; position: relative; }
  body:not([data-motion="off"]) .svc-row::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 26%;
  }

  /* Stand-alone divider utilities */
  body:not([data-motion="off"]) .divider,
  body:not([data-motion="off"]) .divider-thick {
    transform: scaleX(0); transform-origin: left;
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 34%;
  }

  /* Smaller inner rules (meta rows, stats, footer baseline) */
  body:not([data-motion="off"]) :is(.hero-meta, .about-stats, .statement-foot,
       .footer-bottom, .svc-hrow:first-child) {
    border-top-color: transparent; position: relative;
  }
  body:not([data-motion="off"]) :is(.hero-meta, .about-stats, .statement-foot,
       .footer-bottom, .svc-hrow:first-child)::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: var(--ink-12);
    transform: scaleX(0); transform-origin: left;
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 14% cover 40%;
  }

  /* Accent-word underline draws in (titles' italic words + hero em) */
  body:not([data-motion="off"]) .sec-hd .title em,
  body:not([data-motion="off"]) .hero-title em { position: relative; }
  body:not([data-motion="off"]) .sec-hd .title em::after,
  body:not([data-motion="off"]) .hero-title em::after {
    content: ''; position: absolute; left: .02em; right: .02em; bottom: .04em; height: .07em;
    background: var(--accent); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    animation: line-grow linear both;
    animation-timeline: view();
    animation-range: entry 22% cover 52%;
  }
}

/* ───────────────────────────────────────────────────────────
   2. Hero entrance — staggered, plays on load
   `backwards` fill so the element reverts to its normal style
   after the intro (keeps the JS card parallax intact).
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes hero-title-in {
    from { opacity: 0; transform: translateY(38px); filter: blur(12px); }
    60%  { filter: blur(0); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  @keyframes hero-cards-in {
    from { opacity: 0; transform: translateY(80px) scale(.9); }
    to   { opacity: 1; transform: none; }
  }

  /* Stack hero (default) */
  body:not([data-motion="off"]) .hero-stack-title   { animation: hero-title-in 1.15s var(--ease-out) .05s backwards; }
  body:not([data-motion="off"]) .hero-stack-sub     { animation: hero-rise .9s var(--ease-out) .26s backwards; }
  body:not([data-motion="off"]) .hero-stack-pillars { animation: hero-rise .9s var(--ease-out) .4s backwards; }
  body:not([data-motion="off"]) .alfi-corner-left   { animation: hero-rise .9s var(--ease-out) .54s backwards; }
  body:not([data-motion="off"]) .alfi-corner-right  { animation: hero-rise .9s var(--ease-out) .62s backwards; }
  body:not([data-motion="off"]) .hero-stack-marquee { animation: soft-in 1.7s ease .55s backwards; }
  body:not([data-motion="off"]) .hero-stack-cards   { animation: hero-cards-in 1.25s var(--ease-out) .42s backwards; }
  body:not([data-motion="off"]) .hero-grid          { animation: soft-in 2.1s ease .25s backwards; }

  /* Other hero layouts (split / centered / bleed) */
  body:not([data-motion="off"]) .hero-eyebrow-row { animation: hero-rise .8s var(--ease-out) .12s backwards; }
  body:not([data-motion="off"]) .hero-title       { animation: hero-title-in 1.15s var(--ease-out) .05s backwards; }
  body:not([data-motion="off"]) .hero-sub         { animation: hero-rise .9s var(--ease-out) .28s backwards; }
  body:not([data-motion="off"]) .hero-cta-row     { animation: hero-rise .9s var(--ease-out) .42s backwards; }
  body:not([data-motion="off"]) .hero-meta        { animation: hero-rise .9s var(--ease-out) .54s backwards; }
  body:not([data-motion="off"]) .hero-right .hero-img,
  body:not([data-motion="off"]) .hero-bleed .hero-img { animation: soft-in 1.5s ease .3s backwards; }
}

/* ───────────────────────────────────────────────────────────
   3. Motion OFF (Tweaks switch) — settle everything to final
   ─────────────────────────────────────────────────────────── */
body[data-motion="off"] .reveal,
body[data-motion="off"] .reveal-scale {
  opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important;
}
body[data-motion="off"] :is(.hero-stack-title, .hero-stack-sub, .hero-stack-pillars,
  .alfi-corner-left, .alfi-corner-right, .hero-stack-cards, .hero-stack-marquee, .hero-grid,
  .hero-eyebrow-row, .hero-title, .hero-sub, .hero-cta-row, .hero-meta, .hero-img) {
  opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important;
}