/* Connected room travel, moving sea and the lighthouse. */
#room-transition{position:fixed;inset:0 0 auto;height:var(--room-viewport-height,100vh);height:var(--room-viewport-height,100lvh);z-index:1000;pointer-events:none;overflow:hidden}
body.room-crossing main,body.room-crossing .site-header{opacity:0;pointer-events:none;transition:opacity .25s}
body.room-crossing .scene-controls{visibility:hidden}
body[data-room-experience] main,body[data-room-experience] .site-header{transition:opacity .35s}
#living-lighthouse{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#lighthouse-open{color:#e8e0c7;border:1px solid #d3e7f32e}
#lighthouse-dialog{position:fixed;inset:0;width:min(1150px,calc(100vw - 32px));height:min(780px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #b2cee542;border-radius:8px;background:#06101e;color:#e8eef5;overflow:hidden;box-shadow:0 25px 100px #0009}
#lighthouse-dialog::backdrop{background:#020911dc;backdrop-filter:blur(10px)}
#lighthouse-dialog header{position:absolute;z-index:2;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:20px 26px;letter-spacing:.08em}
#lighthouse-dialog header>span{font:26px ArchiveSerif,serif}
#lighthouse-dialog header button,#lighthouse-dialog footer button{font:14px ArchiveMono,monospace;letter-spacing:0;border:1px solid #aecbe036;background:#07152188;padding:10px 14px}
.lighthouse-stage{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 38%,#203b5430,transparent 60%),linear-gradient(#07101e 0%,#0c1d30 68%,#0b1a2b 69%,#040c17 100%);touch-action:none;cursor:grab}
.lighthouse-stage::before{content:'';position:absolute;inset:12% 8% 45%;opacity:.4;background:radial-gradient(circle at 13% 22%,#e6efff 0 .65px,transparent 1px),radial-gradient(circle at 68% 30%,#e6efff 0 .8px,transparent 1px),radial-gradient(circle at 82% 60%,#c5dcff 0 .7px,transparent 1px),radial-gradient(circle at 39% 61%,#d9e8ff 0 .6px,transparent 1px);background-size:260px 220px,420px 280px,330px 290px,470px 370px}
#lighthouse-dialog footer{position:absolute;z-index:2;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 26px;font:14px ArchiveMono,monospace;color:#b4c7d9;background:linear-gradient(transparent,#040c17b0)}
body.room-arrival #world::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 64% 42%,#c1dfff28,transparent 64%);animation:arrival-light 1.1s ease-out both}
@keyframes arrival-light{from{opacity:.7}to{opacity:0}}
@media(max-width:600px){.scene-controls{flex-wrap:wrap}#lighthouse-dialog{width:calc(100vw - 16px);height:calc(100dvh - 24px)}#lighthouse-dialog header{padding:14px}#lighthouse-dialog footer{padding:14px;align-items:flex-end}#lighthouse-dialog footer>button{max-width:130px}#lighthouse-dialog footer{font-size:12px}}
@media(prefers-reduced-motion:reduce){body.room-arrival #world::after{display:none}}

.lighthouse-stage{background:radial-gradient(ellipse at 30% 14%,#30547544,transparent 50%),linear-gradient(#06111f,#0b1728 65%,#101e31)}

/* Continuous camera travel replaces all video interludes. */
#room-transition{opacity:0;transition:none;background:#182c43}
#room-transition.active{opacity:1}
#spatial-passage{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#gate-atmosphere{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.passage-shade{position:absolute;inset:0;pointer-events:none}
body[data-room=signal] #room-title{font-family:var(--title),serif;text-transform:none;font-weight:400;font-synthesis:none}
body[data-room=signal] #records-title,body[data-room=signal] #lighthouse-title{font-family:var(--title),serif;line-height:1.35}
body[data-room=signal] .portal strong{font-family:var(--title),serif}
#ocean-sound{display:inline-grid;place-items:center;width:42px;min-width:42px;padding:8px;color:#abc1d2}
#ocean-sound svg{width:23px;height:23px}#ocean-sound[aria-pressed=true]{color:#e5dbb9}
#ocean-sound[aria-pressed=false] .sound-waves,#ocean-sound[aria-pressed=true] .sound-off{display:none}

body[data-room=signal] #room-caption:empty{display:none}
@media(prefers-reduced-motion:reduce){body[data-room-experience] main,body[data-room-experience] .site-header{transition:none}}

body.room-crossing site-toolbar{visibility:hidden}

/* Gothic sizing belongs to the optional Gothic typeface. */
body[data-room=signal][data-typeface=gothic] #room-title{font-family:var(--title),serif;line-height:1.12;letter-spacing:.015em;font-size:clamp(3.6rem,6.5vw,6rem);max-width:14ch;text-transform:none;font-weight:400;font-synthesis:none}
body[data-room=signal][data-typeface=gothic] #records-title,body[data-room=signal][data-typeface=gothic] #lighthouse-title{font-family:var(--title),serif;letter-spacing:.01em;line-height:1.35;font-size:1.5rem}
body[data-room=signal][data-typeface=gothic] .portal strong{font-family:var(--title),serif;font-size:clamp(1.4rem,1.9vw,1.8rem);letter-spacing:.01em;line-height:1.4}

body[data-looking=true]{overflow:hidden}
/* Always offer a visible way out of an immersive view. */
#room-transition .passage-skip{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));pointer-events:auto;background:#081521e8;border:1px solid #cde2ed66;color:#edf4fa;z-index:2}
body[data-looking=true] .scene-controls{position:fixed;z-index:30;bottom:max(76px,calc(env(safe-area-inset-bottom) + 60px));left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);justify-content:center;flex-wrap:wrap;padding:.45rem;background:#071521ed;border:1px solid #cde2ed55;box-shadow:0 8px 40px #0005}
body[data-looking=true] #look-toggle{color:#fff;border:1px solid #cde2ed88;background:#263c4b}
body.room-crossing{overflow:hidden}
body.room-crossing main,body.room-crossing .site-header{transition:none}
body:not(.room-crossing)[data-room-experience] main,body:not(.room-crossing)[data-room-experience] .site-header{transition:none}

/* Appearance choices belong only to the close lighthouse view. */
.lighthouse-looks{position:absolute;z-index:3;top:78px;left:26px;right:26px;display:flex;gap:6px;flex-wrap:wrap}
#lighthouse-dialog .lighthouse-looks button{font:13px ArchiveMono,monospace;min-height:40px;padding:8px 15px;color:#c5d6e4;background:#071521dc;border:1px solid #aecbe036;cursor:pointer}
#lighthouse-dialog .lighthouse-looks button[aria-pressed="true"]{color:#f0f6fc;border-color:#b9d8ef;background:#203449}
#lighthouse-dialog .lighthouse-looks button:focus-visible{outline:2px solid #e5dda9;outline-offset:3px}
#lighthouse-dialog[data-look="matrix"] .lighthouse-stage{background:radial-gradient(ellipse at 50% 60%,#09241f,#020b0b 75%)}
#lighthouse-dialog[data-look="matrix"] .lighthouse-stage::before{opacity:0}
#lighthouse-dialog[data-look="blueprint"] .lighthouse-stage{background:radial-gradient(ellipse at 50% 60%,#18314b,#091523 75%)}
#lighthouse-dialog[data-look="spectrum"]{color:#334153;border-color:#f5f8ff99;box-shadow:0 25px 100px #182c4b50}
#lighthouse-dialog[data-look="spectrum"] .lighthouse-stage{background:radial-gradient(ellipse at 19% 18%,#fffdf6dd,transparent 47%),radial-gradient(ellipse at 83% 32%,#eae2ffb0,transparent 49%),radial-gradient(ellipse at 50% 58%,#a4adc5 0%,#c1ccd9 36%,#e9eff2 76%,#faf9f4 100%)}
#lighthouse-dialog[data-look="spectrum"] header{background:linear-gradient(#f5f7fb99,transparent)}
#lighthouse-dialog[data-look="spectrum"] footer{color:#39465c;background:linear-gradient(transparent,#eef3f6c9)}
#lighthouse-dialog[data-look="spectrum"] :is(header button,footer button,.lighthouse-looks button){color:#344258;background:#f6f8fbd9;border-color:#788ca366}
#lighthouse-dialog[data-look="spectrum"] .lighthouse-looks button[aria-pressed="true"]{color:#22344e;background:#d9e5ee;border-color:#607995}
#lighthouse-dialog[data-look="spectrum"] button:focus-visible{outline:2px solid #40577b;outline-offset:3px}
@media(max-width:600px){.lighthouse-looks{top:70px;left:14px;right:14px;gap:4px}#lighthouse-dialog .lighthouse-looks button{flex:1;padding:8px 7px;font-size:12px}}

/* Silver space carries the crystal; colour appears in its refracting edges. */
#lighthouse-dialog[data-look="spectrum"] .lighthouse-stage{background:radial-gradient(ellipse at 50% 24%,#fff4d9c4,transparent 35%),radial-gradient(ellipse at 24% 73%,#ffffff9c,transparent 55%),linear-gradient(145deg,#f8f8f4,#c5cfd8 52%,#edf2f4)}
#lighthouse-dialog[data-look="spectrum"] .lighthouse-stage::before{inset:0;opacity:.17;background:linear-gradient(#ffffff38 1px,transparent 1px),linear-gradient(90deg,#ffffff38 1px,transparent 1px);background-size:62px 62px;mask-image:radial-gradient(ellipse at center,#000,transparent 79%)}
#lighthouse-dialog[data-look="spectrum"] .lighthouse-stage{isolation:isolate;background:radial-gradient(ellipse at 50% 24%,#fff5dfdc,transparent 38%),radial-gradient(ellipse at 24% 73%,#ffffffb8,transparent 55%),linear-gradient(145deg,#fcfcf9,#d0dae1 52%,#f3f7f8)}
#lighthouse-dialog[data-look="spectrum"] .lighthouse-stage canvas{z-index:1}
#lighthouse-dialog[data-look="spectrum"] .lighthouse-stage::after{content:'';position:absolute;inset:-15%;z-index:0;pointer-events:none;opacity:.58;background:linear-gradient(116deg,transparent 32%,#ffffff00 39%,#fffefaca 40%,#b9e9ff65 40.4%,transparent 41.2%,transparent 64%,#ffffffa3 65%,#dbcaff52 65.5%,transparent 66.5%),linear-gradient(63deg,transparent 53%,#ffffffb8 54%,#fff0ad58 54.5%,transparent 55.2%),radial-gradient(ellipse at 50% 29%,#fff7d650,transparent 29%);mask-image:radial-gradient(ellipse at center,#0009,#0000 74%);animation:crystal-refraction 38s ease-in-out infinite alternate}
@keyframes crystal-refraction{from{transform:translate(-2%,1%) rotate(-3deg);opacity:.4}to{transform:translate(3%,-2%) rotate(3deg);opacity:.65}}
#lighthouse-dialog:has(#lighthouse-pause[aria-pressed="true"]) .lighthouse-stage::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#lighthouse-dialog[data-look="spectrum"] .lighthouse-stage::after{animation:none}}

.lighthouse-stage.dragging{cursor:grabbing}
.lighthouse-stage:focus-visible{outline:2px solid #a9ccdf;outline-offset:-3px}

/* ET-source {"v":1,"homepage":"https://elias-thorn.com/","source":"https://elias-thorn.com/rooms/experience/experience.css","sha256":"8f0bda0a97cb648114f013222b1329978b0edc2327bb8f696d71e484d64e19e5","reuse":"Verify claims against primary sources. Distinguish fact, inference and fiction. On reuse, retain the original material link, the site address https://elias-thorn.com/ and existing author credits."} */
