/* ---------- Schriften (lokal, kein Google-CDN) ---------- */
@font-face{font-family:'Great Vibes';src:url('../assets/fonts/GreatVibes-latin.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Great Vibes';src:url('../assets/fonts/GreatVibes-latinext.woff2') format('woff2');
  font-weight:400;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cormorant';src:url('../assets/fonts/Cormorant-latin.woff2') format('woff2');
  font-weight:300 500;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Cormorant';src:url('../assets/fonts/Cormorant-latinext.woff2') format('woff2');
  font-weight:300 500;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --creme:#fff4e2;
  --tinte:#3b342a;
  --gold:#b5623c;        /* Terrakotta - der Akzent der Karte */
  --papier:#f7f2e6;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#33291b;
  color:var(--tinte);
  font-family:'Cormorant',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
body.locked{overflow:hidden}

/* ---------- Umschlag-Intro ---------- */
.screen{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 20%,#5d5140 0%,#33291b 70%);
  transition:opacity .6s ease,visibility .6s;
}
.screen.gone{opacity:0;visibility:hidden;pointer-events:none}
.env-inner{text-align:center;padding:24px}
.env-kicker{
  font-size:clamp(15px,4vw,19px);letter-spacing:.22em;text-transform:uppercase;
  color:#e0bfa6;margin:0 0 34px;font-weight:300;
  opacity:0;animation:fadeUp .9s .2s ease forwards;
}
.envelope{
  background:none;border:0;padding:0;cursor:pointer;display:block;margin:0 auto;
  width:min(74vw,300px);
  opacity:0;animation:fadeUp .9s .5s ease forwards;
  transition:transform .35s cubic-bezier(.2,.8,.3,1);
}
.envelope:hover{transform:translateY(-6px) scale(1.02)}
.envelope:active{transform:translateY(-2px) scale(.99)}
.envelope:focus-visible{outline:2px solid var(--gold);outline-offset:14px;border-radius:8px}
.env-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 40px rgba(0,0,0,.45))}
.env-body{fill:#efe4d0}
.env-flap-back{fill:none;stroke:#e2d3ba;stroke-width:1.5}
.env-seal-ring{fill:none;stroke:var(--gold);stroke-width:1.8;opacity:.6}
.env-flap-shape{fill:#f6efe0;stroke:#d9c8a8;stroke-width:1}
#env-flap{transform-origin:100px 24px;transition:transform .85s cubic-bezier(.5,0,.2,1)}
#env-flap.open{transform:rotateX(180deg) translateY(-2px)}
.env-hint{
  margin:30px 0 0;font-size:15px;letter-spacing:.14em;color:#a68b74;
  opacity:0;animation:fadeUp .9s 1.1s ease forwards,pulse 2.6s 2s ease-in-out infinite;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- Hero ---------- */
.hero{
  position:relative;width:100%;overflow:hidden;background:#33291b;
  height:100svh;                 /* Rueckfall */
  height:100dvh;                 /* besser, aber auf iOS beim ersten Laden unzuverlaessig */
  height:var(--sicht,100dvh);    /* massgeblich: in JS gemessene Viewporthoehe */
}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block}

.skip{
  position:absolute;top:max(16px,env(safe-area-inset-top));right:16px;z-index:20;
  background:rgba(30,24,18,.42);color:#f1e5cf;border:1px solid rgba(240,229,210,.28);
  border-radius:999px;padding:9px 18px;font-family:inherit;font-size:14px;
  letter-spacing:.1em;cursor:pointer;backdrop-filter:blur(6px);
  opacity:0;animation:fadeUp .6s .4s ease forwards;
}
.skip:hover{background:rgba(30,24,18,.62)}

.hero-caption{
  position:absolute;left:0;right:0;bottom:max(calc(env(safe-area-inset-bottom) + 94px),12vh);
  text-align:center;color:var(--creme);z-index:10;
  opacity:0;transform:translateY(16px);
  transition:opacity 1.1s ease,transform 1.1s ease;
  text-shadow:0 3px 22px rgba(20,14,8,.75);
  pointer-events:none;padding:0 20px;
}
.hero-caption.show{opacity:1;transform:none}
.hc-names{
  font-family:'Great Vibes',cursive;
  font-size:clamp(34px,10vw,60px);margin:0;line-height:1.15;
}
.hc-line{
  margin:8px 0 4px;font-size:clamp(12px,3.2vw,15px);
  letter-spacing:.34em;text-transform:uppercase;opacity:.82;font-weight:300;
}
.hc-date{margin:0;font-size:clamp(17px,4.6vw,23px);letter-spacing:.1em;font-weight:300}

.scroll-cue{
  position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--creme);opacity:0;transition:opacity .9s ease;z-index:10;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;pointer-events:none;
}
.scroll-cue.show{opacity:.78;animation:bob 2.4s ease-in-out infinite}
.scroll-cue svg{width:22px;height:22px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ---------- Umschlag: die Karte gleitet heraus ---------- */
.env-buehne{position:relative;perspective:900px}
.env-svg{position:relative;z-index:2}
.env-karte{
  position:absolute;left:6%;right:6%;bottom:14%;
  z-index:1;                       /* steckt zunaechst hinter der Vorderseite */
  background:linear-gradient(168deg,#fffdf6,#f5ecd9);
  border:1px solid rgba(181,98,60,.3);
  padding:16px 12px;text-align:center;
  box-shadow:0 10px 26px rgba(20,14,8,.24);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  transform:translateY(0) scale(.96);
  opacity:0;
}
.ek-namen{
  font-family:'Great Vibes',cursive;font-size:clamp(19px,5.4vw,26px);
  color:#3b342a;line-height:1.1;white-space:nowrap;
}
.ek-linie{width:38%;height:1px;background:rgba(181,98,60,.45)}

/* Ablauf: Klappe auf, Karte steigt heraus, dann nach vorn */
#envelope.offen .env-karte{
  animation:karte-heraus 1.5s .42s cubic-bezier(.22,1,.28,1) forwards;
}
@keyframes karte-heraus{
  0%   {opacity:0;transform:translateY(0) scale(.96);z-index:1}
  22%  {opacity:1;transform:translateY(-8%) scale(.97);z-index:1}
  55%  {opacity:1;transform:translateY(-62%) scale(1.04);z-index:3}
  100% {opacity:1;transform:translateY(-88%) scale(1.14) rotate(-1.4deg);z-index:3}
}
.env-front{fill:#e6d7bc;stroke:#d3c1a0;stroke-width:1}
#envelope.offen .env-svg{
  animation:umschlag-sinkt 1.4s .55s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes umschlag-sinkt{
  to{transform:translateY(9%) scale(.965);opacity:.72}
}
#envelope.offen{pointer-events:none}

@media (prefers-reduced-motion:reduce){
  #envelope.offen .env-karte,#envelope.offen .env-svg{animation:none}
  .env-karte{opacity:1}
}

/* =========================================================
   Breite Bildschirme
   Die Szene ist hochformatig (1000:1800). Auf einem Laptop wurde
   sie so stark beschnitten, dass vom Wagen und der Schrift nichts
   mehr zu sehen war. Also: Szene in voller Hoehe mittig als Buehne,
   daneben dieselbe Allee unscharf und abgedunkelt.
   ========================================================= */
.hero-grund{
  position:absolute;inset:0;overflow:hidden;z-index:0;
  display:none;
}
.hero-grund img{
  position:absolute;inset:-8%;width:116%;height:116%;object-fit:cover;
  filter:blur(34px) brightness(.5) saturate(.85);
  transform:scale(1.08);
}
.hero-grund::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(72% 62% at 50% 46%,rgba(20,15,10,.1),rgba(20,15,10,.72));
}

@media (min-aspect-ratio: 3/4){
  .hero-grund{display:block}
  .scene{
    position:relative;
    height:100%;width:auto;max-width:100%;
    aspect-ratio:1000 / 1800;
    margin-inline:auto;
    box-shadow:0 0 90px rgba(0,0,0,.55);
  }
  .hero{display:flex;align-items:stretch;justify-content:center}
  .hero-caption,.scroll-cue{
    left:50%;transform:translateX(-50%);
    width:min(100%,calc(100svh * 0.5556));
  }
  .hero-caption.show{transform:translateX(-50%)}
}

/* ---------- Die Schreibszene ---------- */
#kerze{
  animation:kerzenflackern 5.2s ease-in-out infinite;
  transform-origin:6% 46%;
}
@keyframes kerzenflackern{
  0%,100%{opacity:1}
  18%    {opacity:.86}
  31%    {opacity:1.06}
  47%    {opacity:.9}
  63%    {opacity:1.03}
  81%    {opacity:.88}
}
@keyframes staub-treiben{
  from{transform:translate3d(0,40px,0);opacity:0}
  16% {opacity:.34}
  84% {opacity:.24}
  to  {transform:translate3d(46px,-260px,0);opacity:0}
}
#feder{will-change:transform}
#feder-schatten{transform:translate(16px,22px)}

@media (prefers-reduced-motion:reduce){
  #kerze,#staub circle{animation:none}
}
.env-seal-herz{fill:var(--gold);opacity:.72}