/* Lights on — four stadium light banks click on, flood the screen, the word slams in */
#loOverlay { position:fixed; inset:0; z-index:2147483000; display:none; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; text-align:center; background:#04060a; color:#14171e; }
#loOverlay.show { display:flex; }
/* the scene: sitting in the driveway at night, looking at a two-car garage */
#loOverlay .lo-scene { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,#04060b 0%,#0a0e18 55%,#0d121d 100%); }
#loOverlay.show .lo-scene { animation:lo-scene-out .7s ease-in 2.15s forwards; } @keyframes lo-scene-out { to { opacity:0; } }
#loOverlay .lo-moon { position:absolute; right:12%; top:7%; width:clamp(26px,6vw,46px); aspect-ratio:1; border-radius:50%; background:#dfe6f2; opacity:.16; box-shadow:0 0 40px 8px rgba(190,205,235,.12); }
#loOverlay .lo-house { position:absolute; left:50%; bottom:25%; width:min(100vw,820px); transform:translateX(-50%); padding:3.5% 3.5% 0; background:
   repeating-linear-gradient(180deg,#131a28 0 7px,#10161f 7px 14px); border-radius:6px 6px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.5); }
#loOverlay .lo-house::before { content:''; position:absolute; left:-1%; right:-1%; top:-22%; height:23%; background:linear-gradient(180deg,#0b0f18,#0e1420); clip-path:polygon(0 100%,50% 0,100% 100%); }
#loOverlay .lo-opening { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:2.5%; aspect-ratio:2/0.76; overflow:hidden; background:#06080d; border:2px solid #202838; border-bottom:0; }
#loOverlay .lo-inside { position:absolute; inset:0; background:radial-gradient(90% 120% at 50% 100%,#fffdf2,#fff6cf 60%,#ffe9a6); opacity:0; }
#loOverlay.show .lo-inside { animation:lo-inside 1.1s ease-in 1.7s forwards; } @keyframes lo-inside { to { opacity:1; } }
#loOverlay .lo-door { position:relative; z-index:1; border-radius:2px 2px 0 0; background:
   repeating-linear-gradient(180deg,transparent 0 calc(25% - 2px),rgba(0,0,0,.55) calc(25% - 2px) 25%),
   linear-gradient(180deg,#2b3446,#1f2736); box-shadow:inset 0 0 0 2px #2f394d; }
#loOverlay.show .lo-door { animation:lo-door-up 1.1s cubic-bezier(.55,0,.25,1) 1.9s forwards; } @keyframes lo-door-up { to { transform:translateY(-102%); } }
#loOverlay .lo-wins { position:absolute; left:7%; right:7%; top:6%; height:16%; display:grid; grid-template-columns:repeat(4,1fr); gap:5%; }
#loOverlay .lo-wins i { display:block; background:#10151f; border:1px solid #394459; }
#loOverlay.show .lo-wins i { animation:lo-win .5s steps(1,end) both; animation-delay:calc(1.1s + var(--w,0) * 90ms); }
#loOverlay .lo-wins i:nth-child(1) { --w:0 } #loOverlay .lo-wins i:nth-child(2) { --w:1 } #loOverlay .lo-wins i:nth-child(3) { --w:2 } #loOverlay .lo-wins i:nth-child(4) { --w:3 }
#loOverlay .lo-door:nth-of-type(2) .lo-wins i { animation-delay:calc(1.4s + var(--w,0) * 90ms); }
@keyframes lo-win { 0% { background:#10151f; box-shadow:none; } 25% { background:#ffe9a6; box-shadow:0 0 12px 2px rgba(255,220,140,.8); } 40% { background:#1a2030; box-shadow:none; } 100% { background:#ffe9a6; box-shadow:0 0 14px 3px rgba(255,220,140,.9); } }
/* coach lights beside and between the doors */
#loOverlay .lo-lamp { position:absolute; top:14%; width:2.6%; aspect-ratio:1/1.5; background:#1b2231; border-radius:2px; }
#loOverlay .lo-lamp.l1 { left:1%; } #loOverlay .lo-lamp.l2 { left:48.7%; } #loOverlay .lo-lamp.l3 { right:1%; }
#loOverlay .lo-lamp::after { content:''; position:absolute; left:50%; top:60%; width:900%; aspect-ratio:1; transform:translate(-50%,-50%) scale(.2); border-radius:50%; background:radial-gradient(closest-side,rgba(255,225,150,.75),rgba(255,210,120,.25) 45%,transparent 70%); opacity:0; }
#loOverlay.show .lo-lamp { animation:lo-lamp-on .5s steps(1,end) .45s both; } @keyframes lo-lamp-on { 0% { background:#1b2231; } 20% { background:#ffe3a0; } 36% { background:#1b2231; } 52% { background:#ffe3a0; } 66% { background:#1b2231; } 80%,100% { background:#ffe9b8; } }
#loOverlay.show .lo-lamp::after { animation:lo-glow .6s ease-out .45s forwards; } @keyframes lo-glow { 0%,100% { } 30% { opacity:.8; transform:translate(-50%,-50%) scale(.5); } 45% { opacity:.2; } 100% { opacity:.9; transform:translate(-50%,-50%) scale(1); } }
/* the driveway */
#loOverlay .lo-drive { position:absolute; left:0; right:0; bottom:0; height:25%; background:linear-gradient(180deg,#151a24,#0b0e15); clip-path:polygon(24% 0,76% 0,100% 100%,0 100%); }
#loOverlay .lo-drive::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.05) 49.7% 50.3%,transparent 50.3%),repeating-linear-gradient(180deg,transparent 0 22%,rgba(255,255,255,.05) 22% 23%); }
#loOverlay.show .lo-drive { animation:lo-spill .9s ease-out 1.8s both; } @keyframes lo-spill { to { background:linear-gradient(180deg,#5a5340,#1b1d25); } }
/* the flood: the open garage is so bright it takes over the whole screen */
#loOverlay .lo-flood { position:absolute; inset:0; z-index:2; background:#fff; opacity:0; }
#loOverlay.show .lo-flood { animation:lo-flood .55s ease-in 2.35s forwards; }
@keyframes lo-flood { 0% { opacity:0; } 60% { opacity:1; filter:brightness(1.25); } 100% { opacity:1; filter:none; } }
#loOverlay .lo-card { position:relative; z-index:3; padding:0 1.5rem; max-width:900px; margin-top:8vh; }
#loOverlay .lo-title { margin:0; font:400 clamp(3.2rem,14.5vw,9.5rem)/.95 'Bebas Neue',var(--f-display,sans-serif); letter-spacing:.005em; color:#14171e; white-space:nowrap; }
#loOverlay .lo-title span { display:inline-block; opacity:0; transform:translateY(-.5em) scale(1.1); }
#loOverlay.show .lo-title span { animation:lo-drop .5s cubic-bezier(.2,.9,.3,1.3) forwards; animation-delay:calc(2.75s + var(--i) * 50ms); }
#loOverlay .lo-title .bang { color:#e8a020; text-shadow:0 0 24px rgba(232,160,32,.5); }
@keyframes lo-drop { to { opacity:1; transform:none; } }
#loOverlay .lo-sub { margin:.8rem 0 0; font:600 clamp(1rem,3.4vw,1.35rem) 'Hanken Grotesk',system-ui,sans-serif; color:#2b303b; opacity:0; }
#loOverlay .lo-hint { margin:.35rem 0 0; font:500 .85rem 'Hanken Grotesk',system-ui,sans-serif; color:#7a8294; opacity:0; }
#loOverlay .lo-needy { margin-top:1.4rem; height:40px; padding:0 1.2rem; border-radius:99px; border:1px solid #c3c8d4; background:#fff; color:#3a4150; font:600 .9rem 'Hanken Grotesk',system-ui,sans-serif; cursor:pointer; opacity:0; }
#loOverlay .lo-needy:hover, #loOverlay .lo-needy:focus-visible { border-color:#14171e; color:#14171e; outline:0; }
#loOverlay .lo-foot { position:absolute; left:0; right:0; bottom:1.4rem; margin:0; font:500 .75rem 'Hanken Grotesk',system-ui,sans-serif; color:#a2a9b8; opacity:0; z-index:3; }
#loOverlay.show .lo-sub { animation:lo-fade .6s 3.55s forwards; } #loOverlay.show .lo-hint { animation:lo-fade .6s 3.8s forwards; }
#loOverlay.show .lo-needy { animation:lo-fade .6s 4s forwards; } #loOverlay.show .lo-foot { animation:lo-fade .8s 4.3s forwards; }
@keyframes lo-fade { to { opacity:1; } }

@media (prefers-reduced-motion:reduce) {
  #loOverlay .lo-flood { opacity:1; animation:none !important; } #loOverlay .lo-scene { display:none; }
  #loOverlay .lo-title span, #loOverlay .lo-sub, #loOverlay .lo-hint, #loOverlay .lo-needy, #loOverlay .lo-foot { opacity:1; transform:none; animation:none !important; }
}