/* Title — Lamplight board Main.dc.html. Scoped to .lamp-title; positions are the board's 1920×1080 px.
   Weights: --f-chunk is Parkinsans 800; --f-body 500 -> 500, 700/800 -> 600, 900 -> 700. */
.lamp-title { background: #2b1446; color: #fff4dc; user-select: none; overflow: hidden; }
.lamp-title .plx { position: absolute; inset: 0; will-change: transform; pointer-events: none; }
.lamp-title .plx .bg { position: absolute; inset: -10px; background-size: cover; background-position: center; }
.lamp-title .bg.sky { transform-origin: 22% 64%; animation: lt-drift 32s ease-in-out infinite alternate; }
@keyframes lt-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
.lamp-title .star { position: absolute; border-radius: 50%; background: #fff6dc; box-shadow: 0 0 8px 2px rgba(255,236,200,.5); animation: lt-twinkle 3.4s ease-in-out infinite; }
@keyframes lt-twinkle { 0%,100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
.lamp-title .sunglow { position: absolute; left: 112px; top: 424px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,130,.6) 0%, rgba(255,150,120,.2) 36%, rgba(255,120,120,0) 64%); mix-blend-mode: screen; animation: lt-sun 6s ease-in-out infinite; }
@keyframes lt-sun { 0%,100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.07); } }

/* Zeus: rises from behind the front mountains to talk, sinks back when quiet; a slow bob while up */
.lamp-title #zeusWrap { position: absolute; left: 1262px; top: 12px; width: 760px; height: 760px; animation: lt-zeus 7s ease-in-out infinite; }
@keyframes lt-zeus { 0%,100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
.lamp-title #zeus { display: block; width: 100%; height: 100%; pointer-events: auto; cursor: pointer; transform: translateY(600px); transform-origin: 50% 100%; }
.lamp-title #zeus.up { transform: translateY(0); animation: lt-zeus-up calc(1s / var(--speed, 1)) cubic-bezier(.2,1.4,.4,1); }
.lamp-title #zeus.down { transform: translateY(600px); animation: lt-zeus-down calc(.7s / var(--speed, 1)) cubic-bezier(.6,0,.8,.4); }
@keyframes lt-zeus-up { from { transform: translateY(600px); } to { transform: translateY(0); } }
@keyframes lt-zeus-down { from { transform: translateY(0); } to { transform: translateY(600px); } }

/* the ferry and its thirteen lamps */
.lamp-title .boat { position: absolute; left: 1010px; top: 770px; width: 760px; height: 295px; transform-origin: 50% 80%; animation: lt-bob 6s ease-in-out infinite; }
@keyframes lt-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
.lamp-title .boat .ferry { position: absolute; left: 0; top: 0; width: 760px; height: 295px; display: block; }
.lamp-title .lampglow { position: absolute; left: 80px; top: 62px; width: 580px; height: 170px; background: radial-gradient(ellipse at 50% 52%, rgba(255,200,100,.7), rgba(255,140,60,.2) 46%, rgba(255,120,40,0) 70%); mix-blend-mode: screen; animation: lt-flicker 2.3s ease-in-out infinite; }
@keyframes lt-flicker { 0% { opacity: .82; } 18% { opacity: 1; } 31% { opacity: .76; } 52% { opacity: .96; } 68% { opacity: .8; } 84% { opacity: 1; } 100% { opacity: .82; } }
.lamp-title .boat .lamp { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle, rgba(255,236,170,.95) 0%, rgba(255,180,80,.45) 30%, rgba(255,140,40,0) 70%); mix-blend-mode: screen; animation: lt-flicker 1.7s ease-in-out infinite; }
.lamp-title .reflect { position: absolute; left: 1070px; top: 1004px; width: 640px; height: 76px; background: radial-gradient(ellipse at 50% 30%, rgba(255,190,100,.42), rgba(255,160,80,0) 70%); mix-blend-mode: screen; animation: lt-flicker 2.9s ease-in-out infinite; }
.lamp-title .ember { position: absolute; border-radius: 50%; background: #ffe09a; box-shadow: 0 0 10px 3px rgba(255,166,60,.75); opacity: 0; animation-name: lt-rise; animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes lt-rise { 0% { opacity: 0; transform: translate(0,0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -300px) scale(.25); } }

.lamp-title #bolt { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
.lamp-title #bolt path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lamp-title .ui { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.lamp-title .ui > .logo, .lamp-title .ui > .menu { pointer-events: auto; }

/* logo: pops in (no tilt), then floats */
.lamp-title .logo { position: absolute; left: 88px; top: 58px; width: 650px; height: 267px; filter: drop-shadow(0 20px 26px rgba(20,6,40,.5)); animation: lt-float 6s ease-in-out infinite; pointer-events: none; }
@keyframes lt-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.lamp-title .logo .main { width: 100%; height: 100%; opacity: 0; transform: scale(.6); }
.lamp-title .logo .main.in { opacity: 1; transform: none; animation: lt-logo-in calc(.6s / var(--speed, 1)) cubic-bezier(.2,1.6,.4,1); }
@keyframes lt-logo-in { from { opacity: 0; transform: translateY(-60px) scale(.6); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.lamp-title .logo .logo-img { display: block; width: 650px; height: 267px; object-fit: contain; }

/* menu */
.lamp-title .menu { position: absolute; left: 112px; top: 378px; width: 620px; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.lamp-title .menu [data-k] { opacity: 0; }
.lamp-title .menu [data-k].in { opacity: 1; animation: lt-btn-in calc(.55s / var(--speed, 1)) cubic-bezier(.2,1.5,.4,1); }
.lamp-title .menu [data-k].done { animation: none; }
@keyframes lt-btn-in { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
.lamp-title .cta { position: relative; }
.lamp-title .cta .halo { position: absolute; left: -34px; top: -30px; right: -34px; bottom: -34px; border-radius: 60px; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, rgba(255,110,60,.55), rgba(255,90,54,0) 68%); animation: lt-breathe 3.2s ease-in-out infinite; }
@keyframes lt-breathe { 0%,100% { opacity: .35; transform: scale(.96); } 50% { opacity: .95; transform: scale(1.03); } }

.lamp-title .slab { --c1: #ff7c50; --c2: #f2492a; --lip: #b3321b; --shade: rgba(110,18,8,.6); --glow: rgba(255,120,70,.6);
  position: relative; display: flex; align-items: center; box-sizing: border-box; border: 0; border-radius: 30px; color: #fff; text-align: left; cursor: pointer; overflow: hidden;
  width: 580px; height: 124px; padding: 0 34px 4px 36px; gap: 24px;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -6px 0 rgba(0,0,0,.08), 0 9px 0 var(--lip), 0 28px 42px -14px var(--shade);
  transition: transform .16s cubic-bezier(.3,1.8,.5,1), box-shadow .16s ease; }
.lamp-title .slab::before { content: ""; position: absolute; top: -40%; bottom: -40%; left: -140px; width: 70px; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0)); transform: skewX(-20deg); pointer-events: none; }
.lamp-title .slab:hover { transform: translateY(-5px) scale(1.015); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.08), 0 14px 0 var(--lip), 0 36px 52px -14px var(--shade), 0 0 56px var(--glow); }
.lamp-title .slab:hover::before { left: 118%; transition: left .6s ease-out; }
.lamp-title .slab:active { transform: translateY(8px) scale(.985, .95); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 var(--lip), 0 8px 16px -6px var(--shade); transition-duration: .05s; }
.lamp-title .slab:focus-visible { outline: none; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 9px 0 var(--lip), 0 0 0 5px rgba(255,244,220,.95), 0 0 40px var(--glow); }
.lamp-title .slab.bone { --c1: #fffaf0; --c2: #f6e3bd; --lip: #c9a66a; --shade: rgba(50,14,40,.55); --glow: rgba(255,236,190,.5); color: #2a1838; height: 100px; padding: 0 30px 4px 36px; gap: 24px; }
.lamp-title .slab .glyph { flex: none; width: 46px; height: 46px; fill: #fff4dc; filter: drop-shadow(0 3px 0 rgba(120,20,8,.3)); transition: transform .2s cubic-bezier(.3,1.8,.5,1); }
.lamp-title .slab:hover .glyph { transform: scale(1.15); }
.lamp-title .slab .num { flex: none; width: 58px; text-align: center; font: 400 50px/1 var(--f-chunk); color: #1fb5b0; text-shadow: 0 3px 0 rgba(14,115,120,.25); }
.lamp-title .slab .btxt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lamp-title .slab .btitle { font: 400 42px/1 var(--f-chunk); letter-spacing: -.2px; white-space: nowrap; text-shadow: 0 3px 0 rgba(120,20,8,.28); }
.lamp-title .slab.bone .btitle { font-size: 36px; text-shadow: none; }
.lamp-title .slab .bsub { font: 700 19px/1.1 var(--f-body); opacity: .86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Codex and Settings: the same width as the slabs above, a quieter dusk colour, shorter */
.lamp-title .slab.dusk { --c1: #5a3a86; --c2: #3e2764; --lip: #24153d; --shade: rgba(16,6,30,.6); --glow: rgba(170,130,255,.35); color: #fff4dc; height: 84px; }
.lamp-title .slab.dusk .ico { flex: none; width: 34px; height: 34px; margin: 0 6px; stroke-width: 2.3; }
.lamp-title .slab.dusk .btitle { font-size: 32px; text-shadow: 0 3px 0 rgba(20,8,40,.35); }
.lamp-title .menu { gap: 22px; }
.lamp-title .links { display: flex; align-items: center; gap: 34px; margin: -4px 0 0 -2px; }
.lamp-title .ghost { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 2px 10px; border: 0; background: none; color: rgba(255,244,220,.9); font: 900 23px/1 var(--f-body); cursor: pointer; text-shadow: 0 2px 14px rgba(20,6,40,.75); transition: transform .16s cubic-bezier(.3,1.8,.5,1), color .16s; }
.lamp-title .ghost .ico { width: 25px; height: 25px; stroke-width: 2.3; filter: drop-shadow(0 2px 6px rgba(20,6,40,.6)); }
.lamp-title .ghost::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: 0; height: 3px; border-radius: 3px; background: #ffc740; box-shadow: 0 0 14px rgba(255,199,64,.85); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.lamp-title .ghost:hover, .lamp-title .ghost:focus-visible { color: #ffd66b; transform: translateY(-3px); }
.lamp-title .ghost:hover::after, .lamp-title .ghost:focus-visible::after { transform: scaleX(1); }
.lamp-title .ghost:focus-visible { outline: 3px solid #ffd25e; outline-offset: 5px; border-radius: 14px; }

/* Zeus's cream bubble, tail up toward his grin */
.lamp-title #zb { left: 1378px; top: 488px; width: 404px; max-width: none; padding: 22px 30px 24px; border-radius: 32px; background: #fff4dc; color: #2a1838; font: 700 27px/1.3 var(--f-body); box-shadow: 0 26px 50px -18px rgba(20,6,40,.75); transform-origin: 70% -10%; --whoc: #2f6fd1; }
.lamp-title #zb::after { content: none; }
.lamp-title #zb .tail { position: absolute; left: 262px; top: -34px; width: 46px; height: 46px; fill: #fff4dc; }
.lamp-title #zb .who { margin-bottom: 8px; font: 400 22px/1 var(--f-chunk); letter-spacing: .5px; color: #2f6fd1; }

.lamp-title .foot { position: absolute; left: 118px; bottom: 40px; z-index: 40; display: flex; flex-direction: column; gap: 10px; font: 700 18px/1.2 var(--f-body); color: rgba(255,244,220,.7); text-shadow: 0 2px 12px rgba(10,4,20,.8); pointer-events: none; }
.lamp-title .foot b { font: 400 18px/1.2 var(--f-chunk); color: #ffc740; }
.lamp-title .foot .keys { display: flex; align-items: center; gap: 8px; font-size: 15px; color: rgba(255,244,220,.74); }
.lamp-title .foot .kbd { display: inline-block; padding: 3px 9px 4px; border-radius: 8px; background: rgba(255,244,220,.14); color: rgba(255,244,220,.9); font: 900 13px/1.1 var(--f-body); opacity: 1; vertical-align: baseline; }
.lamp-title .foot .keys .kbd:nth-of-type(2) { margin-left: 10px; }
.lamp-title .fskey { position: absolute; right: 64px; bottom: 40px; z-index: 41; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 7px; border: 0; border-radius: 9px; background: rgba(255,244,220,.14); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); color: rgba(255,244,220,.9); font: 900 15px/1 var(--f-body); cursor: pointer; transition: transform .16s cubic-bezier(.3,1.8,.5,1), background .16s, color .16s; }
.lamp-title .fskey .ico { width: 17px; height: 17px; stroke-width: 2.5; }
.lamp-title .fskey:hover, .lamp-title .fskey:focus-visible { background: rgba(255,244,220,.24); color: #ffd66b; transform: translateY(-2px); }
.lamp-title .fskey:focus-visible { outline: 3px solid #ffd25e; outline-offset: 4px; }
.lamp-title .foot .tally { margin-left: 18px; color: rgba(255,244,220,.56); }

/* reduced motion: the ambient light rests; Zeus still rises and sinks, without the travel */
@media (prefers-reduced-motion: reduce) {
  .lamp-title *, .lamp-title *::before, .lamp-title *::after { animation: none !important; transition-duration: .001s !important; }
}
.reduced .lamp-title *, .reduced .lamp-title *::before, .reduced .lamp-title *::after { animation: none !important; transition-duration: .001s !important; }
@media (prefers-reduced-motion: reduce) { .lamp-title #zb.show { opacity: 1; transform: none; } .lamp-title #zb.hide { opacity: 0; } }
.reduced .lamp-title #zb.show { opacity: 1; transform: none; }
.reduced .lamp-title #zb.hide { opacity: 0; }