/* ============================================================
   Lab 15 — Die Bühne · das Finale
   Three.js-Bühnenraum: Vorhang, Spot, Goldstaub, Kamerafahrt.
   ============================================================ */

@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'EB Garamond'; src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  --berry:#8B1A6B; --berry-soft:#A84A8A;
  --gold:#C8A55B; --gold-deep:#A8853F; --gold-soft:#DCC089;
  --plum:#3A1530; --plum-deep:#2A0F22;
  --paper:#FBF8F3; --paper-deep:#E8DDC8;
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:var(--plum-deep);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px; line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

::selection { background:var(--gold); color:var(--plum-deep); }

#stage { position:fixed; inset:0; width:100%; height:100%; z-index:0; }

/* Feines Filmkorn über der Szene */
.grain {
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  opacity:.045; mix-blend-mode:overlay;
}

header, main, footer, .acts-nav { position:relative; z-index:2; }

/* ---------- Kopf ---------- */
.top {
  position:fixed; top:0; left:0; right:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.3rem clamp(1.3rem, 4vw, 3rem);
}
.top__brand { font-family:var(--serif); font-size:1.2rem; color:var(--paper); }
.top__cta {
  font-weight:500; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-soft); text-decoration:none;
  border-bottom:1px solid rgba(220,192,137,.4); padding-bottom:.22em;
  transition:color .3s, border-color .3s;
}
.top__cta:hover { color:var(--gold); border-color:var(--gold); }

/* ---------- Akt-Navigation ---------- */
.acts-nav {
  position:fixed; right:clamp(.9rem, 2.4vw, 2.2rem); top:50%; transform:translateY(-50%);
  z-index:9; display:flex; flex-direction:column; gap:1.3rem;
}
.acts-nav a {
  font-family:var(--serif); font-style:italic; font-size:.88rem;
  color:rgba(251,248,243,.34); text-decoration:none; text-align:center;
  transition:color .4s, transform .4s;
}
.acts-nav a:hover { color:var(--gold-soft); }
.acts-nav a.is-active { color:var(--gold); transform:scale(1.18); }
@media (max-width:720px) { .acts-nav { display:none; } }

/* ---------- Szenen ---------- */
.scene {
  min-height:130vh;
  display:flex; align-items:center;
  padding:0 clamp(1.4rem, 6vw, 6rem);
}
.scene__body {
  max-width:26rem; position:relative;
  padding:2.4rem 0;
}
.scene__body::before {
  content:""; position:absolute; inset:-2.6rem -3.2rem; z-index:-1;
  background:radial-gradient(ellipse 100% 100% at 50% 50%, rgba(26,8,20,.78), transparent 72%);
}
.scene--right { justify-content:flex-end; }
.scene__body--center { margin:0 auto; text-align:center; max-width:34rem; }

.eyebrow {
  font-weight:600; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
}
.hl { font-family:var(--serif); font-style:italic; color:var(--gold-soft); }

.hero__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(3.4rem, 10vw, 7.5rem); line-height:1;
  margin-top:1.2rem;
}
.lead {
  margin:1.7rem auto 0; max-width:32em;
  font-size:clamp(1rem, 1.4vw, 1.1rem); line-height:1.85;
  color:rgba(251,248,243,.8);
}

.scene__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem, 5vw, 3.6rem); line-height:1.08;
  margin-top:1rem;
}
.scene__text { margin-top:1.1rem; font-size:1rem; line-height:1.8; color:rgba(251,248,243,.78); }
.scene__meta {
  margin-top:1.4rem;
  font-family:var(--serif); font-style:italic;
  font-size:.98rem; color:var(--gold);
}

.finale__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 6.4vw, 4.6rem); line-height:1.08;
}
.btn {
  display:inline-block; margin-top:2.4rem;
  font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--plum-deep); background:var(--gold);
  text-decoration:none; border-radius:100px;
  padding:1.15rem 2.6rem;
  transition:background .3s, transform .3s;
}
.btn:hover { background:var(--gold-soft); transform:translateY(-2px); }

/* ---------- Footer ---------- */
.footer {
  text-align:center; padding:3rem 1.4rem 2.4rem;
  background:rgba(26,8,20,.7);
}
.footer__firm {
  font-weight:600; font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-soft);
}
.footer__meta { margin-top:.55rem; font-size:.72rem; color:rgba(251,248,243,.45); }
.footer__lab { margin-top:1.2rem; font-size:.66rem; letter-spacing:.1em; }
.footer__lab a { color:rgba(200,165,91,.65); text-decoration:none; }
.footer__lab a:hover { color:var(--gold); }

/* ---------- Reveals ---------- */
[data-reveal] {
  opacity:0; transform:translateY(24px);
  transition:opacity 1.05s cubic-bezier(.2,.65,.25,1), transform 1.05s cubic-bezier(.2,.65,.25,1);
  transition-delay:var(--d, 0s);
}
[data-reveal].in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity:1; transform:none; transition:none; }
}