/* ===========================================================================
   Einladungs-Animation, Version 2 — Aufbau und Choreografie wie bei
   Paperless Post („Cards on Flyer", Trait „Envelope", Schritt „intro").

   Unterschied zu Version 1: Die Lasche startet nicht geschlossen, sondern
   leicht angehoben (−132,5° statt −180°, mit Perspektive zum Betrachter) und
   wirft dabei einen weichen Schatten auf den Umschlag. Der Umschlag sinkt nach
   unten und kommt dabei etwas näher (Maßstab 0,86 → 1), während die Karte im
   Umschlag nach oben steigt, sich aufrichtet und wächst. Die Tasche wird nicht
   ausgeblendet — die Karte verlässt sie nach oben. Alles läuft weicher und
   länger (3 s, cubicInOut).

   Paperless Post sortiert die Ebenen echt in 3D (translateZ, preserve-3d).
   Das ist hier bewusst NICHT nachgebaut: Chrome zeichnet die Tasche nicht
   mehr, sobald die gedrehte Karte sie im selben 3D-Kontext überlappt
   (getestet mit SVG und PNG, mit und ohne Filter). Deshalb wie in Version 1:
   flache Ebenen mit z-index, nur die Lasche dreht in 3D; sie wandert bei
   0,95 s hinter die Karte — da ist sie schon offen und die Karte noch ganz in
   der Tasche, der Wechsel ist unsichtbar.

   Kasten des Umschlags = Figma „Brief offen"-Koordinaten (viewBox 0 210 828
   1178): Laschenspitze bei y 216, Scharnier bei y 794,14, Körper 794–1383.
   Endlage = Figma-Kopf (Desktop 1512 × 905 bzw. Mobil 393 × 524), dieselben
   Variablen wie in Version 1 (--bw/--bh/--s/--ex/--ey, --px, --u).

   Zeiten (ms, aus dem Paperless-Post-Bundle):
     200–2200  Umschlag translate/scale, cubicInOut
     220– 970  Lasche rotateX −132,5° → 0°, sinusoidalOut
     250–1150  Laschenschatten dreht mit und blendet aus (250–950)
     510–2310  Karte steigt im Umschlag auf, cubicInOut
    1500–2300  Karte dreht −90° → 0°, cubicOut
    1600–2800  Karte wächst 0,8 → 1
    2350–2950  Polaroid legt sich auf (eigene Zugabe)
   Keyframes: einladung-v2-keyframes.css (aus gen_css_v2.py).

   Gestartet wird frühestens nach --start-delay (1 s) und erst, wenn die
   Bilder da sind; bis dahin steht der geschlossene Umschlag still und der
   Inhalt darunter nimmt keinen Platz ein (siehe unten).
   =========================================================================== */

.einladung-v2 {
  --bw: 1512;
  --bh: 905;
  --s: 1;
  --ex: 338.04;
  --ey: 84;
  --dauer: 3s;
  /* Ruhepause vor dem Start: der Blick soll erst auf dem
     geschlossenen Umschlag landen. Wird von invitation-hero.js gelesen. */
  --start-delay: 1s;

  /* Über der Entwurfsbreite wächst nichts weiter. Der Kopf war der einzige
     Abschnitt ohne Deckel (Introtext 849, Galerie 1342 px), und weil hier
     ALLES aus --px folgt, wuchs der ganze Umschlag mit: bei 2000 px die Karte
     759 statt 574 breit, das Band 1197 statt 905 hoch. --gutter gehört in
     BEIDE Lagen: fehlt es in --box-left, steht der Umschlag am Ende zu weit
     links (sichtbar); fehlt es in --v2-sx, stimmt das Ende, aber er startet
     244 px weiter links und wandert dorthin — nur im Ablauf zu sehen. */
  --design-width: 1512px;
  --stage: min(100cqw, var(--design-width));
  --px: calc(var(--stage) / var(--bw));
  --gutter: calc((100cqw - var(--stage)) / 2);
  --u: calc(var(--px) * var(--s));
  /* Kasten des Umschlags in der Endlage: Frame-Ursprung (--ex/--ey) liegt bei
     „offen"-Koordinate (3.81, 6); der Kasten beginnt bei (0, 210). */
  --box-left: calc(var(--gutter) + var(--ex) * var(--px) - 3.81 * var(--u));
  --box-top: calc(var(--ey) * var(--px) + 204 * var(--u));
  /* Startversatz: Körpermitte (offen 413.9 / 1088.6) mittig auf der Bühne,
     Umschlag 0,86-fach um die Kastenmitte (offen 414 / 799) skaliert. */
  --v2-s0: 0.86;
  --v2-sx: calc(var(--gutter) + var(--bw) / 2 * var(--px) - var(--box-left) - 414 * var(--u));
  --v2-sy: calc(var(--bh) / 2 * var(--px) - var(--box-top) - 589 * var(--u) - 289.6 * var(--v2-s0) * var(--u));

  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1512 / 905;
  max-height: calc(var(--bh) * var(--design-width) / var(--bw));
  container-type: inline-size;
  background: #246553 url('/media/invitation/hero-pattern.svg') center / cover no-repeat;
}

@media (max-width: 700px) {
  .einladung-v2 {
    --bw: 393;
    --bh: 524;
    --s: 0.4182;
    --ex: 30;
    --ey: 100.55;
    aspect-ratio: 393 / 524;
  }
}

.einladung-v2 svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Der Umschlag-Kasten: bewegt sich als Ganzes, trägt die Perspektive
   (Fluchtpunkt in der Kastenmitte). */
.v2__umschlag {
  position: absolute;
  top: var(--box-top);
  left: var(--box-left);
  width: calc(828 * var(--u));
  height: calc(1178 * var(--u));
  /* Paperless Post: perspective 100vh bei 310 px Laschenhöhe (Faktor 2,3);
     hier dieselbe Relation zur Lasche (578 px) — so wirkt die angehobene
     Lasche wie dort: leicht zum Betrachter geneigt, Spitze knapp über der
     Unterkante des Umschlags. */
  perspective: calc(1340 * var(--u));
  perspective-origin: 50% 50%;
  transform-origin: 50% 50%;
  translate: var(--v2-sx) var(--v2-sy);
  scale: var(--v2-s0);
  animation:
    v2-umschlag-translate var(--dauer) linear both,
    v2-umschlag-scale var(--dauer) linear both;
}

.v2__raum {
  position: absolute;
  inset: 0;
}

.v2__raum > * {
  position: absolute;
  inset: 0;
}

/* Lasche: eigener, laschenhoher Kasten (offen-y 210–794.14), Scharnier =
   Unterkante. Zwei Flächen: innen (Goldfutter) und außen (glatt, um die
   Senkrechte gespiegelt). Liegt anfangs vor allem (z 6), ab 0,95 s hinter der
   Karte (z 2). */
.v2__lasche {
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(584.14 * var(--u));
  z-index: 6;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(-132.5deg);
  animation:
    v2-lasche var(--dauer) linear both,
    v2-lasche-z var(--dauer) step-end both;
}

.v2__lasche > svg {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.v2__lasche-aussen {
  transform: rotateY(180deg);
}

/* Schatten der angehobenen Lasche auf dem Umschlag (Paperless Post:
   „envelopeFrontFlapShadow", blur 12 px). Dreht schneller als die Lasche und
   blendet aus, sobald sie steht. */
.v2__laschenschatten {
  inset: auto;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(584.14 * var(--u));
  z-index: 5;
  transform-origin: 50% 100%;
  transform: rotateX(-132deg);
  opacity: 1;
  filter: blur(calc(12 * var(--u)));
  animation:
    v2-laschenschatten var(--dauer) linear both,
    v2-laschenschatten-opacity var(--dauer) linear both;
}

.v2__laschenschatten svg {
  opacity: 0.28;
}

.v2__rueckseite {
  z-index: 1;
}

.v2__tasche {
  z-index: 4;
}

/* Karte (+ Polaroid) im Umschlagraum. Endlage: offen (147.44, 6) 574 × 717 —
   im Kasten also (147.44, −204). Start: Mittelpunkt auf der Körpermitte,
   quer (−90°), 0,8-fach. */
.v2__karte {
  inset: auto;
  top: calc(-204 * var(--u));
  left: calc(147.44 * var(--u));
  width: calc(574 * var(--u));
  height: calc(717 * var(--u));
  z-index: 3;
  transform-origin: 50% 50%;
  translate: calc(-20.5 * var(--u)) calc(724.1 * var(--u));
  rotate: -90deg;
  scale: 0.8;
  animation:
    v2-karte-translate var(--dauer) linear both,
    v2-karte-rotate var(--dauer) linear both,
    v2-karte-scale var(--dauer) linear both;
}

.v2__karte-bild {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(5 * var(--u)) rgb(0 0 0 / 25%));
}

/* Polaroidstreifen wie in Version 1 (Maße aus Figma), legt sich zum Schluss auf. */
.v2__polaroid {
  position: absolute;
  top: calc(167.9 * var(--u));
  left: calc(-124.3 * var(--u));
  width: calc(159.73 * var(--u));
  height: calc(603.17 * var(--u));
  z-index: 2;
  transform-origin: 0 0;
  rotate: -12deg;
  translate: calc(-90 * var(--u)) calc(-70 * var(--u));
  opacity: 0;
  background: #e5e5e5;
  filter: drop-shadow(0 calc(4 * var(--u)) calc(2.5 * var(--u)) rgb(0 0 0 / 25%));
  animation:
    v2-polaroid var(--dauer) linear both,
    v2-polaroid-rotate var(--dauer) linear both,
    v2-polaroid-opacity var(--dauer) linear both;
}

.v2__foto {
  position: absolute;
  left: calc(11.9 * var(--u));
  width: calc(135.9 * var(--u));
  height: calc(135.9 * var(--u));
  overflow: hidden;
  background: #d9d9d9;
}

.v2__foto img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.v2__foto--1 { top: calc(11.9 * var(--u)); }
.v2__foto--2 { top: calc(159.7 * var(--u)); }
.v2__foto--3 { top: calc(307.5 * var(--u)); }
.v2__foto--4 { top: calc(455.4 * var(--u)); }

/* Erst abspielen, wenn die Bilder da sind. */
.einladung-v2:not(.is-playing) * {
  animation-play-state: paused;
}

/* Bis der Umschlag steht, gibt es unter ihm NICHTS — keinen Platz, kein
   Scrollen, keine Fußzeile. `visibility: hidden` stand hier vorher und ließ
   die Höhe stehen: eine weiße Fläche, in der man scrollen konnte, bevor
   irgendetwas zu sehen war.

   Die Spezifität (0,3,0) schlägt jedes `display: grid/flex` der Sektionen
   (0,1,0) und `.invitation-page + .site-footer` (0,2,0). Das Einblenden ist
   eine Animation und kein Übergang: ein Übergang von `display: none` aus
   läuft nicht. */
@media (prefers-reduced-motion: no-preference) {
  .invitation-page:not(.invitation-page--hero-finished) > .einladung-v2 ~ *,
  .invitation-page:not(.invitation-page--hero-finished) + .site-footer {
    display: none;
  }

  .invitation-page--hero-finished > .einladung-v2 ~ * {
    animation: invitation-reveal 450ms ease;
  }
}

@keyframes invitation-reveal {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .einladung-v2 * {
    animation-duration: 0.01s;
  }
}