.lights-intro {
  --torch-x: 48vw;
  --torch-y: 46vh;
  position: fixed;
  inset: 0;
  z-index: 1000;
  color: #fff9e9;
  font-family: Arial, Helvetica, sans-serif;
  isolation: isolate;
  transition: opacity 850ms ease;
}
.lights-intro::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle 230px at var(--torch-x) var(--torch-y),
    rgba(3, 7, 12, .12) 0%, rgba(3, 7, 12, .38) 30%, rgba(3, 7, 12, .91) 68%, rgba(3, 7, 12, .982) 100%);
}
.lights-intro::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle 230px at var(--torch-x) var(--torch-y), rgba(255, 217, 135, .12), transparent 72%);
}
.lights-intro.is-lit { opacity: 0; pointer-events: none; }
body.lights-off { overflow: hidden; }
.intro-note {
  position: absolute;
  z-index: 3;
  left: clamp(24px, 6vw, 96px);
  bottom: clamp(90px, 13vh, 150px);
  max-width: 440px;
  pointer-events: none;
}
.intro-kicker { font-size: 10px; letter-spacing: .32em; color: #e7ba68; font-weight: 700; }
.intro-note h2 { font-size: clamp(34px, 5vw, 66px); letter-spacing: -.055em; line-height: 1.04; margin: 20px 0 18px; font-weight: 500; }
.intro-note p { color: #a8adb5; font-size: 14px; line-height: 1.7; margin: 0; max-width: 310px; }
.intro-bottom { position: absolute; bottom: 24px; left: clamp(24px, 6vw, 96px); right: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.intro-bottom span { color: #78818e; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.intro-skip { border: 1px solid #46505d; border-radius: 999px; padding: 11px 18px; background: #111822; color: #e6e9ef; font: inherit; font-size: 12px; cursor: pointer; }
.intro-skip:hover, .intro-skip:focus-visible { border-color: #e7ba68; color: #ffda92; }
.pull-switch {
  position: absolute;
  z-index: 1;
  top: 0;
  right: clamp(40px, 17vw, 320px);
  width: 76px;
  height: clamp(230px, 37vh, 370px);
  border: 0;
  padding: 0;
  background: transparent;
  color: #ffe3a4;
  touch-action: none;
  cursor: grab;
  --pull: 0px;
}
.switch-mount { position: absolute; top: -10px; left: 9px; width: 58px; height: 36px; border-radius: 50% 50% 38% 38%; background: linear-gradient(90deg,#888d90,#e4e5df 45%,#a7aaa6); border-bottom: 5px solid #727874; box-shadow: 0 5px 12px #0008; }
.switch-cord { position: absolute; top: 24px; bottom: calc(51px - var(--pull)); left: 36px; width: 3px; border-radius: 2px; background: repeating-linear-gradient(35deg,#b8b7a9 0 2px,#ede8d8 2px 4px); box-shadow: 1px 0 2px #0008; }
.switch-handle { position: absolute; bottom: calc(0px - var(--pull)); left: 27px; width: 22px; height: 55px; border-radius: 7px 7px 11px 11px; background: linear-gradient(90deg,#90938e,#f3f0e5 42%,#d5d4c8 68%,#8a8d86); border: 1px solid #b8bab0; box-shadow: 2px 5px 10px #0008, inset 0 -4px 4px #73776c55; }
.switch-handle::before { content: ''; position: absolute; width: 7px; height: 5px; left: 6px; top: -4px; border-radius: 50%; background: #e7e3d3; }
.switch-handle::after { content: ''; position: absolute; top: 15px; left: 4px; right: 4px; height: 1px; background: #777d7055; box-shadow: 0 4px #777d7055, 0 8px #777d7055, 0 12px #777d7055; }
.switch-label { position: absolute; top: calc(100% + 27px + var(--pull)); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9px; letter-spacing: .24em; opacity: 0; }
.pull-switch:hover .switch-label, .pull-switch:focus-visible .switch-label { opacity: .8; }
.pull-switch:focus-visible { outline: 1px dashed #f5c76f; outline-offset: 8px; }
.ceiling-bulb { position: absolute; z-index: 1; top: 0; right: calc(clamp(40px, 17vw, 320px) + 100px); width: 72px; height: 190px; pointer-events: none; }
.bulb-rose { position: absolute; top: -8px; left: 8px; width: 56px; height: 28px; border-radius: 50%; background: linear-gradient(90deg,#747a78,#dadbd3,#828782); border-bottom: 4px solid #616762; }
.bulb-wire { position: absolute; top: 19px; left: 34px; width: 4px; height: 66px; background: linear-gradient(90deg,#303531,#777b70,#373d35); }
.bulb-socket { position: absolute; top: 81px; left: 23px; width: 26px; height: 32px; border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg,#6b7068,#c1c2b3,#686d62); }
.bulb-glass { position: absolute; top: 108px; left: 9px; width: 54px; height: 68px; border-radius: 16px 16px 48% 48%; background: radial-gradient(ellipse at 30% 32%,#e7e7d42b,transparent 45%), linear-gradient(110deg,#9caca019,#d9debe26,#7f92881a); border: 1px solid #c1c9b18c; box-shadow: inset 3px 0 5px #e6ead323; }
.bulb-glass::before { content: ''; position: absolute; left: 17px; top: 6px; width: 18px; height: 30px; border-left: 1px solid #8c9580; border-right: 1px solid #8c9580; transform: perspective(40px) rotateX(-20deg); }
.bulb-glass::after { content: ''; position: absolute; left: 17px; top: 35px; width: 18px; height: 9px; border: 1px solid #938a65; border-top: 0; border-radius: 0 0 50% 50%; }
.is-lit .bulb-glass { background: #fff3c2; border-color: #fff9dc; box-shadow: 0 0 45px 20px #ffe3a0bb, 0 0 140px 70px #ffda7844; }
.intro-bottom { z-index: 3; }
.torch-hand { z-index: 3; }
.torch-hand { position: absolute; left: var(--torch-x); top: var(--torch-y); width: 78px; height: 94px; transform: translate(16px, 24px) rotate(-28deg); transform-origin: top left; pointer-events: none; filter: drop-shadow(0 10px 10px #0009); }
.torch-hand svg { width: 100%; height: 100%; }
.torch-aim {
  position: absolute;
  z-index: 5;
  left: var(--torch-x);
  top: var(--torch-y);
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid #fff3cacc;
  border-radius: 50%;
  background: #09111b55;
  box-shadow: 0 0 0 1px #0009, 0 0 12px #ffdc8b44;
  pointer-events: none;
}
.torch-aim span { position: absolute; width: 4px; height: 4px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: #fff9e6; box-shadow: 0 0 3px #000; }
.lights-intro:has(button:hover) .torch-aim { border-color: #ffce6d; background: #f5b82e33; box-shadow: 0 0 0 2px #0009, 0 0 16px #ffce6d77; }
.lights-intro:has(button:active) .torch-aim { transform: translate(-50%, -50%) scale(.8); }
@media (pointer: fine) { .lights-intro, .lights-intro button { cursor: none; } }
@media (pointer: coarse) { .torch-hand, .torch-aim { display: none; } }
@media (max-width: 600px) {
  .intro-note { bottom: 125px; max-width: 280px; }
  .intro-bottom span { max-width: 140px; line-height: 1.7; }
  .pull-switch { right: 48px; height: 30vh; min-height: 180px; }
  .ceiling-bulb { right: 140px; transform: scale(.85); transform-origin: top center; }
  .torch-hand { width: 68px; height: 82px; }
}
@media (prefers-reduced-motion: reduce) { .lights-intro { transition: none; } }