/* ============================================================
   Lab 07 — Grand Foyer · Maestra Privé
   Opernfoyer: Symmetrie, Lüster aus Goldlinien, große Stille.
   Alles langsam. Luxus ist Zeit.
   ============================================================ */

@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;
  --gold:#C8A55B; --gold-deep:#A8853F; --gold-soft:#DCC089;
  --plum:#3A1530;
  --paper:#FBF8F3; --paper-mid:#F3EDE2; --paper-deep:#E8DDC8;
  --ink:#1F1A17; --ink-soft:#4A413B; --ink-mute:#877B71;
  --serif:'EB Garamond', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
}

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

body {
  background:
    radial-gradient(140% 90% at 50% 0%, var(--paper) 55%, var(--paper-mid) 100%) fixed,
    var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px; line-height:1.7;
  text-align:center;
  -webkit-font-smoothing:antialiased;
}

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

/* ---------- Kopf ---------- */
.top {
  padding:2.2rem 1.4rem 0;
  display:flex; flex-direction:column; align-items:center; gap:.2rem;
}
.top__brand { font-family:var(--serif); font-size:1.28rem; color:var(--ink); letter-spacing:.02em; }
.top__sub {
  font-weight:600; font-size:.56rem; letter-spacing:.52em; padding-left:.52em;
  text-transform:uppercase; color:var(--gold-deep);
}

/* ---------- Foyer ---------- */
.foyer {
  min-height:88vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1rem 1.5rem 3rem;
}
.luster {
  width:min(400px, 74vw); height:auto;
  margin-bottom:1rem;
  animation:sway 11s ease-in-out infinite;
  transform-origin:top center;
}
@keyframes sway { 0%,100% { transform:rotate(-.5deg); } 50% { transform:rotate(.5deg); } }
.crystals rect, .crystals circle { animation:twinkle 5.5s ease-in-out infinite; }
.crystals rect:nth-of-type(2) { animation-delay:.9s; }
.crystals rect:nth-of-type(3) { animation-delay:1.8s; }
.crystals rect:nth-of-type(4) { animation-delay:2.7s; }
.crystals rect:nth-of-type(5) { animation-delay:3.4s; }
.crystals rect:nth-of-type(6) { animation-delay:4.1s; }
.drop { animation-delay:2.2s; }
@keyframes twinkle { 0%,100% { opacity:.55; } 50% { opacity:1; } }

.eyebrow {
  font-weight:600; font-size:.64rem; letter-spacing:.42em; padding-left:.42em;
  text-transform:uppercase; color:var(--gold-deep);
}
.hl { font-family:var(--serif); font-style:italic; color:var(--gold-deep); }

.foyer__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(4.2rem, 13vw, 9.5rem);
  line-height:1; letter-spacing:-.01em;
  color:var(--berry);
  margin-top:2rem;
}
.lead {
  margin:2.2rem auto 0; max-width:33em;
  font-size:clamp(1rem, 1.4vw, 1.12rem); line-height:1.9;
  color:var(--ink-soft);
}

/* ---------- Filigran-Trenner ---------- */
.filigree {
  display:flex; align-items:center; justify-content:center; gap:1rem;
  padding:1rem 0 4rem;
}
.filigree__line { width:min(160px, 26vw); height:1px; background:linear-gradient(to right, transparent, var(--gold)); }
.filigree__line:last-child { background:linear-gradient(to left, transparent, var(--gold)); }
.filigree__gem {
  width:7px; height:7px; background:var(--gold-deep);
  transform:rotate(45deg);
}

/* ---------- Säulen ---------- */
.pillars {
  max-width:64rem; margin:0 auto;
  padding:0 1.5rem 5rem;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:0;
}
.pillar {
  padding:1.4rem clamp(1.4rem, 3.5vw, 3rem);
  position:relative;
}
.pillar + .pillar::before {
  content:""; position:absolute; left:0; top:12%;
  height:76%; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(200,165,91,.55), transparent);
}
.pillar__no {
  font-family:var(--serif); font-style:italic;
  font-size:2rem; color:var(--gold-deep);
}
.pillar h2 {
  font-family:var(--serif); font-weight:400;
  font-size:1.55rem; color:var(--berry);
  margin-top:.8rem;
}
.pillar p { margin-top:.9rem; font-size:.94rem; line-height:1.8; color:var(--ink-soft); }

/* ---------- Tafel ---------- */
.plaque-wrap { padding:0 1.5rem 5rem; }
.plaque {
  display:inline-block;
  border:1px solid rgba(168,133,63,.65);
  outline:1px solid rgba(168,133,63,.25);
  outline-offset:5px;
  padding:2.2rem clamp(2rem, 7vw, 4.5rem) 2.4rem;
  background:linear-gradient(180deg, rgba(200,165,91,.05), transparent);
}
.plaque__label {
  font-weight:600; font-size:.6rem; letter-spacing:.42em; padding-left:.42em;
  text-transform:uppercase; color:var(--ink-mute);
}
.plaque__value {
  font-family:var(--serif);
  font-size:clamp(2.4rem, 6vw, 3.6rem);
  color:var(--ink); margin-top:.9rem; line-height:1;
}
.plaque__value span { font-size:.4em; color:var(--ink-mute); font-style:italic; }
.plaque__meta {
  margin-top:1.1rem;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-deep); font-weight:500;
}

/* ---------- Einladung ---------- */
.invite { padding:1rem 1.5rem 7rem; }
.invite__title {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.3rem, 5.6vw, 4rem); line-height:1.1;
  color:var(--berry);
}
.invite__text { margin:1.3rem auto 0; max-width:32em; color:var(--ink-soft); font-size:.98rem; }
.btn {
  display:inline-block; margin-top:2.6rem;
  font-weight:600; font-size:.76rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-deep); text-decoration:none;
  border:1px solid var(--gold);
  padding:1.2rem 3rem;
  transition:background .5s, color .5s, border-color .5s;
}
.btn:hover, .btn:focus-visible { background:var(--berry); color:var(--paper); border-color:var(--berry); }
.btn:focus-visible { outline:2px solid var(--gold); outline-offset:4px; }

/* ---------- Footer ---------- */
.footer {
  padding:3rem 1.4rem 2.4rem;
  border-top:1px solid var(--paper-deep);
  background:var(--paper-mid);
}
.footer__firm {
  font-weight:600; font-size:.64rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--berry);
}
.footer__meta { margin-top:.55rem; font-size:.72rem; color:var(--ink-mute); }
.footer__lab { margin-top:1.2rem; font-size:.66rem; letter-spacing:.1em; }
.footer__lab a { color:var(--gold-deep); text-decoration:none; }
.footer__lab a:hover { color:var(--berry); }

/* ---------- Langsame Reveals ---------- */
[data-slow] {
  opacity:0; transform:translateY(16px);
  transition:opacity 1.7s cubic-bezier(.2,.6,.25,1), transform 1.7s cubic-bezier(.2,.6,.25,1);
  transition-delay:var(--d, 0s);
}
[data-slow].in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  [data-slow] { opacity:1; transform:none; transition:none; }
  .luster, .crystals rect, .crystals circle { animation:none; }
}