/* ============================================================
   ENDUURR · motion & graphics layer
   Loaded after style.css. Pure presentation: every rule here is
   decorative and neutralised under prefers-reduced-motion.
   ============================================================ */

/* ---------- Hero canvas ---------- */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hero-inner { position: relative; z-index: 2; }

/* Vignette so type always wins over the canvas */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 30% 45%,
              color-mix(in srgb, var(--bg) 78%, transparent) 0%,
              transparent 70%);
}
[data-theme="startline"] .hero::after, [data-theme="lab"] .hero::after {
  background: radial-gradient(ellipse 70% 60% at 30% 45%,
              color-mix(in srgb, var(--bg) 86%, transparent) 0%,
              transparent 72%);
}

/* ---------- Word-split headlines ---------- */
[data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-split] .w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(102%);
  transition: transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 55ms);
}
[data-split].lit .w > i { transform: none; }

/* ---------- Countdown tick ---------- */
.cd-num.tick { animation: cdtick .35s cubic-bezier(.16,1,.3,1); }
@keyframes cdtick {
  0% { transform: translateY(-42%); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
.cd-cell { overflow: hidden; }

/* ============================================================
   STATEMENT · full-bleed scroll-driven type
   ============================================================ */
.statement {
  position: relative; overflow: hidden;
  padding: clamp(90px, 16vw, 220px) 0;
  border-bottom: 1px solid var(--line);
}
.statement-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
}
[data-theme="noir"] .statement-bg { background: radial-gradient(ellipse 50% 40% at 80% 20%, rgba(237,236,230,.06), transparent 70%); }
.statement-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(30px, 5vw, 76px); align-items: center;
}

/* ---------- Splits chart ---------- */
.splits { position: relative; }
.splits-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; color: var(--faint); flex-wrap: wrap; }
.splits-live { color: var(--accent); }
[data-theme="noir"] .splits-live { color: var(--dim); }
.splits-bars {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(4px, .7vw, 9px);
  align-items: end; height: clamp(150px, 20vw, 250px);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}
.splits-bars span {
  display: block; height: var(--h);
  background: color-mix(in srgb, var(--ink) 26%, transparent);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .8s cubic-bezier(.16,1,.3,1), background-color .4s;
  transition-delay: calc(var(--i) * 55ms);
}
/* the last third, where the day is lost */
.splits-bars span.fade { background: var(--accent); }
[data-theme="noir"] .splits-bars span.fade { background: var(--ink); }
/* grow once the figure is ~a third into view, driven by --p from data-track */
.splits[style*="--p"] .splits-bars span, .splits .splits-bars span { transform: scaleY(0); }
.splits.grown .splits-bars span { transform: scaleY(1); }

.splits-axis { display: flex; justify-content: space-between; margin-top: 12px; color: var(--faint); gap: 10px; }
.splits-mark { color: var(--dim); }
.splits-cap { margin-top: 14px; color: var(--faint); }

.statement-lead {
  font-family: var(--font-display); font-weight: var(--display-weight);
  text-transform: var(--display-transform); letter-spacing: var(--display-spacing);
  line-height: 1.02; font-size: clamp(2rem, 6.4vw, 5.6rem);
  max-width: 18ch;
}
.statement-sub { margin-top: clamp(20px, 3vw, 34px); color: var(--dim); max-width: 52ch; font-size: clamp(1rem, 1.25vw, 1.15rem); }

/* Parallax rule that draws itself as you scroll */
.scroll-rule {
  height: 1px; background: var(--accent); margin: clamp(26px, 4vw, 44px) 0;
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
[data-theme="noir"] .scroll-rule { background: var(--ink); }

/* ============================================================
   PHYSIOLOGY · the full-bleed drawn moment
   ============================================================ */
.physio { padding: clamp(70px, 11vw, 150px) 0; border-bottom: 1px solid var(--line); overflow: hidden; }
.physio-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 70px); align-items: center; }
.physio svg { width: 100%; height: auto; overflow: visible; }
/* The curve draws itself on arrival, over its own 1.25s, NOT tied to scroll
   position. Scroll-linked drawing meant a fast scroll blew past the section
   before the line finished, and a slow one finished it off-screen. */
.physio .reveal-clip { clip-path: inset(0 100% 0 0); }
.physio figure.drawn .reveal-clip {
  animation: clipReveal 1.25s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes clipReveal { to { clip-path: inset(0 0 0 0); } }
.physio-title { font-size: clamp(1.8rem, 4.4vw, 3.4rem); }

/* ============================================================
   PILLARS · big panels with live canvases
   ============================================================ */
.pillars-stack { border-top: 1px solid var(--line); }
.pillar-row {
  position: relative; display: grid;
  grid-template-columns: clamp(90px, 12vw, 190px) minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(20px, 3.4vw, 50px); align-items: center;
  padding: clamp(40px, 6vw, 78px) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden; transition: background-color .5s var(--ease-soft);
}
.pillar-row:hover { background: var(--bg-2); }
.pillar-index {
  font-family: var(--font-display); text-transform: var(--display-transform);
  font-size: clamp(2.4rem, 7vw, 6rem); line-height: .8; color: transparent;
  -webkit-text-stroke: 1px var(--line-strong); transition: color .5s, -webkit-text-stroke-color .5s;
}
.pillar-row:hover .pillar-index { color: var(--accent); -webkit-text-stroke-color: transparent; }
[data-theme="noir"] .pillar-row:hover .pillar-index { color: var(--ink); }
.pillar-name {
  font-family: var(--font-display); text-transform: var(--display-transform);
  font-size: clamp(1.8rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: var(--display-spacing);
  margin-bottom: 12px;
}
.pillar-line { color: var(--dim); max-width: 46ch; }
.pillar-series { display: inline-block; margin-top: 14px; color: var(--faint); }
.pillar-canvas { width: 100%; height: clamp(90px, 12vw, 150px); display: block; }

/* ============================================================
   JOURNAL cards with hover motion
   ============================================================ */
.jcard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.jcard {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-2); padding: clamp(22px, 3vw, 32px);
  min-height: clamp(220px, 24vw, 290px);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .5s var(--ease-soft), border-color .3s;
}
[data-theme="lab"] .jcard { border-color: var(--ink); }
.jcard:hover { transform: translateY(-6px); border-color: var(--accent); }
[data-theme="noir"] .jcard:hover { border-color: var(--line-strong); }
.jcard-idx { color: var(--faint); }
.jcard-title {
  font-family: var(--font-display); text-transform: var(--display-transform);
  font-size: clamp(1.15rem, 2.1vw, 1.6rem); line-height: 1.08; letter-spacing: var(--display-spacing);
  margin-top: auto;
}
.jcard-tag { color: var(--dim); }
.jcard-sweep {
  position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-soft);
}
[data-theme="noir"] .jcard-sweep { background: var(--ink); }
.jcard:hover .jcard-sweep { transform: scaleX(1); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 940px) {
  .physio-grid { grid-template-columns: 1fr; }
  .statement-grid { grid-template-columns: 1fr; }
  .pillar-row { grid-template-columns: 64px minmax(0, 1fr); }
  /* Keep the pillar motion on mobile, it's the section's only visual.
     Drop it to a slim band under the copy instead of hiding it. */
  .pillar-row .pillar-canvas { grid-column: 1 / -1; height: 64px; margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .pillar-canvas { display: none !important; }
  [data-split] .w > i { transform: none !important; }
  .scroll-rule { transform: scaleX(1) !important; }
  .physio .reveal-clip { clip-path: none !important; animation: none !important; }
  .splits-bars span { transform: scaleY(1) !important; transition: none !important; }
  .cd-num.tick { animation: none !important; }
}