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

:root {
  --cover-font: "Playfair Display", Georgia, serif;
  --letter-font: "Dancing Script", cursive;
  --ink: #2a1a10;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  font-family: var(--cover-font);
  color: #fff;
}

#app {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}

@media (min-width: 431px) {
  body { background: #1a1a1a; }
  #app {
    margin-top: max(0px, calc((100dvh - 860px) / 2));
    height: min(100dvh, 860px);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  }
}

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s ease, visibility 1.4s;
  pointer-events: none;
}

.scene.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.scene-5.active { z-index: 10; }

.skip-btn {
  position: fixed;
  top: calc(12px + var(--safe-top));
  right: calc(12px + var(--safe-right));
  z-index: 100;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  background: rgba(0,0,0,0.45);
  color: rgba(255,255,255,0.85);
  font: 0.75rem/1 var(--cover-font);
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease, background 0.2s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.skip-btn.visible { opacity: 1; }
.skip-btn:hover, .skip-btn:focus-visible { background: rgba(0,0,0,0.65); outline: none; }
.skip-btn.hidden { display: none; }

/* Vollbild (Mobile) */
.fs-prompt {
  position: fixed;
  bottom: calc(20px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  font: 0.8rem/1 var(--cover-font);
  letter-spacing: 0.03em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fsPulse 2.5s ease-in-out infinite;
}

.fs-prompt.hidden { display: none; }

@keyframes fsPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

html:fullscreen,
html:-webkit-full-screen {
  background: #000;
}

html:fullscreen #app,
html:-webkit-full-screen #app {
  max-width: none;
  width: 100%;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

html:fullscreen body,
html:-webkit-full-screen body {
  background: #000;
}

/* ── Scene 1: Schwarz → Silhouette → Sterne → Schwarz ── */
.scene-1 { background: #000; }

.skyline-wrap {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
}

.scene-1.active .skyline-wrap {
  animation: silhouetteCycle 8.5s ease forwards;
}

@keyframes silhouetteCycle {
  0%   { opacity: 0; transform: scale(1.05); }
  28%  { opacity: 1; transform: scale(1); }
  62%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

.skyline {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 72%;
}

.silhouette-stars {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.sil-star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6);
}

.scene-1.active .sil-star {
  animation: silStarCycle 8.5s ease forwards;
  animation-delay: var(--d, 0s);
}

@keyframes silStarCycle {
  0%, 22%  { opacity: 0; transform: translate(-50%, -50%) scale(0); box-shadow: 0 0 0 transparent; }
  35%      { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
  42%      { opacity: 1; transform: translate(-50%, -50%) scale(1.8); box-shadow: 0 0 14px 5px rgba(255, 255, 255, 0.95), 0 0 32px 12px rgba(200, 220, 255, 0.45); }
  52%      { opacity: 1; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.8), 0 0 24px 8px rgba(200, 220, 255, 0.3); }
  62%      { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  78%      { opacity: 0.2; transform: translate(-50%, -50%) scale(0.6); box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.3); }
  100%     { opacity: 0; transform: translate(-50%, -50%) scale(0); box-shadow: 0 0 0 transparent; }
}

/* ── Shared background ── */
.scene-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Scene 2: Paris bei Nacht ── */
.scene-2 {
  background: #000;
  transition: opacity 0.01ms, visibility 0.01ms;
}

.night-black {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}


.scene-bg--night {
  z-index: 3;
}

.bg-img--night {
  object-position: 36% 46%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 4.5s ease 4s, transform 20s ease 4s;
}

.scene-2.active .bg-img--night {
  opacity: 1;
  transform: scale(1);
}

.night-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}

.scene-2.active .night-lights {
  opacity: 1;
  transition: opacity 0.4s ease 0.6s;
  animation: lightsDim 2.5s ease 12s forwards;
}

@keyframes lightsDim {
  to { opacity: 0.15; }
}

.glow {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--sz, 5px);
  height: var(--sz, 5px);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.scene-2.active .glow {
  animation: glowTwinkle 1.6s ease forwards, glowPulse 3.2s ease-in-out infinite;
  animation-delay: calc(0.8s + var(--d, 0s)), calc(2.4s + var(--d, 0s));
}

.glow--lg { --sz: 7px; }

.glow--gold {
  --sz: 4px;
  background: #ffd86a;
  box-shadow: 0 0 10px 4px rgba(255, 210, 80, 0.9), 0 0 28px 10px rgba(255, 180, 40, 0.4);
}

.glow--warm {
  --sz: 5px;
  background: #ffe8a8;
  box-shadow: 0 0 14px 5px rgba(255, 200, 100, 0.75), 0 0 32px 12px rgba(255, 160, 50, 0.3);
}

.glow--window {
  --sz: 3px;
  background: #ffcc77;
  box-shadow: 0 0 8px 3px rgba(255, 180, 80, 0.65);
}

.glow--red {
  --sz: 3px;
  background: #ff4444;
  box-shadow: 0 0 8px 3px rgba(255, 60, 60, 0.85);
}

.glow--green {
  --sz: 3px;
  background: #44dd66;
  box-shadow: 0 0 8px 3px rgba(60, 220, 80, 0.85);
}

.scene-2.active .glow--red {
  animation: glowTwinkle 1.6s ease forwards, trafficRed 2.4s step-end infinite;
  animation-delay: calc(0.8s + var(--d, 0s)), calc(2.4s + var(--d, 0s));
}

.scene-2.active .glow--green {
  animation: glowTwinkle 1.6s ease forwards, trafficGreen 2.4s step-end infinite;
  animation-delay: calc(0.8s + var(--d, 0s)), calc(2.4s + var(--d, 0s));
}

@keyframes glowTwinkle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  30% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.6); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  75% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes trafficRed {
  0%, 49% { opacity: 0.95; }
  50%, 100% { opacity: 0.15; }
}

@keyframes trafficGreen {
  0%, 49% { opacity: 0.15; }
  50%, 100% { opacity: 0.95; }
}

/* ── Vollbild-Fit (ganzes Bild sichtbar, kein Schwarz) ── */
.scene-bg--fit {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene-bg--eiffel {
  background: linear-gradient(180deg, #e8a598 0%, #f0c4b8 45%, #f5d0c5 100%);
}

.bg-img--fit {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

/* ── Scene 3: Cover Eiffelturm ── */
.scene-3.active .bg-img--eiffel {
  transform-origin: center center;
  animation: eiffelFitKen 5.5s ease-in-out forwards;
}

@keyframes eiffelFitKen {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* ── Scene 4 & 5: Café (Cover + Pan) ── */
.pan-layer--cafe {
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
}

.bg-img--cafe {
  object-position: center 42%;
}

.pan-layer--cafe:not(.pan-layer--hold) {
  transform: scale(1.12) translate(22%, -14%);
}

.scene-4.active .pan-layer--cafe:not(.pan-layer--hold) {
  animation: cafeApproach 6s ease-in-out forwards;
}

@keyframes cafeApproach {
  0% {
    transform: scale(1.12) translate(22%, -14%);
  }
  35% {
    transform: scale(0.98) translate(14%, 3%);
  }
  65% {
    transform: scale(0.88) translate(6%, 5%);
  }
  100% {
    transform: scale(0.8) translate(0%, 1%);
  }
}

.pan-layer--hold {
  transform: scale(0.8) translate(0%, 1%);
}

.scene-5.active .pan-layer--hold {
  animation: cafeHold 18s ease-in-out infinite alternate;
}

@keyframes cafeHold {
  from { transform: scale(0.8) translate(0%, 1%); }
  to   { transform: scale(0.82) translate(-0.5%, 0.5%); }
}

/* ── Pan-Layer Basis ── */
.scene-bg--pan {
  overflow: hidden;
}

.pan-layer {
  position: absolute;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  transform-origin: center center;
  will-change: transform;
}

.pan-layer .bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cafe-ambience {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cafe-ambience--soft .bokeh { opacity: 0.4; }

.shimmer {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30px;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  filter: blur(2px);
  opacity: 0;
  animation: shimmerFlash 4s ease-in-out infinite;
}

.shimmer:nth-child(2) { animation-delay: 2s; }

@keyframes shimmerFlash {
  0%, 80%, 100% { opacity: 0; transform: translateX(-10px); }
  40% { opacity: 0.7; transform: translateX(10px); }
}

.steam {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 16px;
  height: 28px;
  background: radial-gradient(ellipse, rgba(255,255,255,0.35) 0%, transparent 70%);
  filter: blur(3px);
  animation: steamRise 5s ease-in-out infinite;
}

.steam:nth-child(3) { animation-delay: 1.5s; }
.steam:nth-child(4) { animation-delay: 3s; }

@keyframes steamRise {
  0% { opacity: 0; transform: translateY(0) scale(0.7); }
  40% { opacity: 0.55; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-28px) scale(1.1); }
}

.leaf-sway {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 24px;
  height: 16px;
  background: radial-gradient(ellipse, rgba(80,140,60,0.25) 0%, transparent 70%);
  filter: blur(2px);
  animation: leafSway 6s ease-in-out infinite alternate;
}

.leaf-sway:nth-child(2) { animation-delay: 3s; }

@keyframes leafSway {
  from { transform: rotate(-3deg) translateX(0); }
  to { transform: rotate(3deg) translateX(4px); }
}

.bokeh {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 8px);
  height: var(--s, 8px);
  border-radius: 50%;
  background: rgba(255, 220, 140, 0.35);
  filter: blur(2px);
  animation: drift 7s ease-in-out infinite alternate;
}

.bokeh--soft {
  background: rgba(255, 230, 160, 0.2);
  animation-duration: 11s;
}

@keyframes drift {
  from { transform: translate(0, 0); opacity: 0.25; }
  to { transform: translate(6px, -5px); opacity: 0.55; }
}

.scene-hint {
  position: absolute;
  bottom: 18%;
  left: 0;
  right: 0;
  text-align: center;
  font-style: italic;
  font-size: 1.15rem;
  opacity: 0;
  transition: opacity 1.2s ease 4.2s;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7);
  z-index: 2;
}

.scene-4.active .scene-hint { opacity: 0.75; }

/* ── Scene 5: Blur-Modal ── */
.letter-modal {
  position: absolute;
  inset: calc(14px + var(--safe-top)) calc(10px + var(--safe-right)) calc(14px + var(--safe-bottom)) calc(10px + var(--safe-left));
  z-index: 2;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
  background: rgba(255, 252, 248, 0.78);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.scene-5.active .letter-modal {
  opacity: 1;
  transform: translateY(0);
}

.letter-content {
  position: relative;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 26px 20px 30px;
  font-family: var(--letter-font);
  font-size: clamp(1.05rem, 4.2vw, 1.28rem);
  line-height: 1.65;
  color: var(--ink);
}

.letter-content::-webkit-scrollbar {
  display: none;
}

.letter-content p { margin-bottom: 1em; }

.letter-greeting {
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 0.75em !important;
}

.letter-love {
  font-size: 1.18em;
  margin-top: 0.4em;
}

.letter-sign {
  text-align: right;
  font-weight: 600;
  font-size: 1.22em;
  margin-top: 1em !important;
  margin-bottom: 0 !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .scene { transition-duration: 0.01ms; }
  .stars, .glow, .shimmer, .steam, .leaf-sway, .bokeh, .sil-star { animation: none !important; }
  .bg-img--eiffel { animation: none !important; transform: none; }
  .pan-layer, .pan-layer--hold { animation: none !important; }
  .scene-1.active .skyline-wrap { opacity: 1; transform: none; animation: none; }
  .bg-img--night { opacity: 1; transform: none; transition: none; }
  .night-lights { opacity: 0 !important; transition: none; }
  .letter-modal { opacity: 1; transform: none; transition: none; }
}