/* ==========================================================
   IKSHVAK // ONE-TAKE INSTRUMENT — cinematic homepage chrome
   Loads after main.css + theme-toggle.css. Additive only;
   main.css stays byte-identical to the prototype.
   ========================================================== */

/* ----------------------------------------------------------
   LENIS resets — main.css sets scroll-behavior:smooth which
   fights programmatic smooth scroll.
   ---------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----------------------------------------------------------
   VIEW TRANSITIONS — zero-JS cross-document morphs where
   supported, ignored everywhere else.
   ---------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* ----------------------------------------------------------
   THE SCENE — one fixed canvas behind the entire page
   ---------------------------------------------------------- */
#scene-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}
html.no-webgl #scene-canvas { display: none; }
html.no-webgl .st-hero {
  background: radial-gradient(ellipse at 50% 40%, var(--ivory) 0%, var(--white) 70%);
}

/* Film grain — SVG turbulence tile, barely-there, classy.
   mix-blend-mode keeps it from veiling the dark theme white. */
#grain {
  position: fixed;
  inset: -60px;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grainShift 0.9s steps(2) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(18px, -22px); }
  50%  { transform: translate(-14px, 12px); }
  75%  { transform: translate(22px, 18px); }
  100% { transform: translate(0, 0); }
}

/* ----------------------------------------------------------
   PAGE STRUCTURE — all stations float above the canvas
   ---------------------------------------------------------- */
#cinema { position: relative; z-index: 1; }
.st { position: relative; }

/* Hero: chrome only — the scene IS the background */
.st-hero.hero { background: transparent !important; }

/* Leader-line SVG is FIXED to the viewport (same coordinate space
   as the WebGL render) so the vertex dots can never jitter against
   the 3D during smooth scrolling. Labels stay in hero space. */
#annotations {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* Generous invisible hit area on the hero category links — the
   typewriter delete/retype shrinks the text box, which used to drop
   the hover mid-animation and glitch the cube dissolve */
.hero-nav__link::before {
  content: '';
  position: absolute;
  inset: -24px -32px;
}

/* The loop runway — empty scroll distance while the rebuilt
   instrument settles into the hero framing before the wrap */
.st-loop { height: 175vh; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .st-loop { height: 20vh; } }

/* Travel bands: empty scroll runway for camera moves */
.st-travel { height: 90vh; pointer-events: none; }
/* The unfolding runway is shorter — the gap between Recent and the
   first showcase case read as dead space (user feedback) */
.st-unfold { height: 55vh; }

/* Shared station typography */
.st__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.st__head {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--crimson);
  text-transform: uppercase;
  margin-bottom: 28px;
  font-variant-numeric: tabular-nums;
}
.st__display {
  font-size: clamp(44px, 7vw, 112px);
  max-width: 16ch;
}
.st__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 56px;
  max-width: 980px;
}
.st__body {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 460px;
}
.st__body strong { font-weight: 500; color: var(--crimson); }

/* ----------------------------------------------------------
   STATION 01 — WELCOME TO ME
   ---------------------------------------------------------- */
.st-intent {
  min-height: 130vh;
  display: flex;
  align-items: center;
  padding: 15vh 0;
}
/* the welcome message — display voice (Fraunces), one column,
   sized between body copy and the old headline */
.st-welcome__text {
  font-size: clamp(26px, 2.8vw, 42px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  max-width: 880px;
  color: var(--ink);
}
@media (max-width: 900px) {
  .st-welcome__text { font-size: clamp(22px, 5vw, 30px); }
}

/* ----------------------------------------------------------
   STATIONS 02–05 — THE SHOWCASE (four category cases past the
   morphing galaxy; alternating sides; linked headings)
   ---------------------------------------------------------- */
.st-showcase { padding: 6vh 0 14vh; }
.case {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 110vh;
  width: min(640px, calc(100% - 2 * var(--pad)));
  margin-left: var(--pad);
}
.case--right {
  margin-left: auto;
  margin-right: var(--pad);
}
.case__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.case--right .case__body { align-items: flex-end; text-align: right; }
.case__cat {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--crimson);
  text-transform: uppercase;
}
.case__name-link { text-decoration: none; color: var(--ink); }
.case__name {
  font-size: clamp(44px, 6.5vw, 100px);
  line-height: 0.95;
  transition: color 0.3s ease;
  position: relative;
}
.case__name::after {
  content: '→';
  font-size: 0.4em;
  vertical-align: 0.5em;
  margin-left: 0.3em;
  color: var(--crimson);
  opacity: 0;
  transform: translateX(-8px);
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.case__name-link:hover .case__name { color: var(--crimson); }
.case__name-link:hover .case__name::after { opacity: 1; transform: translateX(0); }
.case__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--mute);
  max-width: 400px;
}
.case__posts {
  margin-top: 22px;
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
}
.case--right .case__posts { align-self: flex-end; }
.case__posts .spec { text-decoration: none; }
.case__posts .spec .spec__v { transition: color 0.3s ease; }
.case__posts .spec:hover .spec__v { color: var(--crimson); }

.spec--link { text-decoration: none; cursor: pointer; }
.spec--link .spec__v { color: var(--crimson); letter-spacing: 0.14em; font-size: 12px; }
.spec--link:hover { padding-left: 8px; }

/* ----------------------------------------------------------
   ALL POSTS — the final case shows the 8 most recent posts as
   a compact card grid echoing the Recent cards, plus a link to
   the full posts page. Static height by design: an in-place
   expander mutated the page mid-story and glitched the camera.
   ---------------------------------------------------------- */
.case__posts--all { max-width: 640px; }
.allposts__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.allpost {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  text-decoration: none;
  text-align: left;
  transition: transform 0.35s ease, border-color 0.35s ease;
}
.allpost:hover {
  transform: translateY(-3px);
  border-color: var(--crimson);
}
.allpost__cat {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--crimson);
  text-transform: uppercase;
}
.allpost__title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
  overflow-wrap: break-word;
}
.allpost__date {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--mute);
  margin-top: auto;
}
.allposts__link {
  margin-top: 18px;
  align-self: flex-start;
  display: inline-block;
  padding: 12px 20px;
  border: 1px solid var(--rule);
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.allposts__link:hover {
  color: var(--crimson);
  border-color: var(--crimson);
}
.case--right .allposts__link { align-self: flex-end; }
@media (max-width: 640px) {
  .allposts__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------
   STATION 04 — RECENT (cards over a dimmed scene)
   ---------------------------------------------------------- */
.st-recent { padding-top: 14vh; padding-bottom: 8vh; }
.st__scrim {
  position: absolute;
  inset: -8vh 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 40%,
    color-mix(in srgb, var(--white) 88%, transparent) 0%,
    color-mix(in srgb, var(--white) 55%, transparent) 65%,
    transparent 100%);
  pointer-events: none;
}
.st-recent .st__head { margin-bottom: 18px; }

/* Welcome: strong paper lift behind the copy so the lattice behind
   never fights the text for contrast */
.st__scrim--left {
  background: radial-gradient(ellipse 72% 85% at 36% 48%,
    color-mix(in srgb, var(--white) 96%, transparent) 0%,
    color-mix(in srgb, var(--white) 86%, transparent) 48%,
    color-mix(in srgb, var(--white) 50%, transparent) 74%,
    transparent 100%);
}

/* Photography showcase: square thumbnail previews. WordPress drops
   the image into style="background-image:url('…')" on .spec__thumb;
   without one, a quiet blueprint placeholder pattern shows. */
.spec--media { grid-template-columns: 56px 110px 1fr; }
.spec__thumb {
  width: 56px;
  height: 56px;
  align-self: center;
  border: 1px solid var(--rule);
  background-color: var(--ivory);
  background-image:
    linear-gradient(rgba(var(--crimson-rgb), 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--crimson-rgb), 0.07) 1px, transparent 1px);
  background-size: cover, 14px 14px, 14px 14px;
  background-position: center;
  transition: border-color 0.3s ease;
}
.spec--media:hover .spec__thumb { border-color: var(--crimson); }
@media (max-width: 900px) {
  /* stack date above title beside the thumb — hiding the date was
     information loss, not a layout necessity */
  .spec--media { grid-template-columns: 48px 1fr; gap: 6px 12px; }
  .spec--media .spec__k { grid-column: 2; font-size: 9px; }
  .spec--media .spec__v { grid-column: 2; }
  .spec--media .spec__thumb { grid-row: 1 / span 2; }
  .spec__thumb { width: 48px; height: 48px; }
}

/* Corner registration ticks on card hover */
.post-card { position: relative; }
.post-card__corners i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 0 solid var(--crimson);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
  z-index: 2;
}
.post-card__corners i:nth-child(1) { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; transition-delay: 0s; }
.post-card__corners i:nth-child(2) { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; transition-delay: 0.05s; }
.post-card__corners i:nth-child(3) { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; transition-delay: 0.1s; }
.post-card__corners i:nth-child(4) { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; transition-delay: 0.15s; }
.post-card:hover .post-card__corners i { opacity: 1; transform: scale(1); }

/* ----------------------------------------------------------
   STATION 05 — TRANSMISSION
   ---------------------------------------------------------- */
.st-closing {
  min-height: 130vh;
  display: flex;
  align-items: center;
  padding: 20vh 0 26vh;
}
.st__inner--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.st-closing .st__display { max-width: none; margin-bottom: 48px; }
.st-closing .closing__rss { color: var(--ink); }
.st-closing .closing__rss:hover { background: var(--crimson); color: var(--white); }
.st-closing .closing__meta { color: var(--mute); }

/* ----------------------------------------------------------
   MICROMETER RAIL — fixed right-edge camera-depth gauge
   ---------------------------------------------------------- */
.micrometer {
  position: fixed;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  height: 56vh;
  width: 14px;
  z-index: 40;
  opacity: 0; /* faded in by cinema-text.js */
}
.micrometer__ticks {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--rule) 0, var(--rule) 1px,
    transparent 1px, transparent calc(56vh / 24)
  );
}
.micrometer__filament {
  position: absolute;
  top: 0;
  right: 2px;
  width: 1px;
  height: 100%;
  background: var(--crimson);
  transform-origin: top center;
  transform: scaleY(0);
}
.micrometer__readout {
  position: absolute;
  top: calc(100% + 14px);
  right: -2px;
  writing-mode: vertical-rl;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.micrometer__readout span { color: var(--crimson); }
@media (max-width: 1100px) { .micrometer { display: none; } }

/* (PAGE LOADER CAL line styles moved to main.css — the loader must
   look identical on inner pages, where cinema.css never loads.) */

/* ----------------------------------------------------------
   SPLITTEXT line masks + scramble labels
   ---------------------------------------------------------- */
.ik-line-mask { overflow: hidden; padding: 0.12em 0.08em 0.18em; margin: -0.12em -0.08em -0.18em; }
[data-split] { will-change: transform; }

/* ----------------------------------------------------------
   FOOTER sits above a fully-faded canvas
   ---------------------------------------------------------- */
.footer { position: relative; z-index: 1; }

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .st__cols { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
  .case { min-height: 78vh; }
  .case--right .case__body { align-items: flex-start; text-align: left; }
  /* align-self beats the parent's align-items — without this reset the
     right-case post lists stay pushed right of their left-flipped heading */
  .case--right .case__posts,
  .case--right .allposts__link { align-self: flex-start; }
  .st-travel { height: 50vh; }
  .st-unfold { height: 40vh; }
}
@media (max-width: 480px) {
  .case__name { font-size: clamp(34px, 13vw, 44px); }
}
/* Phones: the leader-line plumbing is decorative clutter at this size
   (the labels themselves remain — they are the nav) */
@media (max-width: 600px) {
  #annotations { display: none; }
}

/* ----------------------------------------------------------
   REDUCED MOTION — master CSS gate; also closes the legacy
   ungated loops from main.css (pulse / skGlow / skBar).
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .status .dot,
  .sk-state,
  .sk-bars span::after,
  .ui,
  .hero-nav__name--typing::after,
  #grain {
    animation: none !important;
  }
  .ui { opacity: 1 !important; transform: none !important; }
  .micrometer { display: none !important; }
  .post-card__corners i { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}