/* Hyperion 16 (/lab/hyperion-16): additions to lab-geber.css, which it shares. */

/* "hyperion" is a long word, so its wordmark is smaller than "geber". */
.lab-hero__title--long { font-size: clamp(3.6rem, 0.4rem + 13.5vw, 12.5rem); }
.lab-coda__name--long { font-size: clamp(2.8rem, 0.6rem + 7vw, 6.5rem); }

/* Bending: three glowing lines instead of three beams. --t on each is its draw progress. */
.lab-bends__figure { width: min(100% - 2 * var(--gutter), 1000px); }
@media (prefers-reduced-motion: no-preference) { .js .lab-bends__figure { width: min(100% - 2 * var(--gutter), 1000px, (var(--lab-stage) - 330px) * 900 / 340); } }
.lab-bend__halo, .lab-bend__line {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100px 200px; stroke-dashoffset: calc((1 - var(--t, 1)) * 100px);
}
.lab-bend__halo { stroke: #f2c674; stroke-width: 22; opacity: 0.45; filter: url(#lab-bend-blur); }
.lab-bend__line { stroke: #fff4df; stroke-width: 9; }
.lab-bend__label { fill: var(--lab-ink); font-family: var(--font); font-size: 30px; letter-spacing: -0.01em; opacity: clamp(0, calc(var(--t, 1) * 4 - 3), 1); }

/* Statement: a neon line drawn under the words, in the bending diagrams' glow. --d is its draw
   progress; it stays fully drawn without motion. */
.lab-statement__text { position: relative; padding-bottom: 0.6em; }
.lab-statement__draw { position: absolute; left: 0; bottom: 0; width: 100%; height: 0.6em; overflow: visible; pointer-events: none; }
.lab-statement__draw path { fill: none; stroke-linecap: round; stroke-dasharray: 100px 200px; stroke-dashoffset: calc((1 - var(--d, 1)) * 100px); }
.lab-statement__halo { stroke: #f2c674; stroke-width: 14; opacity: 0.45; filter: url(#lab-draw-blur); }
.lab-statement__neon { stroke: #fff4df; stroke-width: 4; }
@media (prefers-reduced-motion: no-preference) { .js .lab-statement__draw { --d: clamp(0, calc((var(--p, 1) - 0.1) / 0.72), 1); } }

/* Colour: the finish layout, kept dark, with a swatch per colour option. */
.lab-finish--dark { background: var(--lab-bg); color: var(--lab-ink); }
.lab-finish--dark .lab-eyebrow, .lab-finish--dark .lab-copy { color: var(--lab-dim); }
.lab-swatches--colour { flex-wrap: wrap; gap: 16px 26px; }
.lab-finish--dark .lab-swatch { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); }
.lab-swatch--tunable { background: linear-gradient(90deg, #dce8f8, #fff6e6, #f6c983); }
.lab-swatch--k2700 { background: #f6c983; }
.lab-swatch--k3000 { background: #f9d9a4; }
.lab-swatch--k4000 { background: #fbefd9; }
.lab-swatch--rgbw { background: conic-gradient(#ff3d6e, #ffb02e, #3ddc84, #3d8bff, #b04dff, #ff3d6e); }
.lab-swatch--rgbtw { background: radial-gradient(circle, #fff6e6 0 32%, transparent 34%), conic-gradient(#ff3d6e, #ffb02e, #3ddc84, #3d8bff, #b04dff, #ff3d6e); }

/* Three family cards instead of four. */
@media (min-width: 900px) { .lab-trio__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; } }

/* Chapter text sits over bright neon in several shots; a soft shadow keeps it legible. */
.lab--hyperion .lab-ip__text { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 28px rgba(0, 0, 0, 0.75); }

/* A line not yet drawn would show its round cap as a dot, so it stays hidden until it starts. */
.lab-bend__halo, .lab-bend__line { opacity: clamp(0, calc(var(--t, 1) * 30), 1); }
.lab-bend__halo { opacity: clamp(0, calc(var(--t, 1) * 30), 0.45); }

/* Pale photos (the office, the boutique): a deeper scrim behind the words. */
@media (prefers-reduced-motion: no-preference) {
  .js .lab-chapter--bright .lab-pin__stage::after { background: linear-gradient(160deg, rgba(5, 5, 6, 0.9), rgba(5, 5, 6, 0.6) 34%, rgba(5, 5, 6, 0) 64%); }
  .js .lab-chapter--bright.lab-chapter--right .lab-pin__stage::after { background: linear-gradient(200deg, rgba(5, 5, 6, 0.9), rgba(5, 5, 6, 0.6) 34%, rgba(5, 5, 6, 0) 64%); }
}