/* =========================================================================
   STUDIO — THE CASCADE. A scrollable rail of pieces falling past a fixed studio
   light. The top section is fixed and carries its own gradient — the shadow
   wall the rail dissolves into as it scrolls up. The piece in the light is the
   selected one; the detail on the right follows it. Three identities only:
     the towers (misty white) · on its own terms (amber) · the below (deep blue).
   Self-contained (scene ported from site.css; no view-transition side effects).
   ========================================================================= */

.cas-root {
  --amber: oklch(0.840 0.098 72);
  --amber-hot: oklch(0.905 0.058 78);
  --rail-cold: oklch(0.360 0.032 229);
  --light-pos: 0.64;                       /* where the studio light sits, 0..1 of viewport */
  --light-reach: 190px;
  --cat-below-c: oklch(0.645 0.075 247);   /* the below — deep blue (tweakable) */
}

/* ---- the scene -------------------------------------------------------- */
.world {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("assets/studio.jpg") center 46% / cover no-repeat;
  opacity: 0.96; filter: contrast(1.04);
}
.grade {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(98deg,
      rgba(4,6,11,0.90) 0%, rgba(4,6,11,0.72) 19%, rgba(4,6,11,0.40) 38%,
      rgba(4,6,11,0.10) 56%, rgba(4,6,11,0.0) 72%),
    radial-gradient(150% 112% at 27% 40%, transparent 47%, rgba(4,6,11,0.52) 100%),
    linear-gradient(to bottom,
      rgba(4,6,11,0.42) 0%, rgba(4,6,11,0.06) 26%, rgba(4,6,11,0.0) 62%, rgba(4,6,11,0.30) 100%);
}
.rail {
  position: fixed; left: clamp(40px, 5vw, 88px); top: 50%; transform: translateY(-50%); z-index: 7;
  display: flex; flex-direction: column; gap: 38px;
}
.rail a {
  position: relative; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-secondary);
  text-decoration: none; transition: color var(--dur-1) var(--ease);
}
.rail a:hover { color: var(--text-primary); }
.rail a[aria-current="page"] { color: var(--accent-text); }
.rail a[aria-current="page"]::before {
  content: ""; position: absolute; left: -22px; top: -0.06em;
  width: 2px; height: 1.25em; background: var(--accent-solid);
}

/* the studio light — a soft fixed wash where the photo's slot lands */
.cas-light {
  position: fixed; left: 0; right: 0; height: 60vh; z-index: 2; pointer-events: none;
  top: calc(var(--light-pos) * 100vh); transform: translateY(-50%);
  background: radial-gradient(60% 50% at 62% 50%, rgba(255,176,96,0.13), rgba(255,176,96,0.04) 52%, rgba(255,176,96,0) 76%);
  mix-blend-mode: screen;
}

/* ---- the fixed top section — its gradient is the shadow wall ----------- */
.cas-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 6; pointer-events: none;
  height: 56vh;
  /* the shadow wall: hold near-solid through the header-text band so the rail
     line and the names dissolve as they rise into it, then release lower down
     where the pieces climb toward the light (so the lit piece is never dimmed) */
  background: linear-gradient(to bottom,
    rgba(4,6,11,0.98) 0%, rgba(4,6,11,0.96) 32%, rgba(4,6,11,0.86) 50%, rgba(4,6,11,0.52) 66%, rgba(4,6,11,0.16) 84%, rgba(4,6,11,0.0) 100%);
}
.cas-head-inner {
  pointer-events: auto; margin-left: clamp(190px, 19vw, 300px); max-width: 470px;
  padding: clamp(92px, 14vh, 140px) 40px 0 0;
}
.cas-h {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(42px, 4.8vw, 56px);
  line-height: 1.06; letter-spacing: -0.01em; color: var(--text-primary);
  margin: 0 0 22px; text-shadow: 0 2px 30px rgba(3,6,11,0.78);
}
.cas-lead-1 {
  font-family: var(--font-mono); font-size: 18px; line-height: 1.6; color: var(--text-primary);
  margin: 0 0 12px; max-width: 34ch; text-shadow: 0 1px 18px rgba(3,6,11,0.9);
}
.cas-lead-2 {
  font-family: var(--font-mono); font-size: 15px; line-height: 1.72; color: var(--text-secondary);
  margin: 0; max-width: 47ch; text-shadow: 0 1px 18px rgba(3,6,11,0.9);
}
.cas-lead-2 .amber { color: var(--accent-text); }

/* ---- the scrolling rail ----------------------------------------------- */
.cas-main { position: relative; z-index: 3; }
.cas-rail { position: relative; margin-top: calc(60vh - 70px); }
.cas-line { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; overflow: visible; }

/* a piece — only the name now. Placed by --x / --y (its point on the rail);
   --lit (0..1) written by the scroll handler is 1 when it is in the light. */
.cas-item {
  position: absolute; width: 300px; height: 50px; padding: 0;
  left: calc(var(--x) * 1px); top: calc(var(--y) * 1px - 25px);
  display: flex; align-items: center; justify-content: flex-start;
  background: transparent; border: 0; cursor: pointer; z-index: 4; text-align: left;
  font-family: inherit;
}
.cas-item .cas-name {
  padding-left: 40px;   /* hold the name clear of the rail line, to its right */
  font-family: var(--font-display); font-weight: 300; font-size: 23px; letter-spacing: -0.01em;
  line-height: 1.1; color: var(--cat-c, var(--text-primary)); white-space: nowrap;
  filter: brightness(calc(0.6 + var(--lit, 0) * 0.72));
  text-shadow:
    0 1px 3px rgba(3,6,11,0.95),
    0 1px 18px rgba(3,6,11,0.92),
    0 0 calc(var(--lit, 0) * 30px) rgba(255,176,96, calc(var(--lit, 0) * 0.78)),
    0 0 calc(var(--lit, 0) * 12px) rgba(255,206,140, calc(var(--lit, 0) * 0.55));
  transition: filter 90ms linear;
}
/* category colours — the three identities */
.cas-item.cat-towers { --cat-c: var(--n-100); }       /* misty white — the towers */
.cas-item.cat-self   { --cat-c: var(--accent-text); }  /* amber — on its own terms */
.cas-item.cat-below  { --cat-c: var(--cat-below-c); }  /* deep blue — the below */

.cas-item:hover .cas-name { filter: brightness(calc(0.84 + var(--lit, 0) * 0.62)); }
/* the piece in the light is the selected one — a quiet underline marks it */
.cas-item.active .cas-name {
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 1px; text-decoration-color: color-mix(in oklch, var(--cat-c) 55%, transparent);
}

/* ---- the detail — follows the piece in the light ---------------------- */
.cas-detail {
  position: fixed; right: clamp(28px, 4vw, 72px); top: 50%; transform: translateY(-50%);
  width: 344px; z-index: 8; background: rgba(7,10,15,0.86);
  border: 1px solid var(--border-default); border-radius: var(--r-2);
  box-shadow: var(--shadow-2); padding: 26px 26px 28px 30px; overflow: hidden;
}
.cas-detail::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--d-strip, var(--border-strong));
  /* the strip catches the room light too — a slight amber shine on every
     identity colour (amber, misty white, deep blue) */
  box-shadow: 0 0 16px 1px rgba(255,176,96,0.5), 0 0 5px rgba(255,176,96,0.4);
}
.cas-detail .d-inner { opacity: 1; }
.cas-detail .d-name {
  font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 1.05;
  letter-spacing: -0.01em; color: var(--d-name-c, var(--text-primary)); margin: 0 0 12px;
}
.cas-detail .d-meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px;
}
.cas-detail .d-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--n-600); }
.cas-detail .d-rule { height: 1px; background: var(--border-subtle); margin: 0 0 18px; }
.cas-detail .d-desc {
  font-family: var(--font-mono); font-size: 15px; line-height: 1.62; color: var(--text-primary);
  margin: 0 0 14px; text-shadow: 0 1px 12px rgba(3,6,11,0.6);
}
.cas-detail .d-more {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.66; color: var(--text-secondary); margin: 0;
}

.cas-foot { height: 30vh; }

/* the typed caret — the one live mark, for the header reveal on studio.html */
.cas-caret {
  display: inline-block; width: 0.16em; height: 1.0em; margin-left: 0.06em;
  vertical-align: -0.16em; background: var(--accent-bright);
  box-shadow: 0 0 14px rgba(255,176,96,0.5), 0 0 3px rgba(255,176,96,0.7);
  animation: cas-blink 1.15s steps(1, end) infinite;
}
@keyframes cas-blink { 0%, 52% { opacity: 1; } 53%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cas-caret { animation: none; opacity: 1; } }

/* =========================================================================
   MOBILE / RESPONSIVE  (<= 860px)
   Desktop pins the detail to a card on the right; on a narrow viewport there is
   no right gutter, so the card re-homes to a panel docked above the nav, still
   following the piece in the light. The nav lies down as a bottom bar, the head
   shrinks and left-aligns, and the whole names rail (its line and its names
   together) shifts to the left edge so nothing overflows. The scroll-through-
   light mechanic is viewport-based and carries over unchanged.
   ========================================================================= */
@media (max-width: 860px) {
  /* the nav rail lies down: a bottom bar, matching the other three surfaces. */
  .rail {
    left: 0; right: 0; top: auto; bottom: 0; transform: none; z-index: 9;
    flex-direction: row; justify-content: space-around; align-items: center;
    gap: 0; padding: 13px 10px calc(13px + env(safe-area-inset-bottom));
    background: linear-gradient(to top,
      rgba(4,6,11,0.95) 0%, rgba(4,6,11,0.88) 52%, rgba(4,6,11,0.0) 100%);
    border-top: 1px solid var(--border-subtle);
  }
  .rail a { font-size: 11px; letter-spacing: 0.16em; padding: 7px 8px; }
  .rail a[aria-current="page"]::before {
    left: 50%; top: -9px; transform: translateX(-50%);
    width: 14px; height: 2px;
  }

  /* the fixed head: shorter, left-anchored, smaller type. */
  .cas-head { height: 42vh; }
  .cas-head-inner {
    margin-left: 0; max-width: 100%;
    padding: clamp(74px, 11vh, 102px) clamp(22px, 6vw, 34px) 0;
  }
  .cas-h { font-size: clamp(38px, 10vw, 48px); }
  .cas-lead-1 { font-size: 16px; max-width: 40ch; }
  .cas-lead-2 { font-size: 14px; max-width: 100%; }

  /* shift the whole rail left (line + names move as one, so they stay aligned):
     the line lands ~32px in, the names just to its right. */
  .cas-rail { transform: translateX(-268px); }
  .cas-item { width: 260px; }
  .cas-item .cas-name { font-size: 22px; }

  /* the detail re-homes: from a right-pinned card to a panel docked above the
     bottom bar, still showing the piece in the light. Transparent to touch so
     the names keep scrolling beneath it. The room light still catches its
     strip. d-more is dropped to keep the docked panel compact. */
  .cas-detail {
    display: block; top: auto; transform: none; width: auto;
    bottom: calc(84px + env(safe-area-inset-bottom));
    left: clamp(22px, 6vw, 34px); right: clamp(22px, 6vw, 34px);
    max-height: 30vh; overflow: hidden; pointer-events: none;
    background: rgba(7,10,15,0.92);
  }
  .cas-detail .d-name { font-size: 27px; }
  .cas-detail .d-desc { font-size: 14px; margin-bottom: 0; }
  .cas-detail .d-more { display: none; }

  /* room at the foot so the last piece can still scroll up into the light. */
  .cas-foot { height: 44vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cas-item .cas-name { transition: none; }
}