/* ============================================================
   MORPHO — Cinematic layer
   Loaded AFTER home.css. Adds: architectural grid lines,
   scroll-triggered editorial type reveals, cinematic image
   wipes, hero slow-zoom + curtain, parallax, and the motion
   variables driven by the Tweaks panel.
   ============================================================ */

:root {
  /* Motion engine — overwritten live by the Tweaks panel (motion intensity). */
  --reveal-y: 24px;          /* rise distance for block reveals      */
  --reveal-dur: 0.95s;       /* base reveal duration                 */
  --grid-cols: 6;            /* full-bleed vertical line count       */
  --grid-line: rgba(28,26,22,.055);
}

/* ============================================================
   ARCHITECTURAL GRID LINES (full-bleed vertical rules)
   ============================================================ */
.gridlines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px);
  background-size: calc(100% / var(--grid-cols)) 100%;
  border-right: 1px solid var(--grid-line);
}

/* Keep section content above the grid */
.section, .hero, .svc, .why, .testi, .cta, .footer { position: relative; }
.hero__inner, .svc > .wrap, .why > .wrap, .testi > .wrap, .cta > .wrap,
.section > .wrap, .footer__top, .footer__bot { position: relative; z-index: 1; }

/* Per-theme line color */
.hero   { --grid-line: rgba(255,255,255,.10); }
.svc    { --grid-line: rgba(28,26,22,.05); }
.why    { --grid-line: rgba(255,255,255,.07); }
.testi  { --grid-line: rgba(28,26,22,.05); }
.cta    { --grid-line: rgba(28,26,22,.06); }
.footer { --grid-line: rgba(255,255,255,.06); }

@media (max-width: 900px) { :root { --grid-cols: 4; } }
@media (max-width: 560px) { :root { --grid-cols: 3; } }

/* ============================================================
   BLOCK REVEAL (uses motion vars)
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(var(--reveal-y));
  transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ============================================================
   EDITORIAL TYPE REVEAL — words rise out of a clipping mask
   JS wraps each word: <span class="tr"><span>word</span></span>
   ============================================================ */
.tr { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.tr > span {
  display: inline-block; transform: translateY(115%);
  transition: transform var(--reveal-dur) var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: transform;
}
.tr.is-in > span { transform: translateY(0); }

/* ============================================================
   CINEMATIC IMAGE WIPE — clip reveal + inner slow scale
   ============================================================ */
.reveal-img { clip-path: inset(0 100% 0 0); transition: clip-path calc(var(--reveal-dur) * 1.25) var(--ease-out); }
.reveal-img.is-in { clip-path: inset(0 0 0 0); }
.reveal-img > img, .reveal-img > .media__label { transition: transform calc(var(--reveal-dur) * 1.7) var(--ease-out); }
.reveal-img > img { transform: scale(1.09); }
.reveal-img.is-in > img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1 !important; transform: none !important; }
  .tr > span { transform: none !important; }
  .reveal-img { clip-path: none !important; }
  .reveal-img > img { transform: none !important; }
}

/* ============================================================
   HERO — slow zoom + parallax container
   ============================================================ */
/* Extra headroom so the parallax shift never exposes an edge */
.hero__media { top: -8%; bottom: -8%; height: auto; will-change: transform; }
.hero__media img { transform: scale(var(--hero-zoom, 1.14)); transform-origin: 58% 45%; }
.hero.is-ready .hero__media img {
  transform: scale(1);
  transition: transform 2.6s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img { transform: none !important; }
}

/* Hero content elements fade up once the curtain clears */
.hero__inner > * { opacity: 0; transform: translateY(20px); }
.hero.is-ready .hero__inner > * {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.hero.is-ready .hero__eyebrow { transition-delay: .15s; }
.hero.is-ready .hero__title { transition-delay: .25s; }
.hero.is-ready .hero__sub { transition-delay: .5s; }
.hero.is-ready .hero__actions { transition-delay: .62s; }
.hero.is-ready .hero__bar { transition-delay: .74s; }
@media (prefers-reduced-motion: reduce) {
  .hero__inner > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   CURTAIN — brand load reveal
   ============================================================ */
#curtain {
  position: fixed; inset: 0; z-index: 300; background: var(--ink-900); color: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
#curtain .cu-wm {
  font-family: var(--font-display); font-size: clamp(40px, 8vw, 96px);
  letter-spacing: var(--ls-logo); text-transform: uppercase; line-height: 1;
  opacity: 0; transform: translateY(14px);
  animation: cuIn .8s var(--ease-out) .1s forwards;
}
#curtain .cu-wm .dot { margin-left: -.06em; }
@keyframes cuIn { to { opacity: 1; transform: none; } }
#curtain.lift { transform: translateY(-100%); transition: transform 1s var(--ease-inout); }
#curtain.gone { display: none; }

/* ============================================================
   SCROLL PROGRESS BAR (thin, top)
   ============================================================ */
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 150;
  background: var(--sand-500); transition: width .1s linear; pointer-events: none;
}