:root{
  color-scheme:dark;
  --bg:#05070a; --steel:#1a1f26; --steel-hi:#2b323b; --text:#eef3f7; --muted:#8e99a5;
  --panel:rgba(12,15,19,.92); --line:rgba(255,255,255,.09); --accent:#ffd08a;
  --label:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Barlow","Segoe UI",system-ui,-apple-system,sans-serif;
  --hx:50%; --hy:50%; --lamp:#fff; --haze-rgb:175,205,240;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--body)}
body{overflow:hidden}
button,input{font:inherit;color:inherit}

/* ================= HERO ================= */
.hero{position:relative;width:100%;height:100vh;height:100svh;min-height:520px;overflow:hidden;overflow:clip;transition:width .35s cubic-bezier(.2,.8,.2,1);background:var(--bg);isolation:isolate}
.hero__photo{position:absolute;left:0;top:0;max-width:none;z-index:0;user-select:none;pointer-events:none;transform-origin:0 0;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 0%,#000 96%,transparent 100%),linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect;
  transition:filter .6s ease}
.hero.is-lit .hero__photo{filter:saturate(.8) brightness(.6)}
.hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(38vmin 62vmin at var(--hx) var(--hy),transparent 0%,transparent 40%,rgba(2,4,7,.6) 78%,rgba(2,4,7,.85) 100%);
  opacity:.45;transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,#000 45%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,#000 45%)}
.hero.is-lit .hero__shade{opacity:1}
.hero__haze{position:absolute;left:-25%;right:-25%;top:-6%;height:58%;z-index:2;pointer-events:none;opacity:.5;
  background:radial-gradient(28% 55% at 22% 18%,rgba(var(--haze-rgb),.24),transparent 70%),radial-gradient(24% 50% at 58% 8%,rgba(var(--haze-rgb),.2),transparent 70%),radial-gradient(30% 60% at 84% 20%,rgba(var(--haze-rgb),.18),transparent 72%);
  animation:haze 46s ease-in-out infinite alternate;transition:opacity .6s ease}
.hero.is-lit .hero__haze{opacity:.3}
@keyframes haze{0%{transform:translate3d(-6%,0,0)}50%{transform:translate3d(2%,2%,0) scale(1.06)}100%{transform:translate3d(7%,-1%,0) scale(1.02)}}
.hero__floor{position:absolute;inset:auto 0 0 0;height:30%;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(3,5,8,.7),transparent)}
.hero__surface{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:overlay}
.hero__beams{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hero__flash{position:absolute;z-index:5;left:var(--hx);top:var(--hy);width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.3),rgba(255,255,255,.06) 30%,transparent 68%);opacity:0;pointer-events:none;mix-blend-mode:screen}
.hero.is-flash .hero__flash{animation:flash .6s ease-out}
@keyframes flash{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.15)}}

/* rig + sign (scene A, where the name isn't in the photo) */
.truss{position:absolute;left:0;right:0;top:58px;height:14px;z-index:4;pointer-events:none;border-top:1px solid rgba(200,222,248,.35);border-bottom:2px solid var(--steel-hi);
  background:repeating-linear-gradient(60deg,transparent 0 9px,var(--steel) 9px 11px,transparent 11px 20px),repeating-linear-gradient(-60deg,transparent 0 9px,var(--steel) 9px 11px,transparent 11px 20px);box-shadow:0 6px 18px rgba(0,0,0,.6)}
.rig-sign{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;margin:0;padding:9px 20px 9px calc(20px + .42em);background:#0b0e12;border:1px solid rgba(255,255,255,.07);border-radius:3px;
  font-family:var(--label);font-weight:700;font-size:15px;line-height:1;letter-spacing:.42em;text-transform:uppercase;white-space:nowrap;transition:box-shadow .5s ease,border-color .5s ease}
.rig-sign::before,.rig-sign::after{content:"";position:absolute;top:100%;width:2px;height:14px;background:var(--steel-hi)}
.rig-sign::before{left:22px}.rig-sign::after{right:22px}
.rig-sign .ch{display:inline-block;opacity:.14;animation:charOn .6s steps(1,end) forwards;animation-delay:calc(var(--i) * 55ms + 350ms)}
.rig-sign .ch--space{width:.5em}
@keyframes charOn{0%{opacity:.14}25%{opacity:1;text-shadow:0 0 8px rgba(234,246,255,.7)}40%{opacity:.25}60%,100%{opacity:1;text-shadow:0 0 6px rgba(234,246,255,.55),0 0 16px rgba(159,212,255,.3)}}
.hero.is-lit .rig-sign{border-color:var(--lamp);box-shadow:0 0 26px var(--lamp)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ================= LAMPS (nav) ================= */
.lamp-nav{position:absolute;top:0;left:50%;transform:translateX(-50%);transform-origin:50% 0;width:min(900px,calc(100% - 32px));display:flex;justify-content:space-between;z-index:6}
.hero[data-sign="1"] .lamp-nav{top:76px}
.lamp{position:relative;flex:0 0 auto;width:136px;display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;outline:none;-webkit-tap-highlight-color:transparent}
.lamp__rod{width:1px;height:22px;background:rgba(160,170,180,.35)}
.hero[data-sign="1"] .lamp__rod{height:10px;width:2px;background:var(--steel-hi)}
.lamp__housing{position:relative;min-width:88px;padding:8px 14px;border-radius:3px;background:rgba(12,14,17,.9);border:1px solid rgba(255,255,255,.08);text-align:center;transition:border-color .3s,box-shadow .3s}
.lamp__housing::after{content:"";position:absolute;left:30%;right:30%;bottom:3px;height:2px;border-radius:2px;background:var(--c);opacity:.5;transition:opacity .25s,left .25s,right .25s}
.lamp__word{display:block;font-family:var(--label);font-weight:700;font-size:14px;letter-spacing:.22em;padding-left:.22em;text-transform:uppercase;color:#8a939c;line-height:1;transition:color .18s,text-shadow .25s}
.lamp.is-on .lamp__word{color:#fff;text-shadow:0 0 6px var(--c),0 0 18px var(--c)}
.lamp.is-on .lamp__housing{border-color:var(--c-soft);box-shadow:0 0 20px var(--c-soft)}
.lamp.is-on .lamp__housing::after{opacity:1;left:12%;right:12%;box-shadow:0 0 8px var(--c)}
.lamp:focus-visible .lamp__housing{outline:2px solid var(--accent);outline-offset:3px}
.lamp.is-striking .lamp__word{animation:strike .32s steps(1,end)}
@keyframes strike{0%{opacity:1}20%{opacity:.35}40%{opacity:1}55%{opacity:.5}70%{opacity:1}}

/* the fixture: rotated by script to point where its beam goes */
.lamp__barrel{position:relative;margin-top:-1px;transform-origin:50% 3px;transform:rotate(var(--aim,0deg)) scale(var(--fxs,1))}
.lamp__barrel>span{position:absolute;display:block}
.lamp__lens{background:radial-gradient(ellipse at center,#fff 0 22%,var(--beam,var(--c)) 58%,#111 100%);box-shadow:0 0 9px 2px var(--beam,var(--c))}
.lamp.is-on .lamp__lens{background:radial-gradient(ellipse at center,#fff 0 40%,var(--beam,var(--c)) 72%,#222 100%);box-shadow:0 0 14px 4px var(--beam,var(--c)),0 0 40px 10px var(--c-soft)}
.hero.lights-off .lamp:not(.is-on) .lamp__lens{background:radial-gradient(ellipse at center,#2a2f35 0 30%,#0c0e11 75%);box-shadow:none}

/* 1 · Spot can */
.fx-can .lamp__barrel{width:24px;height:30px}
.fx-can .lamp__yoke{left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--steel-hi)}
.fx-can .lamp__can{left:2px;right:2px;top:5px;bottom:4px;border-radius:4px 4px 3px 3px;background:linear-gradient(90deg,#0c0f13,#2a313a 45%,#10141a)}
.fx-can .lamp__lens{left:1px;right:1px;bottom:0;height:7px;border-radius:50%}
/* 2 · Industrial dome */
.fx-dome .lamp__barrel{width:44px;height:27px}
.fx-dome .lamp__yoke{left:50%;top:0;width:6px;height:6px;margin-left:-3px;background:#2a2620}
.fx-dome .lamp__can{left:0;right:0;top:4px;bottom:4px;border-radius:22px 22px 3px 3px/18px 18px 3px 3px;background:linear-gradient(90deg,#15170f,#3b3d33 42%,#23251d 70%,#121309)}
.fx-dome .lamp__lens{left:5px;right:5px;bottom:0;height:7px;border-radius:50%}
/* 3 · Moving head */
.fx-moving .lamp__barrel{width:34px;height:40px}
.fx-moving .lamp__yoke{left:1px;right:1px;top:0;height:22px;border:3px solid #262c34;border-top-width:5px;border-radius:3px 3px 12px 12px}
.fx-moving .lamp__can{left:7px;right:7px;top:9px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a424c,#12161b 70%)}
.fx-moving .lamp__lens{left:10px;right:10px;top:26px;height:10px;border-radius:50%}
/* 4 · Fresnel with barn doors */
.fx-fresnel .lamp__barrel{width:30px;height:36px}
.fx-fresnel .lamp__yoke{left:50%;top:0;width:3px;height:8px;margin-left:-1.5px;background:var(--steel-hi)}
.fx-fresnel .lamp__can{left:3px;right:3px;top:6px;height:22px;border-radius:2px;background:linear-gradient(90deg,#101318,#303843 50%,#11151a);box-shadow:inset 0 3px 0 rgba(255,255,255,.05)}
.fx-fresnel .lamp__lens{left:5px;right:5px;top:27px;height:5px;border-radius:2px}
.fx-fresnel .lamp__lens::before,.fx-fresnel .lamp__lens::after{content:"";position:absolute;top:2px;width:9px;height:9px;background:#1b2027;clip-path:polygon(0 0,100% 0,100% 100%)}
.fx-fresnel .lamp__lens::before{left:-10px;transform:scaleX(-1)}
.fx-fresnel .lamp__lens::after{right:-10px}
/* 5 · LED batten */
.fx-batten .lamp__barrel{width:78px;height:16px}
.fx-batten .lamp__yoke{left:50%;top:0;width:2px;height:5px;margin-left:-1px;background:var(--steel-hi)}
.fx-batten .lamp__can{left:0;right:0;top:4px;height:9px;border-radius:2px;background:linear-gradient(#2a313a,#0f1216)}
.fx-batten .lamp__lens{left:3px;right:3px;top:11px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--beam,var(--c)) 0 5px,#111 5px 7px)}
.hero.lights-off .fx-batten .lamp:not(.is-on) .lamp__lens,.hero.lights-off.fx-batten .lamp:not(.is-on) .lamp__lens{background:repeating-linear-gradient(90deg,#2a2f35 0 5px,#111 5px 7px)}
/* 6 · Follow spot */
.fx-follow .lamp__barrel{width:18px;height:50px}
.fx-follow .lamp__yoke{left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--steel-hi)}
.fx-follow .lamp__can{left:2px;right:2px;top:5px;bottom:4px;border-radius:3px;background:repeating-linear-gradient(#171b21 0 9px,#2c333c 9px 11px),linear-gradient(90deg,#0c0f13,#2a313a)}
.fx-follow .lamp__lens{left:0;right:0;bottom:0;height:6px;border-radius:50%}

/* 7 · PAR can */
.fx-par .lamp__barrel{width:26px;height:38px}
.fx-par .lamp__yoke{left:-2px;right:-2px;top:0;height:18px;border:2px solid #262c34;border-top-width:4px;border-radius:2px 2px 8px 8px}
.fx-par .lamp__can{left:3px;right:3px;top:6px;bottom:5px;border-radius:3px 3px 5px 5px;background:linear-gradient(90deg,#0b0d10,#353d47 38%,#1a1f25 62%,#090b0d);box-shadow:inset 0 -3px 0 #3a424c}
.fx-par .lamp__lens{left:1px;right:1px;bottom:0;height:8px;border-radius:50%}
/* 8 · Vintage cage lantern */
.fx-lantern .lamp__barrel{width:30px;height:40px}
.fx-lantern .lamp__yoke{left:50%;top:0;width:12px;height:7px;margin-left:-6px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#3a2c1a,#7a5c32,#3a2c1a)}
.fx-lantern .lamp__can{left:2px;right:2px;top:6px;bottom:3px;border-radius:14px 14px 10px 10px;background:repeating-linear-gradient(90deg,transparent 0 5px,#5a4428 5px 6.5px),radial-gradient(ellipse at 50% 60%,rgba(255,220,160,.12),rgba(0,0,0,.5) 75%);border:1.5px solid #5a4428}
.fx-lantern .lamp__lens{left:7px;right:7px;top:12px;bottom:8px;border-radius:50%}
/* 9 · Profile (ellipsoidal) */
.fx-profile .lamp__barrel{width:22px;height:56px}
.fx-profile .lamp__yoke{left:50%;top:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--steel-hi)}
.fx-profile .lamp__can{left:0;right:0;top:5px;height:22px;border-radius:10px 10px 4px 4px;background:linear-gradient(90deg,#0c0f13,#2e3640 45%,#10141a)}
.fx-profile .lamp__can::after{content:"";position:absolute;left:4px;right:4px;top:22px;height:22px;background:linear-gradient(90deg,#0c0f13,#262d36 45%,#10141a);border-radius:0 0 2px 2px}
.fx-profile .lamp__lens{left:3px;right:3px;bottom:2px;height:6px;border-radius:50%}
@media (min-width:1800px){.lamp-nav{transform:translateX(-50%) scale(1.2)}.rig-sign{transform:translateX(-50%) scale(1.2);transform-origin:50% 0}.hero[data-sign="1"] .truss{top:70px}.hero[data-sign="1"] .lamp-nav{top:92px}}
@media (min-width:2300px){.lamp-nav{transform:translateX(-50%) scale(1.4)}.rig-sign{transform:translateX(-50%) scale(1.4)}.hero[data-sign="1"] .truss{top:82px}.hero[data-sign="1"] .lamp-nav{top:106px}}
@media (max-width:900px){.lamp{width:112px}.lamp__word{font-size:13px;letter-spacing:.18em}}
@media (max-width:600px){
  .lamp{width:22%}.lamp__housing{min-width:0;width:100%;padding:7px 4px}.lamp__word{font-size:11px;letter-spacing:.1em;padding-left:.1em}
  .truss{top:47px;height:10px}.hero[data-sign="1"] .lamp-nav{top:61px}
  .rig-sign{top:10px;font-size:11px;letter-spacing:.34em;padding:8px 12px 8px calc(12px + .34em)}
  .fx-batten .lamp__barrel{width:56px}
}