/* --------------------------------------------------------------------------
   Szene: Gate → Umschlag → Brief
   -------------------------------------------------------------------------- */
.scene {
  position: relative;
  display: grid;
  place-items: start center;
  gap: 22px;
  min-height: 62vh;
  isolation: isolate;
  z-index: 1;
  perspective: 1200px;
}

/* ---- Umschlag ---- */
.envelope-grid {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  grid-area: 1 / 1;
}

.envelope {
  appearance: none;
  position: relative;
  width: min(480px, 94vw);
  aspect-ratio: 5 / 3.3;
  border: none;
  border-radius: 10px;
  background:
    linear-gradient(160deg, rgba(255, 250, 238, 0.12), rgba(0, 0, 0, 0.16)),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  box-shadow:
    var(--shadow-paper),
    inset 0 0 0 1px rgba(168, 123, 47, 0.25);
  cursor: pointer;
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-romantic), opacity 600ms ease, box-shadow 700ms ease, filter 600ms ease;
  z-index: 3;
}

.envelope:hover {
  transform: translateY(-4px);
}

.envelope:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 5px;
}

/* Goldenes Innenfutter, blitzt unter der Klappe hervor */
.envelope__lining {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  pointer-events: none;
}

.envelope__lining::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(168, 123, 47, 0.5) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #caa45c, #8e6a28);
  clip-path: polygon(0 0, 100% 0, 50% 58%);
  opacity: 0.95;
}

/* Verschlussklappe */
.envelope__flap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(195deg, var(--paper) 12%, var(--paper-warm) 78%, #e3d2b4 100%);
  clip-path: polygon(0 -1%, 100% -1%, 50% 57%);
  filter: drop-shadow(0 3px 4px rgba(61, 38, 22, 0.18));
  transform-origin: top center;
  transition: transform 900ms var(--ease-romantic) 80ms, opacity 400ms ease 700ms;
  z-index: 3;
}

/* Taschen-Falten unten */
.envelope__pocket {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  overflow: hidden;
}

.envelope__pocket::before,
.envelope__pocket::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(61, 38, 22, 0.0), rgba(61, 38, 22, 0.07));
}

.envelope__pocket::before {
  clip-path: polygon(0 18%, 50% 70%, 0 102%);
}

.envelope__pocket::after {
  clip-path: polygon(100% 18%, 50% 70%, 100% 102%);
}

/* Wachssiegel */
.envelope__seal {
  position: absolute;
  left: 50%;
  top: 57%;
  width: clamp(58px, 16vw, 74px);
  height: clamp(58px, 16vw, 74px);
  transform: translate(-50%, -50%);
  border-radius: 47% 53% 51% 49% / 52% 48% 52% 48%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 160, 170, 0.5), transparent 45%),
    radial-gradient(circle at 50% 55%, var(--wax) 0%, var(--wax-deep) 78%);
  box-shadow:
    0 6px 16px rgba(20, 4, 10, 0.55),
    inset 0 2px 4px rgba(255, 190, 190, 0.25),
    inset 0 -4px 8px rgba(30, 4, 12, 0.55);
  display: grid;
  place-items: center;
  z-index: 4;
  pointer-events: none;
  transition: transform 500ms var(--ease-romantic), opacity 400ms ease, box-shadow 450ms ease, filter 450ms ease;
}

/* Das Siegel lädt sich auf, kurz bevor es zerspringt */
.envelope--wake .envelope__seal {
  box-shadow:
    0 0 26px 5px rgba(233, 200, 126, 0.85),
    0 0 60px 14px rgba(224, 143, 164, 0.45),
    inset 0 -4px 8px rgba(30, 4, 12, 0.55);
  filter: brightness(1.35);
}

.envelope__seal::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(233, 200, 126, 0.4);
  opacity: 0.7;
}

.seal-heart {
  font-size: clamp(1.3rem, 4.5vw, 1.7rem);
  line-height: 1;
  color: var(--gold-bright);
  text-shadow: 0 1px 2px rgba(30, 4, 12, 0.8);
  transform: translateY(-1px);
}

/* Empfänger-Label in Schreibschrift */
.envelope__label {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  max-width: 86%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-script);
  font-size: clamp(1.45rem, 6vw, 1.95rem);
  color: #5d4226;
  pointer-events: none;
}

/* Briefmarke oben rechts */
.envelope__stamp {
  position: absolute;
  top: 7%;
  right: 5%;
  width: clamp(40px, 11vw, 52px);
  aspect-ratio: 4 / 4.8;
  background:
    radial-gradient(circle at 50% 42%, var(--rose) 0 26%, transparent 27%),
    linear-gradient(170deg, #fbf3e2, #efe0c4);
  box-shadow: 0 1px 4px rgba(61, 38, 22, 0.25);
  border-radius: 3px;
  pointer-events: none;
  opacity: 0.92;
  transform: rotate(4deg);
  display: grid;
  place-items: center;
}

.envelope__stamp::after {
  content: "♥";
  font-size: clamp(0.85rem, 3vw, 1.05rem);
  color: #fbf3e2;
  transform: translateY(-12%);
}

/* ---- Öffnungs-Sequenz ---- */

/* Phase 1: Umschlag erwacht — sanftes Anheben + Glühen */
.envelope--wake {
  animation: envelopeWake 750ms var(--ease-romantic) forwards;
}

@keyframes envelopeWake {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-7px) scale(1.018); box-shadow: 0 36px 80px rgba(8, 4, 7, 0.6), 0 0 50px rgba(233, 200, 126, 0.22), inset 0 0 0 1px rgba(168, 123, 47, 0.4); }
  100% { transform: translateY(-4px) scale(1.012); box-shadow: 0 32px 72px rgba(8, 4, 7, 0.6), 0 0 36px rgba(233, 200, 126, 0.18), inset 0 0 0 1px rgba(168, 123, 47, 0.35); }
}

/* Phase 2: Siegel bricht und fällt */
.scene--seal-broken .envelope__seal {
  animation: sealBreak 950ms var(--ease-romantic) forwards;
}

@keyframes sealBreak {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  22%  { transform: translate(-50%, -54%) rotate(-7deg) scale(1.12); }
  38%  { transform: translate(-50%, -52%) rotate(5deg) scale(1.06); }
  100% { transform: translate(-50%, 110%) rotate(26deg) scale(0.82); opacity: 0; }
}

/* Phase 3: Klappe öffnet sich */
.scene--open .envelope__flap {
  transform: rotateX(-178deg);
  opacity: 0;
}

/* Der Umschlag löst sich in der Galaxie-Explosion auf und gibt die Bühne frei */
.scene--erupted .envelope {
  opacity: 0;
  transform: scale(1.12);
  filter: blur(3px);
  pointer-events: none;
}

.scene--erupted .envelope-grid {
  pointer-events: none;
}

/* Phase 4: Brief erscheint, Umschlag tritt zurück */
.scene--letter-visible .envelope {
  opacity: 0;
  transform: translateY(34px) scale(0.92);
  pointer-events: none;
  filter: blur(1px);
}

.scene--letter-visible .envelope-grid {
  pointer-events: none;
}

/* Effekt-Ebenen */
.envelope-effects,
.hearts {
  position: absolute;
  inset: -10% -6%;
  pointer-events: none;
  grid-area: 1 / 1;
  z-index: 5;
}

.hearts--active {
  z-index: 6;
}

/* Kerzenfunken (ersetzt Lichtstrahlen/Schockwellen) */
.sparkle {
  position: absolute;
  width: var(--sparkle-size, 6px);
  height: var(--sparkle-size, 6px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: sparkleDrift var(--sparkle-duration, 1100ms) ease-out var(--sparkle-delay, 0ms) forwards;
  opacity: 0;
  filter: blur(0.4px);
}

@keyframes sparkleDrift {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--sparkle-x, 0px)), calc(-50% + var(--sparkle-y, -60px))) scale(1); }
}

/* Goldstaub */
.golden-dust {
  position: absolute;
  width: var(--dust-size, 3px);
  height: var(--dust-size, 3px);
  border-radius: 50%;
  background: var(--dust-color, var(--gold-bright));
  box-shadow: 0 0 6px var(--dust-color, var(--gold-bright));
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: dustFloat var(--dust-duration, 2000ms) ease-out var(--dust-delay, 0ms) forwards;
}

@keyframes dustFloat {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  15%  { opacity: 0.95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dust-x, 0px)), calc(-50% + var(--dust-y, -120px))) scale(1); }
}

/* Schwebende Glut im Hintergrund (ambient) */
.ember {
  position: fixed;
  left: var(--ember-x, 50%);
  bottom: -3vh;
  width: var(--ember-size, 4px);
  height: var(--ember-size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 232, 178, 0.95) 0%, rgba(233, 200, 126, 0.55) 45%, transparent 75%);
  filter: blur(0.5px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: emberRise var(--ember-duration, 14s) linear var(--ember-delay, 0s) infinite;
}

@keyframes emberRise {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) scale(1); }
  12%  { opacity: var(--ember-opacity, 0.5); }
  88%  { opacity: var(--ember-opacity, 0.5); }
  100% { opacity: 0; transform: translate3d(var(--ember-drift, 20px), -106vh, 0) scale(0.6); }
}

/* Herzen */
.heart {
  position: absolute;
  left: var(--heart-origin-x, 50%);
  top: var(--heart-origin-y, 50%);
  width: var(--heart-size, 16px);
  height: var(--heart-size, 16px);
  background: var(--heart-color, var(--rose));
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  opacity: 0;
  animation: heartRise var(--heart-duration, 1600ms) ease-out var(--heart-delay, 0ms) forwards;
  filter: drop-shadow(0 3px 10px rgba(193, 75, 102, 0.45));
}

.heart::before,
.heart::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
}

.heart::before { top: -50%; left: 0; }
.heart::after  { left: -50%; top: 0; }

.heart--mega {
  filter: drop-shadow(0 6px 18px rgba(193, 75, 102, 0.55));
}

.heart--with-trail {
  box-shadow: 0 0 14px rgba(233, 200, 126, 0.5);
}

@keyframes heartRise {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--heart-drift, 0px)), calc(-50% - 260px)) rotate(calc(45deg + var(--heart-spin, 0deg))) scale(0.75);
  }
}