/* =============================================================================
   styles.css — VARIANT B: "AURORA" (Dreamy Ethereal)
   The whole world warms as the years pass: --hue (set per slide by app.js) drives
   a smoothly-transitioning background, cool dawn (2020) -> golden glow (2026).
   Bokeh light orbs, glassy glowing polaroids, airy serif. iPhone-11 friendly.
   ============================================================================= */

:root {
  --hue: 210;              /* updated live by app.js (216 -> 30 across the story) */
  --scene: 0;

  --rose: #e29ab0;
  --rose-deep: #c76f8f;
  --terracotta: #e0a36a;
  --gold: #f3c878;
  --ink: #4a3a52;          /* soft plum ink reads on the pale dreamy bg */
  --ink-soft: #7d6a86;
  --paper: rgba(255, 252, 250, 0.72);

  --serif: "Cormorant Garamond", "Fraunces", Georgia, serif;
  --serif-2: "Fraunces", Georgia, serif;
  --hand: "Caveat", "Segoe Script", cursive;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --slide-pad: clamp(1.4rem, 6vw, 3rem);
}

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

html, body {
  height: 100%; width: 100%; overflow: hidden;
  color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

/* The single most important trick: background-color interpolates smoothly, so
   nudging --hue once per slide makes the whole scene drift through the seasons. */
body {
  background-color: hsl(var(--hue), 56%, 90%);
  transition: background-color 1.5s ease;
}
body::before { /* layered dreamy glows on top of the evolving base colour */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 760px at 82% -8%, hsla(var(--hue), 80%, 86%, 0.55), transparent 60%),
    radial-gradient(900px 720px at 6% 108%, hsla(calc(var(--hue) + 40), 75%, 82%, 0.5), transparent 58%),
    radial-gradient(700px 600px at 50% 50%, hsla(var(--hue), 60%, 96%, 0.35), transparent 70%);
  transition: background 1.5s ease;
}

/* ---- aurora bloom layer (gentle, intensifies on finale) ------------------- */
.fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(60% 40% at 30% 20%, hsla(var(--hue), 90%, 85%, 0.25), transparent 70%),
    radial-gradient(50% 40% at 75% 80%, hsla(calc(var(--hue) + 60), 85%, 82%, 0.22), transparent 70%);
  filter: blur(40px); opacity: 0.8;
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  0% { transform: translate3d(-3%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* ---------------- Bokeh light orbs (the .petal flower glyphs, blurred into
   soft coloured lights — reliable across browsers, and genuinely dreamy) ----- */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.petal {
  position: absolute; top: -8vh; opacity: 0;
  filter: blur(2.5px) brightness(1.45) saturate(1.15);
  will-change: transform, opacity; animation: fall linear infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0, -10vh, 0); opacity: 0; }
  12%  { opacity: 0.8; }
  88%  { opacity: 0.8; }
  100% { transform: translate3d(var(--drift, 6vw), 112vh, 0); opacity: 0; }
}

/* =============================== GATE ===================================== */
.gate {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  padding: var(--slide-pad); animation: fadeIn 0.7s ease both;
}
.gate.hide { animation: bloomOut 0.9s ease forwards; }

.gate__card {
  width: min(420px, 100%);
  background: rgba(255, 252, 255, 0.55);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 28px; padding: clamp(1.6rem, 7vw, 2.6rem); text-align: center;
  box-shadow: 0 30px 70px -30px rgba(120, 90, 130, 0.6), inset 0 1px 0 rgba(255,255,255,0.7);
}
.gate__lock { font-size: 2.6rem; animation: floaty 3.5s ease-in-out infinite; }
.gate__title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 7vw, 2.3rem);
  margin: 0.5rem 0 0.4rem; color: var(--rose-deep);
}
.gate__hint { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.gate__form { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.5rem; }
.gate__input {
  font-family: var(--sans); font-size: 1.05rem; padding: 0.85rem 1rem; border-radius: 16px;
  border: 1.5px solid rgba(199, 111, 143, 0.3); background: rgba(255,255,255,0.7); color: var(--ink);
  text-align: center; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.gate__input:focus { border-color: var(--rose); box-shadow: 0 0 0 4px rgba(226, 154, 176, 0.25); }
.gate__btn {
  font-family: var(--sans); font-weight: 500; font-size: 1.05rem; padding: 0.85rem 1rem;
  border: none; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--rose) 0%, var(--terracotta) 100%); cursor: pointer;
  box-shadow: 0 14px 30px -12px rgba(199, 111, 143, 0.8); transition: transform 0.12s ease, box-shadow 0.2s;
}
.gate__btn:active { transform: scale(0.97); }
.gate__error { margin-top: 0.9rem; color: var(--rose-deep); font-size: 0.9rem; }
.shake { animation: shake 0.4s ease; }

/* =============================== STORY ==================================== */
.story { position: fixed; inset: 0; z-index: 10; }
.finale-on .fx { opacity: 1; animation-duration: 10s; }

.slides {
  display: flex; height: 100%; height: 100dvh; width: 100%;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }

.slide {
  position: relative; flex: 0 0 100%; width: 100%; height: 100%;
  scroll-snap-align: center; scroll-snap-stop: always;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--slide-pad) + env(safe-area-inset-top, 0px)) var(--slide-pad)
           calc(var(--slide-pad) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}

.reveal { opacity: 0; transform: translateY(20px); }
.slide.is-active .reveal { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.slide.is-active .reveal.d1 { animation-delay: 0.12s; }
.slide.is-active .reveal.d2 { animation-delay: 0.28s; }
.slide.is-active .reveal.d3 { animation-delay: 0.44s; }

.era {
  font-family: var(--hand); font-size: clamp(1.5rem, 7vw, 2.1rem);
  color: var(--rose-deep); line-height: 1; margin-bottom: 0.4rem;
}
.title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 10vw, 3.9rem);
  line-height: 1.04; color: var(--ink); white-space: pre-line; margin-bottom: 0.7rem;
  letter-spacing: 0.005em;
}
.body {
  font-family: var(--sans); font-weight: 300; font-size: clamp(1rem, 4.4vw, 1.2rem);
  line-height: 1.7; color: var(--ink); max-width: 34ch; white-space: pre-line;
}
.intro .body { margin-top: 0.8rem; color: var(--ink-soft); }

/* ---------------- Glassy glowing polaroids -------------------------------- */
.frames {
  display: flex; flex-wrap: wrap; gap: clamp(0.6rem, 3vw, 1rem);
  justify-content: center; align-items: center; margin-bottom: 1.2rem; max-width: 100%;
}
.polaroid {
  background: var(--paper);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 0.55rem 0.55rem 1.4rem; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 20px 44px -20px rgba(120, 90, 130, 0.6),
              0 0 28px hsla(var(--hue), 80%, 80%, 0.35);
  transform: rotate(var(--tilt, -2deg)); position: relative;
  transition: box-shadow 1.2s ease;
}
.polaroid.has-photo { cursor: pointer; }
.polaroid .ph {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 8px;
  background: repeating-linear-gradient(45deg, #efe2ee 0 12px, #e6d6e9 12px 24px);
  color: transparent;
  filter: saturate(0.78) brightness(0.97) blur(1.5px); transition: filter 1.5s ease;
}
.slide.is-active .ph { filter: saturate(1.05) brightness(1) blur(0); }
.slide.is-active .frames--1 .ph { animation: kenburns 18s ease-out forwards; }

.frames--1 .polaroid { width: min(72vw, 300px); }
.frames--1 .polaroid .ph { aspect-ratio: 4 / 5; }
.frames--2 .polaroid { width: min(42vw, 195px); }
.frames--3 .polaroid { width: min(40vw, 175px); }
.frames--4 { max-width: min(86vw, 380px); }
.frames--4 .polaroid { width: min(38vw, 165px); }
.frames--3 .polaroid:nth-child(3) { transform: rotate(2.5deg); }
.frames .polaroid:nth-child(2) { transform: rotate(2.5deg); }
.frames .polaroid:nth-child(odd) { transform: rotate(-2.5deg); }

.ph[data-empty="1"]::after {
  content: "add photo"; position: absolute; inset: 0.55rem; display: grid; place-items: center;
  font-family: var(--hand); font-size: 1.2rem; color: var(--ink-soft);
}

.caption {
  font-family: var(--hand); font-size: clamp(1.4rem, 6vw, 1.9rem);
  color: var(--rose-deep); margin-top: 0; margin-bottom: 0.6rem;
}
.message .frames { margin-top: 1.2rem; margin-bottom: 0; }

/* ---------------- Finale --------------------------------------------------- */
.finale .title { color: var(--rose-deep); text-shadow: 0 0 36px hsla(var(--hue), 90%, 80%, 0.6); }
.finale .body { font-size: clamp(1.05rem, 4.6vw, 1.3rem); margin-top: 0.6rem; }
.replay {
  margin-top: 1.6rem; font-family: var(--sans); font-size: 0.95rem; padding: 0.7rem 1.5rem;
  border-radius: 999px; border: 1.5px solid var(--rose); background: rgba(255,255,255,0.35);
  color: var(--rose-deep); cursor: pointer; position: relative; z-index: 2;
  transition: transform 0.12s, background 0.2s, color 0.2s;
}
.replay:active { transform: scale(0.96); }
.replay:hover { background: var(--rose); color: #fff; }

.collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.collage__img {
  position: absolute; bottom: -28vh; width: clamp(74px, 17vw, 130px);
  aspect-ratio: 4/5; object-fit: cover; border-radius: 10px;
  border: 4px solid rgba(255,255,255,0.85);
  box-shadow: 0 16px 30px -14px rgba(120,90,130,0.7), 0 0 24px hsla(var(--hue),80%,82%,0.5);
  opacity: 0; transform: translateY(0) rotate(var(--rot, 0deg)) scale(var(--sc, 1));
  animation: floatUp var(--dur, 11s) linear var(--delay, 0s) infinite;
}
@keyframes floatUp {
  0% { transform: translateY(0) rotate(var(--rot)) scale(var(--sc)); opacity: 0; }
  12% { opacity: 0.9; } 85% { opacity: 0.9; }
  100% { transform: translateY(-150vh) rotate(var(--rot)) scale(var(--sc)); opacity: 0; }
}

/* ---------------- Progress bar -------------------------------------------- */
.progress {
  position: absolute; top: calc(0.7rem + env(safe-area-inset-top, 0px));
  left: 50%; transform: translateX(-50%); z-index: 20; display: flex; gap: 5px; width: min(92%, 520px);
}
.progress span { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.4); overflow: hidden; }
.progress span i {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--rose), var(--gold)); transition: width 0.4s ease;
}
.progress span.done i, .progress span.active i { width: 100%; }

/* ---------------- Hint + music -------------------------------------------- */
.hint {
  position: absolute; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 0; right: 0;
  text-align: center; z-index: 20; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.04em;
  color: var(--ink-soft); pointer-events: none; animation: pulse 2.4s ease-in-out infinite; transition: opacity 0.4s;
}
.hint.gone { opacity: 0; }

.music {
  position: absolute; top: calc(1.4rem + env(safe-area-inset-top, 0px));
  right: calc(0.9rem + env(safe-area-inset-right, 0px)); z-index: 25;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -10px rgba(120,90,130,0.6); font-size: 1.05rem; cursor: pointer;
}
.music.playing { animation: spin 6s linear infinite; }

/* ---------------- Lightbox (shared) --------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 6vh 5vw;
  background: hsla(var(--hue), 40%, 20%, 0.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
}
.lightbox.show { opacity: 1; visibility: visible; }
.lightbox__inner { max-width: 92vw; max-height: 86vh; margin: 0; transform: scale(0.92); transition: transform 0.34s cubic-bezier(0.2,0.8,0.2,1); }
.lightbox.show .lightbox__inner { transform: scale(1); }
.lightbox__img {
  display: block; max-width: 92vw; max-height: 74vh; object-fit: contain; border-radius: 12px;
  background: rgba(255,255,255,0.85); padding: 0.6rem; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6);
}
.lightbox__cap {
  font-family: var(--hand); color: #fff; text-align: center; font-size: clamp(1.4rem, 6vw, 2rem); margin-top: 0.6rem;
}

/* ---------------- Tap hearts (shared) ------------------------------------- */
.tap-heart {
  position: fixed; z-index: 35; pointer-events: none; font-size: 1.3rem; transform: translate(-50%, -50%);
  will-change: transform, opacity; animation: heartFloat 1.1s ease-out forwards;
}
@keyframes heartFloat {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); }
  20% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -160%) scale(1.15) rotate(var(--hr, 0deg)); }
}

#confetti-canvas { position: fixed; inset: 0; z-index: 28; pointer-events: none; }

/* =============================== keyframes =============================== */
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bloomOut { to { opacity: 0; transform: scale(1.08); filter: blur(10px); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes kenburns { 0% { transform: scale(1.02); } 100% { transform: scale(1.13) translate(1.5%, -2%); } }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); } 80% { transform: translateX(6px); }
}

/* =============================== a11y ==================================== */
@media (prefers-reduced-motion: reduce) {
  .petals, .fx { display: none; }
  body { transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001s !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
  }
  .slide.is-active .reveal { opacity: 1; transform: none; }
  .slide.is-active .ph { filter: none; }
  .slide.is-active .frames--1 .ph { animation: none; }
}