.ll-cinema {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #040406;
  --accent: #fc03fb;
  --ll-spectrum: linear-gradient(90deg, #b83cf2 0 9%, #8672fb 9% 18%, #52a7f8 18% 27%, #18ddec 27% 36%, #36e66d 36% 45%, #f7df3f 45% 55%, #ffa34e 55% 64%, #ff6f72 64% 73%, #ff3ba8 73% 86%, #f603f5 86% 100%);
  --picker-progress: 0;
  --picker-left: -108%;
  --picker-right: 108%;
  --picker-middle-scale: .74;
  --picker-reveal: 48%;
  --picker-copy: 0;
  font-family: var(--font-body, "Chakra Petch", system-ui, sans-serif);
}

html.ll-sequence-gated,
body.ll-sequence-gated {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.ll-cinema::after {
  content: "";
  position: absolute;
  z-index: 12;
  top: 0;
  bottom: 0;
  left: -18%;
  width: 12%;
  pointer-events: none;
  opacity: 0;
  transform: skewX(-9deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, white), transparent);
  filter: blur(22px);
}

.ll-cinema.ll-changing::after {
  animation: ll-prism-wipe 0.76s cubic-bezier(0.7, 0, 0.2, 1);
}

@keyframes ll-prism-wipe {
  0% { left: -18%; opacity: 0; }
  18% { opacity: 0.72; }
  100% { left: 112%; opacity: 0; }
}

.ll-cinema *,
.ll-cinema *::before,
.ll-cinema *::after {
  box-sizing: border-box;
}

#ll-seq-canvas,
.ll-seq-fallback,
.ll-atmosphere,
.ll-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#ll-seq-canvas {
  z-index: 1;
  display: block;
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.ll-cinema.ll-has-frame #ll-seq-canvas {
  opacity: 1;
}

.ll-seq-fallback {
  z-index: 0;
  background: center / cover no-repeat;
  opacity: 0;
  filter: saturate(0.88) contrast(1.05);
  transition: opacity 0.9s ease;
}

.ll-cinema:not(.ll-has-frame)[data-scene="design"] .ll-seq-fallback {
  opacity: 0.9;
  background-image: url("frames/design/frame_0001.jpg");
}

.ll-cinema:not(.ll-has-frame)[data-scene="programming"] .ll-seq-fallback {
  opacity: 0.88;
  background-image: url("frames/programming/frame_0001.jpg");
}

.ll-cinema:not(.ll-has-frame)[data-scene="laser"] .ll-seq-fallback {
  opacity: 0.92;
  background-image: url("frames/laser/frame_0001.jpg");
}

.ll-atmosphere {
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(62% 70% at 74% 52%, transparent 30%, rgba(4, 4, 6, 0.33) 70%, rgba(4, 4, 6, 0.88) 100%),
    linear-gradient(to bottom, rgba(4, 4, 6, 0.68), transparent 23%, transparent 70%, rgba(4, 4, 6, 0.9));
}

.ll-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(34% 46% at 22% 48%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    radial-gradient(40% 28% at 68% 105%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%);
  filter: blur(22px);
  transition: background 1.2s ease;
}

.ll-grain {
  z-index: 10;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.ll-intro {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #020204;
  transition: opacity .72s cubic-bezier(0.5, 0, 0.3, 1), transform .9s cubic-bezier(0.5, 0, 0.3, 1);
}

.ll-intro-film {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: contrast(1.1) saturate(1.06) brightness(.88);
  transform: scale(1.018);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0 37%,
    rgba(0,0,0,.18) 41%,
    #000 47% 53%,
    rgba(0,0,0,.18) 59%,
    transparent 63% 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0 37%,
    rgba(0,0,0,.18) 41%,
    #000 47% 53%,
    rgba(0,0,0,.18) 59%,
    transparent 63% 100%
  );
  transition: opacity .22s ease;
}

.ll-cinema.ll-sequence-ready .ll-intro-film {
  opacity: .9;
}

.ll-intro::before,
.ll-intro::after {
  content: "";
  position: absolute;
  inset: -18%;
  pointer-events: none;
}

.ll-intro::before {
  z-index: 1;
  opacity: 0.32;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.14), transparent 10%),
    radial-gradient(60% 38% at 50% 103%, rgba(120,136,155,.12), transparent 74%);
  filter: blur(52px);
  mix-blend-mode: screen;
  animation: ll-spectrum-breathe 3s ease-in-out both;
}

.ll-intro::after {
  z-index: 1;
  opacity: 0.2;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(24,221,236,.8) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(246,3,245,.65) 0 1px, transparent 1.4px);
  background-size: 109px 97px, 151px 137px, 211px 179px;
  background-position: 0 0, 43px 28px, 86px 51px;
  mask-image: radial-gradient(ellipse at center, black 0, transparent 66%);
  animation: ll-spectrum-dust 3s cubic-bezier(.2,.8,.2,1) both;
}

.ll-cinema:not([data-scene="intro"]) .ll-intro {
  opacity: 0;
  transform: scale(1.055);
  pointer-events: none;
}

.ll-spectrum-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform-style: preserve-3d;
}

.ll-spectrum-stage::before,
.ll-spectrum-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ll-spectrum-stage::before {
  inset: 24% -12% -18%;
  opacity: 0;
  background:
    radial-gradient(ellipse at 48% 74%, rgba(220,232,238,.16), transparent 46%),
    radial-gradient(ellipse at 34% 80%, rgba(24,221,236,.12), transparent 38%),
    radial-gradient(ellipse at 65% 76%, rgba(246,3,245,.1), transparent 42%);
  filter: blur(34px);
  mix-blend-mode: screen;
  animation: ll-real-haze 2.7s ease-out .12s both;
}

.ll-spectrum-stage::after {
  z-index: 5;
  left: 50%;
  top: 50%;
  width: min(64vw, 920px);
  height: 2px;
  opacity: 0;
  transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, rgba(24,221,236,.45), #fff 45% 55%, rgba(246,3,245,.42), transparent);
  box-shadow: 0 0 10px #fff, 0 0 34px rgba(255,255,255,.72), 0 0 70px rgba(24,221,236,.28);
  animation: ll-anamorphic-flare 1.25s cubic-bezier(.16,1,.3,1) .55s both;
}

.ll-spectrum-halo,
.ll-spectrum-focus {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.ll-spectrum-halo {
  width: min(88vw, 980px);
  aspect-ratio: 1;
  opacity: 0;
  border: 1px solid rgba(255,255,255,.1);
  background: conic-gradient(from 40deg, transparent, rgba(184,60,242,.12), transparent 18%, rgba(24,221,236,.12), transparent 42%, rgba(247,223,63,.1), transparent 68%, rgba(246,3,245,.11), transparent);
  filter: blur(8px);
  animation: ll-halo-collapse 1.9s cubic-bezier(.16,1,.3,1) .08s both;
}

.ll-spectrum-focus {
  z-index: 3;
  width: 8px;
  height: 8px;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 12px #fff, 0 0 42px #fff, 0 0 92px #18ddec, 0 0 150px #f603f5;
  animation: ll-focus-flash 1.45s cubic-bezier(.16,1,.3,1) .38s both;
}

.ll-beam-core,
.ll-beam-bloom {
  position: absolute;
  left: 50%;
  top: -8vh;
  bottom: -8vh;
  transform: translateX(-50%);
  clip-path: inset(50% 0 50%);
  z-index: 4;
  background: linear-gradient(180deg, #18ddec, #fff 38% 62%, #f603f5);
}

.ll-beam-core {
  width: 2px;
  box-shadow: 0 0 9px rgba(255,255,255,.9), 0 0 26px rgba(24,221,236,.32);
  animation: ll-beam-strike 1.65s cubic-bezier(0.16, 1, 0.3, 1) .72s forwards;
}

.ll-beam-bloom {
  width: 38px;
  opacity: 0;
  filter: blur(20px);
  animation: ll-beam-bloom 1.65s cubic-bezier(0.16, 1, 0.3, 1) .72s forwards;
}

@keyframes ll-beam-strike {
  0% { clip-path: inset(50% 0 50%); opacity: 0; transform: translateX(-50%) scaleX(3.6); }
  8% { opacity: 1; }
  38% { clip-path: inset(0); transform: translateX(-50%) scaleX(3.6); }
  62% { transform: translateX(-50%) scaleX(1); }
  100% { clip-path: inset(0); opacity: .34; transform: translateX(-50%) scaleX(1); }
}

@keyframes ll-beam-bloom {
  0% { clip-path: inset(50% 0 50%); opacity: 0; }
  10% { opacity: 0.7; }
  38% { clip-path: inset(0); }
  70% { opacity: 0.38; }
  100% { clip-path: inset(0); opacity: .12; transform: translateX(-50%) scaleX(.62); }
}

.ll-intro h1 {
  position: absolute;
  left: clamp(24px, 7vw, 112px);
  top: 50%;
  max-width: 82vw;
  margin: 0;
  color: #f5f5f7;
  z-index: 6;
  font: 400 clamp(38px, 7.1vw, 112px) / 0.98 var(--font-display, "Michroma"), system-ui, sans-serif;
  letter-spacing: -0.035em;
  opacity: 0;
  filter: blur(19px);
  transform: translateY(calc(-50% + 24px)) scale(1.04);
  animation: ll-focus-in .66s cubic-bezier(0.16, 1, 0.3, 1) .72s forwards;
}

.ll-intro h1 span {
  display: inline-block;
  text-shadow:
    -8px 0 28px rgba(24,221,236,.18),
    8px 0 28px rgba(246,3,245,.16);
}

.ll-intro h1 em {
  display: inline-block;
  font-style: normal;
  background: var(--ll-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: saturate(1.22) drop-shadow(0 0 25px rgba(255,255,255,.1));
  background-size: 132% 100%;
  animation: ll-word-spectrum 1.18s ease-in-out .76s both;
}

.ll-intro h1 b {
  font-weight: 400;
  color: #f603f5;
  text-shadow: 0 0 26px rgba(246,3,245,.55);
}

.ll-intro-logo {
  position: absolute;
  z-index: 6;
  left: clamp(24px, 7vw, 112px);
  top: calc(50% + clamp(62px, 8vw, 118px));
  width: clamp(118px, 13vw, 220px);
  height: auto;
  opacity: 0;
  filter: blur(7px) brightness(1.06);
  transform: translateY(10px);
  animation: ll-logo-resolve .58s cubic-bezier(.16,1,.3,1) 1.12s forwards;
}

@keyframes ll-focus-in {
  to { opacity: 1; filter: blur(0); transform: translateY(-50%) scale(1); }
}

@keyframes ll-logo-resolve {
  to { opacity: .88; filter: blur(0) brightness(1); transform: none; }
}

@keyframes ll-focus-flash {
  0%, 38% { opacity: 0; transform: translate(-50%,-50%) scale(.2); }
  52% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  72% { opacity: .78; transform: translate(-50%,-50%) scale(3.2); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(10); }
}

@keyframes ll-halo-collapse {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(1.35) rotate(-18deg); }
  25% { opacity: .62; }
  78% { opacity: .32; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.08) rotate(44deg); }
}

@keyframes ll-spectrum-breathe {
  0% { opacity: 0; transform: scale(1.22); }
  46% { opacity: .46; }
  100% { opacity: .18; transform: scale(.96); }
}

@keyframes ll-spectrum-dust {
  0% { opacity: 0; transform: translate3d(0,5%,0) scale(1.1); }
  42% { opacity: .22; }
  100% { opacity: .07; transform: translate3d(0,-4%,0) scale(1); }
}

@keyframes ll-word-spectrum {
  0% { background-position: 100% 0; filter: saturate(1.8) blur(3px) drop-shadow(0 0 36px rgba(255,255,255,.35)); }
  100% { background-position: 0 0; filter: saturate(1.18) blur(0) drop-shadow(0 0 16px rgba(255,255,255,.08)); }
}

@keyframes ll-real-haze {
  0% { opacity: 0; transform: translate3d(-2%,10%,0) scale(1.12); }
  38% { opacity: .8; }
  100% { opacity: .26; transform: translate3d(2%,-2%,0) scale(1); }
}

@keyframes ll-anamorphic-flare {
  0%, 24% { opacity: 0; transform: translate(-50%,-50%) scaleX(.08); }
  48% { opacity: 1; transform: translate(-50%,-50%) scaleX(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scaleX(1.34); }
}

.ll-cinema:not(.ll-sequence-ready) .ll-intro::before,
.ll-cinema:not(.ll-sequence-ready) .ll-intro::after,
.ll-cinema:not(.ll-sequence-ready) .ll-spectrum-stage::before,
.ll-cinema:not(.ll-sequence-ready) .ll-spectrum-stage::after,
.ll-cinema:not(.ll-sequence-ready) .ll-spectrum-halo,
.ll-cinema:not(.ll-sequence-ready) .ll-spectrum-focus,
.ll-cinema:not(.ll-sequence-ready) .ll-beam-core,
.ll-cinema:not(.ll-sequence-ready) .ll-beam-bloom,
.ll-cinema:not(.ll-sequence-ready) .ll-intro h1,
.ll-cinema:not(.ll-sequence-ready) .ll-intro h1 em,
.ll-cinema:not(.ll-sequence-ready) .ll-intro-logo,
.ll-cinema:not(.ll-sequence-ready) .ll-intro-meta {
  animation-play-state: paused !important;
}

.ll-intro-meta,
.ll-progress,
.ll-scroll {
  font: 400 9px / 1.8 var(--font-tc, "Martian Mono"), monospace;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 244, 247, 0.43);
}

.ll-intro-meta {
  position: absolute;
  opacity: 0;
  animation: ll-meta-in .5s ease 1.04s forwards;
}

.ll-intro-meta--top {
  top: clamp(84px, 13vh, 136px);
  right: clamp(24px, 5vw, 72px);
  text-align: right;
}

.ll-intro-meta--bottom {
  left: clamp(24px, 7vw, 112px);
  bottom: clamp(38px, 8vh, 78px);
}

@keyframes ll-meta-in { to { opacity: 1; } }

.ll-scenes {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.ll-scene {
  position: absolute;
  left: clamp(24px, 7vw, 112px);
  top: clamp(190px, 29vh, 310px);
  width: min(560px, 62vw);
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.ll-cinema[data-scene="design"] .ll-scene[data-service="0"],
.ll-cinema[data-scene="programming"] .ll-scene[data-service="1"],
.ll-cinema[data-scene="laser"] .ll-scene[data-service="2"] {
  opacity: 1;
  transform: none;
}

.ll-scene p {
  margin: 0 0 20px;
  color: var(--service-color);
  font: 400 9px/1 var(--font-tc, "Martian Mono"), monospace;
  letter-spacing: 0.33em;
  text-transform: uppercase;
}

.ll-scene h2 {
  margin: 0;
  color: #f5f5f7;
  font: 400 clamp(42px, 6.4vw, 100px) / 1.02 var(--font-display, "Michroma"), system-ui, sans-serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
  filter: blur(18px);
  transform: translateY(24px) scale(1.03);
  transition: filter 1.05s cubic-bezier(0.16, 1, 0.3, 1), transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

.ll-cinema[data-scene="design"] .ll-scene[data-service="0"] h2,
.ll-cinema[data-scene="programming"] .ll-scene[data-service="1"] h2,
.ll-cinema[data-scene="laser"] .ll-scene[data-service="2"] h2 {
  filter: blur(0);
  transform: none;
}

.ll-scene > span {
  display: block;
  max-width: 39ch;
  margin-top: 24px;
  color: rgba(244, 244, 247, 0.58);
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 300;
  font-family: var(--font-body, "Chakra Petch"), system-ui, sans-serif;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s ease 0.4s, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}

.ll-cinema[data-scene="design"] .ll-scene[data-service="0"] > span,
.ll-cinema[data-scene="programming"] .ll-scene[data-service="1"] > span,
.ll-cinema[data-scene="laser"] .ll-scene[data-service="2"] > span {
  opacity: 1;
  transform: none;
}

.ll-brand-resolve {
  position: absolute;
  z-index: 8;
  top: clamp(74px, 10vh, 112px);
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -14px) scale(.92);
  filter: blur(12px);
  transition:
    opacity .88s ease,
    transform 1.18s cubic-bezier(.16,1,.3,1),
    filter .92s cubic-bezier(.16,1,.3,1);
}

.ll-cinema[data-scene="picker"] .ll-brand-resolve {
  opacity: .92;
  transform: translate(-50%, 0) scale(1);
  filter: blur(0);
}

.ll-brand-resolve > img {
  display: block;
  width: clamp(150px, 14vw, 224px);
  height: auto;
  filter: drop-shadow(0 0 28px rgba(0,0,0,.8));
}

.ll-picker {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.015);
  transition: opacity 1s ease, transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.ll-cinema[data-scene="picker"] .ll-picker {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ll-cinema[data-scene="picker"] #ll-seq-canvas,
.ll-cinema[data-scene="picker"] .ll-seq-fallback {
  opacity: 0;
}

.ll-picker-head {
  position: absolute;
  z-index: 4;
  top: clamp(152px, 21vh, 210px);
  left: clamp(28px, 4vw, 64px);
  right: clamp(28px, 4vw, 64px);
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 0;
  pointer-events: none;
  opacity: var(--picker-copy);
  transform: translateY(calc((1 - var(--picker-copy)) * 18px));
  transition: opacity .2s linear, transform .2s linear;
}

.ll-picker-head span {
  color: rgba(244, 244, 247, 0.42);
  font: 400 9px/1 var(--font-tc, "Martian Mono"), monospace;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.ll-picker-head strong {
  font-family: var(--font-display, "Michroma"), system-ui, sans-serif;
  font-size: clamp(26px, 3.4vw, 54px);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.ll-picker-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 0;
  perspective: 1200px;
}

.ll-picker-card {
  position: relative;
  min-height: 100%;
  padding: clamp(240px, 36vh, 350px) clamp(24px, 3vw, 48px) clamp(64px, 9vh, 94px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: #060609;
  transform-origin: 50% 50%;
  will-change: transform, clip-path;
  transition: filter 0.5s ease, border-color .5s ease;
}

.ll-picker-card:last-child { border-right: 0; }

.ll-picker-card:nth-child(1) { transform: translate3d(var(--picker-left), 0, 0); }
.ll-picker-card:nth-child(2) {
  transform: scaleX(var(--picker-middle-scale));
  clip-path: inset(0 var(--picker-reveal) 0 var(--picker-reveal));
}
.ll-picker-card:nth-child(3) { transform: translate3d(var(--picker-right), 0, 0); }

.ll-picker-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  background: center / cover no-repeat;
  filter: saturate(.72) contrast(1.08);
  transform: scale(1.05);
  transition: filter .65s ease, transform 1s cubic-bezier(.16,1,.3,1);
}

.ll-picker-card[data-picker="0"]::before {
  background-image:
    linear-gradient(180deg, rgba(3,3,6,.12), rgba(3,3,6,.36) 50%, rgba(3,3,6,.92) 100%),
    url("anchors/moving-head-picker-v2.webp");
  background-position: 58% center;
}

.ll-picker-card[data-picker="1"]::before {
  background-image:
    linear-gradient(180deg, rgba(3,3,6,.14), rgba(3,3,6,.4) 52%, rgba(3,3,6,.94) 100%),
    url("anchors/console-picker-v2.webp");
  background-position: 55% center;
}

.ll-picker-card[data-picker="2"]::before {
  background-image:
    linear-gradient(180deg, rgba(3,3,6,.1), rgba(3,3,6,.34) 50%, rgba(3,3,6,.9) 100%),
    url("anchors/laser-picker-v3.webp");
  background-position: 54% center;
}

.ll-picker-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--service-color);
  box-shadow: 0 0 20px var(--service-color);
  transition: right 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.ll-picker-card:hover {
  border-color: color-mix(in srgb, var(--service-color) 38%, rgba(255,255,255,.12));
}

.ll-picker-card:hover::before { filter: saturate(1) contrast(1.03); transform: scale(1.01); }
.ll-picker-card:hover::after { right: 0; }

.ll-picker-card > * {
  position: relative;
  z-index: 2;
  opacity: var(--picker-copy);
  transform: translateY(calc((1 - var(--picker-copy)) * 14px));
}

.ll-picker-card > span {
  color: var(--service-color);
  font: 400 8px/1 var(--font-tc, "Martian Mono"), monospace;
  letter-spacing: 0.29em;
  text-transform: uppercase;
}

.ll-picker-card h3 {
  margin: clamp(34px, 7vh, 70px) 0 14px;
  min-height: 2.16em;
  display: flex;
  align-items: flex-end;
  font: 400 clamp(23px, 2.6vw, 42px) / 1.08 var(--font-display, "Michroma"), system-ui, sans-serif;
  letter-spacing: -0.03em;
}

.ll-picker-card p {
  max-width: 33ch;
  min-height: 4.65em;
  margin: 0;
  color: rgba(244, 244, 247, 0.48);
  font-size: clamp(11px, 1vw, 14px);
  font-family: var(--font-body, "Chakra Petch"), system-ui, sans-serif;
  line-height: 1.55;
}

.ll-picker-card i {
  position: absolute;
  right: 28px;
  bottom: 24px;
  color: rgba(244, 244, 247, 0.4);
  font: normal 400 8px/1 var(--font-tc, "Martian Mono"), monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 0.3s ease, transform 0.3s ease;
}

.ll-picker-card:hover i {
  color: white;
  transform: translateX(4px);
}

.ll-progress {
  position: absolute;
  right: clamp(16px, 2vw, 30px);
  top: clamp(96px, 13vh, 132px);
  z-index: 9;
  display: grid;
  grid-template-columns: 1px auto;
  gap: 10px;
  align-items: start;
  height: 108px;
  transform: none;
}

.ll-progress > span {
  grid-row: 1 / span 2;
  width: 1px;
  height: 100%;
  background: rgba(255, 255, 255, 0.13);
}

.ll-progress > i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: calc(var(--ll-progress, 0) * 100%);
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  transition: height 0.18s linear, background 0.8s ease;
}

.ll-progress small {
  writing-mode: vertical-rl;
  opacity: 0.55;
}

.ll-scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity 0.8s ease 0.3s;
}

.ll-cinema[data-scene="picker"] .ll-scroll { opacity: 1; }

.ll-scroll i {
  width: 1px;
  height: 28px;
  background: linear-gradient(white, transparent);
  animation: ll-scroll-line 2.2s ease-in-out infinite;
}

@keyframes ll-scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.stats-grid .num {
  display: inline-block;
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
  transform-origin: 0 100%;
}

.stats-grid .num.ll-counting {
  color: #fff;
  text-shadow: 0 0 18px rgba(24,221,236,.28), 0 0 42px rgba(246,3,245,.14);
  animation: ll-dial-pulse .22s steps(2, end) infinite;
}

.stats-grid .num.ll-counted {
  animation: ll-dial-settle .72s cubic-bezier(.16,1,.3,1) both;
}

@keyframes ll-dial-pulse {
  0% { opacity: .68; filter: blur(.35px); }
  100% { opacity: 1; filter: blur(0); }
}

@keyframes ll-dial-settle {
  0% { transform: translateY(11px); filter: blur(4px); }
  100% { transform: none; filter: blur(0); }
}

@media (max-width: 800px) {
  .ll-scene {
    top: auto;
    left: 24px;
    right: 24px;
    bottom: 13vh;
    width: auto;
    transform: translateY(18px);
    display:block;
  }

  .ll-cinema[data-scene="design"] .ll-scene[data-service="0"],
  .ll-cinema[data-scene="programming"] .ll-scene[data-service="1"],
  .ll-cinema[data-scene="laser"] .ll-scene[data-service="2"] {
    transform: none;
  }

  .ll-picker-head {
    top: 104px;
    left: 22px;
    right: 22px;
    align-items: center;
  }
  .ll-picker-head strong { font-size: clamp(20px, 7vw, 32px); }
  .ll-picker-grid {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    padding-top: 0;
    background: #040406;
  }
  .ll-picker-card {
    min-height: 0;
    padding: 26px 24px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .ll-picker-card h3 { min-height: 0; margin: 16px 0 8px; }
  .ll-picker-card p { display: none; }
  .ll-progress { display: none; }
  .ll-brand-resolve { top: 70px; }
  .ll-brand-resolve > img { width: 132px; }
  .ll-intro h1 { max-width: calc(100vw - 48px); }
  .ll-intro-logo { top: calc(50% + 86px); width: 132px; }
  .ll-intro-meta--top { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ll-beam-core,
  .ll-beam-bloom,
  .ll-spectrum-halo,
  .ll-spectrum-focus,
  .ll-scroll i { animation: none !important; }
  .ll-intro h1,
  .ll-intro-logo,
  .ll-intro-meta { animation-delay: 0s; animation-duration: 0.01s; }
}