/* ============================================================
   Für Mama — Geburtstagsseite
   Farben: warmes Papier, Tinte, Rosé, Salbei, Gold
   ============================================================ */

:root {
  --paper:      #fdf6ef;
  --paper-deep: #f6e9dd;
  --ink:        #2f3b4c;
  --ink-soft:   #6a7789;
  --rose:       #d98c9a;
  --rose-deep:  #b96b7c;
  --sage:       #8aa88b;
  --gold:       #c9a44c;

  --serif:  "Cormorant Garamond", Georgia, serif;
  --script: "Great Vibes", "Cormorant Garamond", cursive;

  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }

/* Kein scroll-behavior: smooth — mit dem Mausrad summiert der Browser die
   Ticks sonst zu immer größeren Sprüngen, und die Reise rast nach hinten raus. */

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--serif);
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% 0%,  #fffaf5 0%, transparent 60%),
    radial-gradient(90% 70% at 10% 100%, #fbeef0 0%, transparent 55%),
    radial-gradient(90% 70% at 90% 90%,  #eef3ec 0%, transparent 55%),
    var(--paper);
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; height: 100svh; }

/* Die Bühne ist von Anfang an fertig aufgebaut — der Vorhang deckt sie nur zu.
   So liegt der Brief schon da, wenn die Blumen zur Seite gehen, statt danach
   erst einzublenden. */

#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* Ton-Knopf */
.ton {
  position: fixed;
  z-index: 60;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  width: 2.9rem;
  height: 2.9rem;
  padding: .65rem;
  border: 0;
  border-radius: 999px;
  background: rgba(253, 246, 239, .78);
  box-shadow: 0 .3rem 1rem rgba(120, 96, 80, .18);
  backdrop-filter: blur(4px);
  color: var(--rose-deep);
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease;
}

.ton:hover { transform: scale(1.06); }

.ton svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ton__box { fill: currentColor; stroke-width: 1.2; }
.ton__kreuz { opacity: 0; }
.ton--aus .ton__wellen { opacity: 0; }
.ton--aus .ton__kreuz { opacity: 1; }

/* ============================================================
   1. Blüten-Vorhang
   ============================================================ */

#curtain {
  position: fixed;
  inset: 0;
  z-index: 40;
  cursor: pointer;
  background: var(--paper);
  transition: background .55s ease-out;
}

.curtain__half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 62%;
  transition: transform 2s var(--ease-out), opacity 1.6s ease-in;
  will-change: transform;
}

.curtain__half--left  { left: 0; }
.curtain__half--right { right: 0; }

.curtain__sheet {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Zur Mitte hin ausblenden, sonst zeichnet sich die Kante zwischen den
   beiden Hälften als gerade Linie ab. */
.curtain__half--left .curtain__sheet {
  -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%);
          mask-image: linear-gradient(to right, #000 84%, transparent 100%);
}

.curtain__half--right .curtain__sheet {
  -webkit-mask-image: linear-gradient(to left, #000 84%, transparent 100%);
          mask-image: linear-gradient(to left, #000 84%, transparent 100%);
}

.blossom {
  position: absolute;
  transform-origin: 50% 50%;
}

.blossom--turning {
  animation: blossom-turn var(--spin, 40s) linear infinite;
  animation-direction: var(--dir, normal);
}

.blossom svg { width: 100%; height: 100%; display: block; }



@keyframes blossom-turn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.curtain__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(2.5rem, 9vh, 6rem);
  transform: translateX(-50%);
  margin: 0;
  z-index: 2;
  width: max-content;
  max-width: 86vw;
  padding: .5rem 1.4rem;
  text-align: center;
  font-size: clamp(1rem, 3.4vw, 1.35rem);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: #4a5364;
  border-radius: 999px;
  background: rgba(253, 246, 239, .82);
  box-shadow: 0 .4rem 1.4rem rgba(120, 96, 80, .16);
  backdrop-filter: blur(3px);
  animation: hint-breathe 3.2s ease-in-out infinite;
}

@keyframes hint-breathe {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

/* geöffnet */
#curtain.is-open { pointer-events: none; background: transparent; }
#curtain.is-open .curtain__half--left  { transform: translateX(-108%) rotate(-7deg); }
#curtain.is-open .curtain__half--right { transform: translateX(108%)  rotate(7deg); }
#curtain.is-open .curtain__hint { opacity: 0; animation: none; transition: opacity .4s ease; }
#curtain.is-gone { display: none; }

/* ============================================================
   2. Szenen-Grundgerüst
   ============================================================ */

.scene {
  position: relative;
  z-index: 10;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
}

/* ============================================================
   3. Umschlag und Brief
   ============================================================ */

.envelope {
  position: relative;
  width: min(88vw, 30rem);
  aspect-ratio: 3 / 2;
  perspective: 1400px;
  cursor: pointer;
}

.envelope__back,
.envelope__front,
.envelope__flap {
  position: absolute;
  inset: 0;
  border-radius: .5rem;
}

.envelope__back {
  background: linear-gradient(160deg, #f7ece0, #efdcc9);
  box-shadow: 0 2.5rem 4rem -1.5rem rgba(70, 52, 40, .35);
}

.envelope__front {
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .1rem;
  padding: clamp(.8rem, 3vw, 1.4rem);
  background: linear-gradient(160deg, #fbf3e9, #f2e2d0);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: transform 1s var(--ease-out), opacity .6s ease;
}

.envelope__to {
  margin: 0;
  font-family: var(--script);
  font-size: clamp(1.9rem, 8vw, 3.1rem);
  line-height: 1;
  color: #2b3b58;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.envelope__from {
  margin: 0;
  font-family: var(--script);
  font-size: clamp(1.05rem, 4vw, 1.6rem);
  color: #46577a;
  opacity: .85;
}

/* Postkarte, auf den Umschlag geklebt */
.postcard {
  position: absolute;
  z-index: 5;
  right: 7%;
  top: 12%;
  width: 36%;
  margin: 0;
  padding: .35rem .35rem .8rem;
  background: #fffdf8;
  border-radius: .15rem;
  transform: rotate(4deg);
  box-shadow: 0 .7rem 1.4rem -.4rem rgba(70, 52, 40, .5);
  transition: transform 1.1s var(--ease-out);
}

.postcard::before,
.postcard::after {
  content: "";
  position: absolute;
  top: -.55rem;
  width: 2.4rem;
  height: 1.1rem;
  background: rgba(216, 199, 176, .55);
  box-shadow: 0 1px 2px rgba(70, 52, 40, .12);
}

.postcard::before { left: -.5rem;  transform: rotate(-24deg); }
.postcard::after  { right: -.5rem; transform: rotate(21deg); }

.postcard img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .08rem;
  background: var(--paper-deep);
}

.envelope.is-open .postcard {
  transform: rotate(9deg) translate(12%, 34%) scale(.92);
}

/* Klappe */
.envelope__flap {
  z-index: 4;
  height: 58%;
  inset: 0 0 auto 0;
  background: linear-gradient(180deg, #f9efe3, #f0ddc8);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform 1s var(--ease-soft);
  filter: drop-shadow(0 .35rem .5rem rgba(90, 66, 48, .18));
}

/* Gemaltes Herz oben links auf dem Umschlag */
.seal {
  position: absolute;
  z-index: 6;
  left: 6%;
  top: 7%;
  width: clamp(4rem, 16vw, 5.4rem);
  aspect-ratio: 1;
  transform-origin: 40% 45%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  animation: seal-pulse 3s ease-in-out infinite;
}

.seal svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seal__wash { filter: drop-shadow(0 .18rem .3rem rgba(120, 50, 65, .22)); }

@keyframes seal-pulse {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%      { transform: rotate(-4deg) scale(1.07); }
}

.envelope__hint {
  position: absolute;
  left: 50%;
  bottom: -3rem;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-size: clamp(.9rem, 3vw, 1.05rem);
  letter-spacing: .12em;
  color: var(--ink-soft);
  animation: hint-breathe 3.2s ease-in-out infinite;
}

/* Briefbogen */
.letter {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 8%;
  width: 84%;
  max-width: 24rem;
  transform: translate(-50%, 0) scale(.92);
  opacity: 0;
  padding: clamp(1.2rem, 4vw, 2rem);
  text-align: center;
  border-radius: .35rem;
  background: linear-gradient(#fffdf9, #fdf6ec);
  box-shadow: 0 1.5rem 2.5rem -1rem rgba(70, 52, 40, .3);
  transition: transform 1.4s var(--ease-out) .25s, opacity .8s ease .25s,
              box-shadow 1.4s var(--ease-out) .25s;
  pointer-events: none;
}

.letter__eyebrow {
  margin: 0 0 .4rem;
  font-size: clamp(.68rem, 2.2vw, .85rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
}

.letter__title {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1.05;
  color: var(--rose-deep);
}

.letter__line {
  margin: .5rem 0 0;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-style: italic;
  color: var(--ink);
}

.letter__ornament {
  display: block;
  margin: .9rem auto .6rem;
  width: min(60%, 9rem);
  color: var(--gold);
}
.letter__ornament svg { width: 100%; display: block; }

.letter__cta {
  margin: 0;
  font-size: clamp(.9rem, 3vw, 1.05rem);
  letter-spacing: .1em;
  color: var(--ink-soft);
}

/* geöffneter Zustand */
.envelope.is-open { cursor: default; }
.envelope.is-open .envelope__flap { transform: rotateX(-175deg); }
.envelope.is-open .seal {
  opacity: 0;
  transform: rotate(-14deg) scale(1.5);
  transition: opacity .6s ease, transform .8s var(--ease-out);
  pointer-events: none;
  animation: none;
}
.envelope.is-open .envelope__hint { opacity: 0; animation: none; transition: opacity .3s ease; }
/* Die Karte zieht aus dem Umschlag und fliegt der Betrachterin entgegen */
.envelope.is-open .letter {
  z-index: 5;
  transform: translate(-50%, -62%) translateZ(230px) rotateX(3deg);
  opacity: 1;
  box-shadow: 0 3rem 5rem -1.2rem rgba(70, 52, 40, .42);
}
.envelope.is-open .envelope__front { transform: translateY(6%); }

/* ============================================================
   4. Die Reise durch die Bilder
   ============================================================ */

.journey {
  position: relative;
  z-index: 10;
  height: 1300svh;
  visibility: hidden;
}

body[data-phase="journey"] .journey { visibility: visible; }

.journey__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  perspective: 900px;
  perspective-origin: 50% 50%;
}

.journey__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.photo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vw, 92vh);
  min-width: 17rem;
  margin: 0;
  padding: .7rem .7rem 1.4rem;
  background: #fffdf8;
  border-radius: .2rem;
  box-shadow: 0 1.5rem 3rem -1rem rgba(60, 45, 35, .45);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .1rem;
  background: var(--paper-deep);
}

.photo figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .7rem;
  text-align: center;
  font-family: var(--script);
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  color: #3b4a63;
}

.journey__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3rem);
  transform: translateX(-50%);
  margin: 0;
  z-index: 3;
  font-size: clamp(.85rem, 3vw, 1rem);
  letter-spacing: .18em;
  text-transform: lowercase;
  color: var(--ink-soft);
  animation: hint-breathe 3.2s ease-in-out infinite;
  transition: opacity .6s ease;
}

.journey__hint.is-hidden { opacity: 0; animation: none; }

/* ============================================================
   5. Schluss-Brief
   ============================================================ */

.scene--finale { visibility: hidden; }
body[data-phase="journey"] .scene--finale { visibility: visible; }

.finale__paper {
  position: relative;
  width: min(92vw, 40rem);
  padding: clamp(2rem, 7vw, 4rem) clamp(1.5rem, 6vw, 3.5rem) clamp(4rem, 10vw, 5.5rem);
  text-align: center;
  border-radius: .4rem;
  background: linear-gradient(#fffdf9, #fbf2e6);
  box-shadow: 0 2.5rem 5rem -1.5rem rgba(70, 52, 40, .35);
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-out);
}

.finale__paper.is-visible { opacity: 1; transform: none; }

.finale__eyebrow {
  margin: 0 0 1.5rem;
  font-family: var(--script);
  font-size: clamp(1.8rem, 7vw, 2.6rem);
  color: var(--rose-deep);
}

.finale__text p {
  margin: 0 0 1.2rem;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  line-height: 1.75;
  color: var(--ink);
}

.finale__sign {
  margin: 2.5rem 0 .2rem;
  font-family: var(--script);
  font-size: clamp(2.4rem, 11vw, 4rem);
  line-height: 1.1;
  color: var(--rose-deep);
}

.finale__names {
  margin: 0;
  font-size: clamp(1rem, 3.4vw, 1.2rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.finale__heart {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vw, 2rem);
  width: clamp(1.8rem, 6vw, 2.4rem);
  transform: translateX(-50%);
  color: var(--rose);
  animation: heartbeat 2.4s ease-in-out infinite;
}

.finale__heart svg { width: 100%; display: block; fill: currentColor; }

@keyframes heartbeat {
  0%, 100%  { transform: translateX(-50%) scale(1); }
  14%       { transform: translateX(-50%) scale(1.18); }
  28%       { transform: translateX(-50%) scale(1); }
  42%       { transform: translateX(-50%) scale(1.12); }
}

/* Zeilenweises Einblenden im Schluss-Brief */
.finale__text p,
.finale__sign,
.finale__names {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .9s var(--ease-soft), transform .9s var(--ease-out);
}

.finale__paper.is-visible .finale__text p,
.finale__paper.is-visible .finale__sign,
.finale__paper.is-visible .finale__names {
  opacity: 1;
  transform: none;
}

.finale__paper.is-visible .finale__text p:nth-child(1) { transition-delay: .25s; }
.finale__paper.is-visible .finale__text p:nth-child(2) { transition-delay: .5s; }
.finale__paper.is-visible .finale__text p:nth-child(3) { transition-delay: .75s; }
.finale__paper.is-visible .finale__sign  { transition-delay: 1.05s; }
.finale__paper.is-visible .finale__names { transition-delay: 1.3s; }

/* ============================================================
   Barrierefreiheit
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .blossom--turning,
  .seal,
  .finale__heart,
  .curtain__hint,
  .envelope__hint,
  .journey__hint { animation: none; }
  .curtain__half { transition-duration: .6s; }
}

:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 4px;
}