/* ============================================================
   Lab 09 — Manifest · Berry-Poster, kinetische Typografie
   Ein Satz pro Bühne. Das Schlüsselwort kommt zuletzt.
   ============================================================ */

@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-deep:#6E1455; --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:
    radial-gradient(120% 100% at 50% 0%, var(--berry) 0%, var(--berry-deep) 75%) fixed,
    var(--berry-deep);
  color:var(--paper);
  font-family:var(--sans);
  font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------- Fortschritt ---------- */
.progress { position:fixed; top:0; left:0; right:0; height:2px; background:rgba(251,248,243,.14); z-index:30; }
.progress__fill { height:100%; width:0%; background:var(--gold); }

/* ---------- Kopf ---------- */
.top {
  position:fixed; top:2px; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.2rem 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); }

/* ---------- Poster-Bühnen ---------- */
.poster {
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding:4rem clamp(1.4rem, 6vw, 6rem);
  position:relative;
}
.poster__no {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  font-family:var(--serif); font-style:italic;
  font-size:clamp(16rem, 42vw, 34rem); line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(251,248,243,.09);
  user-select:none; pointer-events:none;
}
.poster::after { /* Teil-Marke unten */
  content:attr(data-part);
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  font-family:var(--sans); font-weight:600; font-size:.62rem;
  letter-spacing:.4em; padding-left:.4em; text-transform:uppercase;
  color:rgba(220,192,137,.55);
}

.eyebrow {
  font-weight:600; font-size:.68rem; letter-spacing:.34em; padding-left:.34em;
  text-transform:uppercase; color:var(--gold-soft);
}

.poster__line {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 7.4vw, 6.2rem);
  line-height:1.12; letter-spacing:-.01em;
  max-width:12em;
  margin-top:1.4rem;
  text-wrap:balance;
  position:relative; z-index:1;
}
.poster__line--small { font-size:clamp(2rem, 5vw, 3.6rem); max-width:16em; }
.poster__sub {
  margin-top:1.8rem; max-width:30em;
  font-size:1.02rem; line-height:1.8; color:rgba(251,248,243,.75);
  position:relative; z-index:1;
}

/* ---------- Kinetik ---------- */
.w {
  display:inline-block;
  opacity:0;
  transform:translateY(.55em) rotate(1.6deg);
  transition:opacity .7s cubic-bezier(.2,.65,.25,1), transform .7s cubic-bezier(.2,.65,.25,1);
  transition-delay:var(--wd, 0s);
}
[data-kin].play .w { opacity:1; transform:none; }

.key em {
  font-style:italic; color:var(--gold-soft);
  position:relative; white-space:nowrap;
}
.key em::after { /* Marker-Sweep */
  content:""; position:absolute; left:0; right:0; bottom:.02em;
  height:.06em; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s cubic-bezier(.2,.65,.25,1);
  transition-delay:calc(var(--wd, 0s) + .55s);
}
[data-kin].play .key em::after { transform:scaleX(1); }

/* ---------- Outro ---------- */
.btn {
  display:inline-block; margin-top:3rem;
  font-weight:600; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--berry-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:var(--plum-deep);
}
.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); }

@media (prefers-reduced-motion: reduce) {
  .w { opacity:1; transform:none; transition:none; }
  .key em::after { transform:scaleX(1); transition:none; }
}