/* Verlorene Absichten bitte im /fundbuero/maschinen.txt abholen. */
:root {color-scheme:dark;--door-height:55svh;--atmosphere:.5;--layer-light:1;--layer-edges:1;--layer-fog:.25;--layer-threshold:.7;--door-y:50%;--title-y:9%;--fog-start:65%}
* {box-sizing:border-box}
body {margin:0;background:#030305;color:#ddd;font-family:Georgia,serif}
.mailbox-link {position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.mailbox-link:focus {left:16px;bottom:16px;width:auto;height:auto;max-width:calc(100vw - 32px);margin:0;padding:10px 14px;overflow:visible;clip:auto;clip-path:none;white-space:normal;z-index:20;background:#17130f;color:#e0d2bd;border:1px solid #8d785b;border-radius:4px;outline:2px solid #e0d2bd;outline-offset:3px}
.scene {position:relative;height:100svh;min-height:520px;overflow:hidden;isolation:isolate}
.background {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.gate-wrap {position:absolute;left:50%;top:var(--door-y);transform:translate(-50%,-50%);height:var(--door-height);width:calc(var(--door-height) * 2 / 3);max-width:86vw;z-index:2}
.gate {display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 16px #0005)}
.wood-light {position:absolute;inset:0;background:linear-gradient(105deg,transparent 12%,#ced7e6 49%,transparent 82%);mask-image:url('assets/door.png?v=17');mask-size:100% 100%;mask-repeat:no-repeat;mix-blend-mode:screen;animation:light-breath 23s ease-in-out infinite;opacity:calc(.07 * var(--atmosphere) * var(--layer-light));pointer-events:none}
.vignette {position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse at 50% 53%,transparent 35%,#00000070 100%)}
h1 {position:absolute;top:var(--title-y);left:0;right:0;z-index:6;margin:0;text-align:center;font-size:clamp(27px,3.4vw,50px);font-weight:400;letter-spacing:.035em;color:#d8d8d5;background:linear-gradient(175deg,#f5f5f1 12%,#a3a4a6 38%,#e1e2df 52%,#8e9296 77%,#d9dad7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px #0008)}
button {font:inherit;background:none;color:inherit;border:1px solid #666;border-radius:4px;cursor:pointer;margin-top:10px;padding:5px 9px}
:focus-visible {outline:2px solid #ddd;outline-offset:4px}
@keyframes light-breath {0%,100%{opacity:calc(.05 * var(--atmosphere) * var(--layer-light))}47%{opacity:calc(.15 * var(--atmosphere) * var(--layer-light))}}
.scene[data-paused] *, .scene[data-hidden] * {animation-play-state:paused!important}
@media(max-width:600px) {h1{letter-spacing:.02em}.gate-wrap{height:min(var(--door-height),115vw);width:min(calc(var(--door-height) * 2 / 3),76.666vw)}}
@media(prefers-reduced-motion:reduce) {.scene *{animation:none!important}.wood-light{opacity:calc(.05 * var(--atmosphere) * var(--layer-light))}}

.moving-background{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;visibility:hidden}
.scene[data-renderer="webgl"] .moving-background{visibility:visible}
.scene[data-renderer="webgl"] .background{visibility:hidden}


.edge-occlusion{position:absolute;inset:-12% -18%;z-index:3;overflow:hidden;pointer-events:none;opacity:calc(.30 * var(--atmosphere) * var(--layer-edges));mask-image:radial-gradient(ellipse 14% 38% at 19% 52%,#0009,transparent),radial-gradient(ellipse 14% 38% at 81% 57%,#0009,transparent)}
.edge-wisp{position:absolute;left:-12%;top:-15%;width:124%;height:130%;mix-blend-mode:screen;animation:edge-flow 19s ease-in-out infinite alternate}
@keyframes edge-flow{from{transform:translate(-2%,-9%) scale(1.02);opacity:.55}to{transform:translate(3%,8%) scale(1.06);opacity:1}}
@media(prefers-reduced-motion:reduce){.edge-occlusion{display:none}}

.floor-fog{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:calc(1.35 * var(--atmosphere) * var(--layer-fog));mask-image:linear-gradient(to bottom,transparent var(--fog-start),#000b calc(var(--fog-start) + 13%),#000 100%)}
.fog-stream{position:absolute;left:5%;top:24%;width:90%;height:100%;mix-blend-mode:screen;transform-origin:50% 65%;animation:fog-approach 18s linear infinite;animation-delay:-4s;will-change:transform,opacity}
.fog-b{animation-delay:-13s}
@keyframes fog-approach{0%{transform:translateY(18%) scaleX(1.08);opacity:0}18%{opacity:.88}72%{opacity:.88}100%{transform:translateY(-38%) scaleX(.65);opacity:0}}
@media(prefers-reduced-motion:reduce){.floor-fog{display:none}}

h1[data-font="fraunces"]{font-family:"Fraunces",Georgia,serif;font-weight:400;letter-spacing:.005em}
h1[data-font="cormorant"]{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;letter-spacing:.025em;font-size:clamp(30px,3.9vw,57px)}
h1[data-font="marcellus"]{font-family:"Marcellus",Georgia,serif;font-weight:400;letter-spacing:.025em}
h1[data-font="space"]{font-family:"Space Grotesk",sans-serif;font-weight:400;letter-spacing:-.025em;font-size:clamp(25px,3.1vw,46px)}
.threshold-veil{position:absolute;left:-28%;bottom:-14%;width:156%;height:40%;z-index:4;pointer-events:none;opacity:calc(.9 * var(--atmosphere) * var(--layer-threshold));mask-image:radial-gradient(ellipse 50% 48% at 50% 48%,#000 0%,#000a 28%,#0003 62%,transparent 100%);overflow:hidden}
.threshold-cloud{position:absolute;left:-8%;top:-20%;width:116%;height:140%;mix-blend-mode:screen;animation:threshold-drift 16s ease-in-out infinite alternate}
@keyframes threshold-drift{from{transform:translate(-4%,7%) scaleX(1.08);opacity:.7}to{transform:translate(4%,-6%) scaleX(.96);opacity:1}}
@media(prefers-reduced-motion:reduce){.threshold-veil{display:none}}

/* The heading lives in its own cloud envelope; independent of fog controls. */
.title-clouds{position:absolute;top:var(--title-y);left:0;width:100%;z-index:6;pointer-events:none}
.title-clouds h1{position:relative;top:auto;z-index:1;background:none;-webkit-text-fill-color:initial;padding:0 12px;line-height:1.3}
.title-clouds h1 span{display:inline-block;background:linear-gradient(175deg,#f5f5f1 12%,#a3a4a6 38%,#e1e2df 52%,#8e9296 77%,#d9dad7);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
h1[data-font="metamorphous"]{font-family:"Metamorphous",Georgia,serif;font-size:clamp(23px,3.2vw,46px);letter-spacing:.005em}
h1[data-font="almendra"]{font-family:"Almendra",Georgia,serif;font-size:clamp(30px,4.1vw,60px);letter-spacing:.015em}
h1[data-font="rakkas"]{font-family:"Rakkas",Georgia,serif;font-size:clamp(30px,4vw,58px);letter-spacing:.025em}
h1[data-font="syne"]{font-family:"Syne",sans-serif;font-weight:700;font-size:clamp(24px,3.6vw,52px);letter-spacing:-.025em}
.title-mist{position:absolute;left:50%;top:50%;width:min(1050px,130vw);height:clamp(140px,18vw,210px);z-index:2;transform:translate(-50%,-50%);mix-blend-mode:screen;opacity:0;pointer-events:none}
.has-js .title-clouds h1 span{opacity:.015;filter:blur(9px)}
.scene[data-title-reveal] h1 span{animation:title-condense 6s cubic-bezier(.25,.1,.25,1) both;animation-delay:.6s}
.scene[data-title-reveal] h1 span:nth-child(2){animation-delay:1s}
.scene[data-title-reveal] h1 span:nth-child(3){animation-delay:1.35s}
.scene[data-title-reveal] h1 span:nth-child(4){animation-delay:1.7s}
.scene[data-title-reveal] .title-mist{animation:title-cloud-pass 8.5s ease-in-out both}
@keyframes title-condense{0%{opacity:.015;filter:blur(9px);transform:translateY(7px)}25%{opacity:.15;filter:blur(6px)}65%{opacity:.72;filter:blur(1.8px)}100%{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes title-cloud-pass{0%{opacity:0;transform:translate(-53%,-44%) scale(1.04)}18%{opacity:.72}42%{opacity:.6}75%{opacity:.18}100%{opacity:0;transform:translate(-47%,-58%) scale(1.12)}}
@media(prefers-reduced-motion:reduce){.has-js .title-clouds h1 span,.scene[data-title-reveal] h1 span{opacity:1;filter:none;transform:none;animation:none!important}.title-mist{display:none}}

.approach-wood,.approach-brass{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2;opacity:0}
.approach-wood{filter:brightness(1.25) sepia(.22) saturate(1.15);opacity:calc(var(--proximity-warm,0) * var(--approach-warmth,1) * .5)}
.approach-brass{filter:brightness(1.75) saturate(1.25);mask-image:radial-gradient(ellipse 5% 7% at 45% 58%,#000 30%,transparent 100%),radial-gradient(ellipse 5% 7% at 54% 58%,#000 30%,transparent 100%);opacity:calc(var(--proximity-handles,0) * var(--approach-brass,1) * .8)}
.door-seam{position:absolute;left:49.8%;top:13%;width:2px;height:80%;z-index:3;pointer-events:none;background:linear-gradient(to bottom,transparent,#cfa76c40 10%,#f5d49a 42%,#e7b776 70%,transparent);filter:drop-shadow(0 0 3px #e0b774);opacity:calc(var(--proximity-close,0) * var(--approach-seam,1) * .65)}
.gate-interaction{position:absolute;inset:5% 6%;z-index:8;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:0;touch-action:manipulation}
.gate-interaction:focus-visible{outline:1px solid #d2b99088;outline-offset:5px}

:root{--approach-warmth:1.2;--approach-brass:.8;--approach-seam:.35}

/* One brief arrival, then a stable door. No animation or hidden door without JS. */
.has-js .gate-wrap{opacity:0;transform:translate(-50%,-50%) scale(.96)}
.has-js .gate-wrap .gate{filter:brightness(.18) drop-shadow(0 8px 16px #0005)}
.scene[data-door-intro]:not([data-door-ready]) .gate-wrap{animation:door-materialize 3s cubic-bezier(.22,.61,.36,1) .4s both}
.scene[data-door-intro]:not([data-door-ready]) .gate{animation:door-grain-arrive 3s ease-out .4s both}
.scene[data-door-intro]:not([data-door-ready]) .threshold-veil{animation:threshold-unveil 3s ease-out .4s both}
.scene[data-door-ready] .gate-wrap{opacity:1;transform:translate(-50%,-50%)}
.scene[data-door-ready] .gate{filter:drop-shadow(0 8px 16px #0005)}
.gate-interaction:disabled{pointer-events:none;cursor:default}
@keyframes door-materialize{0%{opacity:0;transform:translate(-50%,-50%) scale(.96)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes door-grain-arrive{0%{filter:brightness(.18) drop-shadow(0 8px 16px #0005)}100%{filter:brightness(1) drop-shadow(0 8px 16px #0005)}}
@keyframes threshold-unveil{0%{opacity:calc(.9 * var(--atmosphere) * var(--layer-threshold) + .4)}100%{opacity:calc(.9 * var(--atmosphere) * var(--layer-threshold))}}
.scene[data-opening-title][data-title-reveal] h1 span{animation-delay:1.7s}
.scene[data-opening-title][data-title-reveal] h1 span:nth-child(2){animation-delay:2.1s}
.scene[data-opening-title][data-title-reveal] h1 span:nth-child(3){animation-delay:2.45s}
.scene[data-opening-title][data-title-reveal] h1 span:nth-child(4){animation-delay:2.8s}
.scene[data-opening-title][data-title-reveal] .title-mist{animation-delay:1.1s}
@media(prefers-reduced-motion:reduce){.has-js .gate-wrap{opacity:1;transform:translate(-50%,-50%)}.has-js .gate-wrap .gate{filter:drop-shadow(0 8px 16px #0005)}}

/* One cloud field, with the lower region clearing before the title region. */
@property --intro-lower-alpha{syntax:"<number>";inherits:false;initial-value:1}
@property --intro-upper-alpha{syntax:"<number>";inherits:false;initial-value:.85}
.arrival-fog{position:absolute;inset:-5% -10%;width:120%;height:110%;z-index:3;pointer-events:none;opacity:0;--intro-lower-alpha:1;--intro-upper-alpha:.85;mask-image:linear-gradient(to bottom,rgba(0,0,0,var(--intro-upper-alpha)) 0%,rgba(0,0,0,var(--intro-upper-alpha)) calc(var(--title-y) + 12%),rgba(0,0,0,var(--intro-lower-alpha)) calc(var(--title-y) + 30%),rgba(0,0,0,var(--intro-lower-alpha)) 100%)}
.arrival-cloud{display:block;width:100%;height:100%;transform-origin:center}
.has-js .arrival-fog{opacity:.94}
.scene[data-door-intro] .arrival-fog{animation:arrival-shared-clear 9.6s linear both}
.scene[data-door-intro] .arrival-cloud{animation:arrival-cloud-part 9.6s ease-out both}
.scene[data-intro-cloud-finished] .arrival-fog{opacity:0;visibility:hidden}
.scene[data-opening-title] .title-mist{display:none}
@keyframes arrival-shared-clear{0%,4%{--intro-lower-alpha:1;--intro-upper-alpha:.85}12%{--intro-lower-alpha:.75;--intro-upper-alpha:.82}25%{--intro-lower-alpha:.2;--intro-upper-alpha:.72}35.4%{--intro-lower-alpha:0;--intro-upper-alpha:.6}65%{--intro-lower-alpha:0;--intro-upper-alpha:.25}100%{--intro-lower-alpha:0;--intro-upper-alpha:0}}
@keyframes arrival-cloud-part{from{transform:translateY(1%) scale(.99)}to{transform:translateY(-3%) scale(1.06)}}
@media(prefers-reduced-motion:reduce){.has-js .arrival-fog{display:none}}