body.reader{background:#000;overflow-x:hidden}
body.reader.locked{overflow:hidden;height:100vh}

/* ---------- Intro ---------- */
#intro{position:fixed;inset:0;z-index:60;display:grid;place-items:center;text-align:center;background:#000;overflow:hidden}
.intro__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transform:scale(1.08);animation:introzoom 24s ease-out forwards}
@keyframes introzoom{to{transform:scale(1)}}
.intro__veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.25),rgba(0,0,0,.92) 80%)}
.intro__inner{position:relative;max-width:46rem;padding:2rem}
.intro__inner h1{font:300 clamp(3rem,9vw,7.5rem)/1.02 var(--sans);letter-spacing:-.035em;margin:0 0 1.6rem}
.intro__desc{font:italic 1.25rem/1.6 var(--serif);color:#c3c8d4;margin:0 auto 2.6rem;max-width:34rem}
.intro__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.cta,.ghost{font:500 1rem var(--sans);letter-spacing:.02em;border-radius:99px;padding:.95rem 1.9rem;cursor:pointer;text-decoration:none;display:inline-flex;gap:.6rem;align-items:center;transition:background .4s,border-color .4s,transform .4s}
.cta{background:#f1f3f8;color:#07080b;border:1px solid #f1f3f8}
.cta:hover{background:#fff;transform:translateY(-2px)}
.ghost{background:transparent;color:#d3d8e3;border:1px solid rgba(255,255,255,.28)}
.ghost:hover{border-color:rgba(255,255,255,.7)}
.intro__hint{margin:2rem 0 0;font-size:.82rem;letter-spacing:.08em;color:#7f8594}

/* ---------- HUD ---------- */
#hud{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.4rem;opacity:0;pointer-events:none;transition:opacity 1s}
body.started #hud{opacity:1;pointer-events:auto}
.hud__btn{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#e9ebf0;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;text-decoration:none;font-size:1.1rem;transition:background .3s}
.hud__btn:hover{background:rgba(0,0,0,.6)}
.hud__title{font-size:.78rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5)}
#sound-toggle .off{display:none}
#sound-toggle[aria-pressed="false"] .on{display:none}
#sound-toggle[aria-pressed="false"] .off{display:block}
#progress{position:fixed;z-index:51;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.06)}
#progress i{display:block;height:100%;background:rgba(255,255,255,.75);transform:scaleX(0);transform-origin:0 50%}

/* ---------- Bühne ---------- */
#stage{position:fixed;inset:0;z-index:0;background:#000;overflow:hidden}
.layer{position:absolute;inset:0;visibility:hidden;opacity:0;background:radial-gradient(ellipse at 50% 40%,#151a24,#050608);will-change:opacity}
.layer__par{position:absolute;left:0;right:0;top:-6%;height:112%;will-change:transform}
.layer__img{width:100%;height:100%;object-fit:cover;display:block;transform-origin:50% 50%;will-change:transform;user-select:none}
.layer__tint{position:absolute;inset:0;background:var(--tint,#000);opacity:.38;mix-blend-mode:multiply}
#stage-vignette{position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 30%,rgba(0,0,0,.62) 100%),linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28))}
#fx-flash{position:absolute;inset:0;background:#e9f1ff;opacity:0;visibility:hidden;z-index:6;pointer-events:none}
#fx-fog{position:absolute;inset:-10%;z-index:6;opacity:0;visibility:hidden;pointer-events:none;
  background:
   radial-gradient(45% 40% at 20% 60%,rgba(190,205,210,.55),transparent 70%),
   radial-gradient(50% 45% at 75% 40%,rgba(170,190,195,.5),transparent 70%),
   radial-gradient(60% 50% at 50% 85%,rgba(200,210,215,.45),transparent 70%),
   rgba(120,135,140,.35);
  filter:blur(30px);animation:fogmove 14s ease-in-out infinite alternate}
@keyframes fogmove{from{transform:translate3d(-4%,0,0) scale(1)}to{transform:translate3d(4%,-3%,0) scale(1.12)}}

/* ---------- Text ---------- */
#story{position:relative;z-index:10}
.scene{position:relative;padding:0 6vw}
.scene__head{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1.4rem}
.scene__no{font:300 1.1rem var(--sans);letter-spacing:.5em;color:rgba(255,255,255,.55);padding-left:.5em}
.scene__title{font:300 clamp(2.8rem,8vw,7rem)/1.02 var(--sans);letter-spacing:-.03em;margin:0;text-shadow:0 4px 40px rgba(0,0,0,.7)}
.scene__text{max-width:38rem;margin:0 auto;padding:6vh 0 26vh}
.scene__text .reveal{font:400 clamp(1.3rem,1.9vw,1.75rem)/1.75 var(--serif);color:#f1f2f5;margin:0 0 42vh;text-shadow:0 2px 24px rgba(0,0,0,.85),0 0 3px rgba(0,0,0,.5)}
.scene__text .reveal:last-child{margin-bottom:0}

/* ---------- Ende / Bewertung ---------- */
.end{min-height:100vh;display:grid;place-items:center;text-align:center;padding:12vh 6vw}
.end__inner{display:flex;flex-direction:column;align-items:center;gap:1.4rem}
.end h2{font:300 clamp(2rem,5vw,3.6rem)/1.1 var(--sans);letter-spacing:-.02em;margin:0;text-shadow:0 4px 40px rgba(0,0,0,.8)}
.rate{display:flex;gap:1.4rem;margin:1rem 0 .2rem}
.rate__btn{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:#e9ebf0;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:transform .4s,background .4s,border-color .4s,color .4s}
.rate__btn:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.7)}
.rate__btn[aria-pressed="true"]{background:#f1f3f8;color:#07080b;border-color:#f1f3f8}
.rate__msg{min-height:1.5em;margin:0;color:#aab0bf;font-size:.95rem}
.end .ghost{margin-top:1rem}

@media (prefers-reduced-motion:reduce){
  .intro__bg,#fx-fog{animation:none}
}