/* ── CSS Custom Properties (set dynamically by main.js) ──────── */
:root {
  --primary: #f472b6;
  --accent: #60a5fa;
  --bg: #0f172a;
  --text: #f1f5f9;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.5s ease, color 0.5s ease;
}

/* ── Audio ──────────────────────────────────────────────────────── */
.song {
  display: none;
}

/* ── Theme Toggle ──────────────────────────────────────────────── */
#theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  background: rgba(128, 128, 128, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(128, 128, 128, 0.15);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

#theme-toggle:hover {
  transform: scale(1.1);
  background: rgba(128, 128, 128, 0.2);
}

/* ── Container ─────────────────────────────────────────────────── */
.container {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  text-align: center;
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Section Base ──────────────────────────────────────────────── */
.section {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  pointer-events: none;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

/* ── Greeting ──────────────────────────────────────────────────── */
.greeting-title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 90%;
  overflow-wrap: break-word;
  word-break: break-word;
}

.greeting-name {
  display: block;
  color: var(--primary);
}

.greeting-subtitle {
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 300;
  margin-top: 0.8rem;
  opacity: 0.65;
  max-width: 80%;
}

/* ── Announcement ──────────────────────────────────────────────── */
.section-announcement p {
  font-size: clamp(1.8rem, 6vw, 3rem);
  font-weight: 600;
  padding: 0 1rem;
}

/* ── Chatbox ───────────────────────────────────────────────────── */
.text-box {
  border: 1.5px solid rgba(128, 128, 128, 0.12);
  border-radius: 18px;
  padding: 1.8rem;
  max-width: 540px;
  width: 88%;
  position: relative;
  text-align: left;
  background: rgba(128, 128, 128, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.hbd-chatbox {
  font-size: clamp(0.85rem, 2.2vw, 1rem);
  line-height: 1.8;
  font-weight: 300;
  overflow-wrap: break-word;
  word-break: break-word;
}

.hbd-chatbox span {
  visibility: hidden;
}

.fake-btn {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 0.5rem 1.4rem;
  position: absolute;
  right: 14px;
  bottom: -42px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* ── Ideas ──────────────────────────────────────────────────────── */
.section-ideas .idea-line {
  font-size: clamp(1.2rem, 4vw, 2rem);
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 1.5rem;
  font-weight: 300;
  opacity: 0;
}

.idea-line strong {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 600;
}

.idea-special {
  font-size: clamp(2rem, 6vw, 3.5rem) !important;
  font-weight: 600 !important;
}

.idea-special span {
  display: inline-block;
}

.idea-big-letters {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
}

.idea-big-letters span {
  display: inline-block;
  font-size: clamp(7rem, 22vw, 14rem);
  font-weight: 800;
  color: var(--primary);
}

/* ── Countdown ─────────────────────────────────────────────────── */
.countdown-wrapper {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-num {
  position: absolute;
  font-size: clamp(5rem, 18vw, 10rem);
  font-weight: 800;
  color: var(--accent);
  opacity: 0;
}

.countdown-go {
  position: absolute;
  font-size: clamp(4rem, 15vw, 8rem);
  opacity: 0;
}

/* ── Quote ──────────────────────────────────────────────────────── */
.quote-card {
  max-width: 520px;
  width: 88%;
  padding: 2.5rem;
  border-radius: 20px;
  background: rgba(128, 128, 128, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(128, 128, 128, 0.1);
}

.quote-mark {
  font-size: clamp(2.5rem, 7vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--primary);
  opacity: 0.6;
  display: block;
  margin-bottom: -0.3rem;
}

.quote-text {
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 300;
  line-height: 1.7;
  font-style: italic;
  overflow-wrap: break-word;
}

.quote-author {
  font-size: clamp(0.85rem, 2vw, 1rem);
  margin-top: 1rem;
  opacity: 0.5;
}

/* ── Stars ──────────────────────────────────────────────────────── */
.section-stars {
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.4;
  animation: twinkle 2.5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  0%   { opacity: 0.1; transform: scale(0.8); }
  100% { opacity: 0.8; transform: scale(1.2); }
}

/* ── Fireworks ─────────────────────────────────────────────────── */
.section-fireworks {
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.firework-spark {
  position: absolute;
  border-radius: 50%;
}

/* ── Balloons ──────────────────────────────────────────────────── */
.section-balloons {
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.section-balloons img {
  position: absolute;
  width: clamp(90px, 18vw, 160px);
  height: auto;
}

.section-balloons img:nth-child(even)  { left: 5%; }
.section-balloons img:nth-child(odd)   { right: 5%; }
.section-balloons img:nth-child(3n)    { left: 22%; }
.section-balloons img:nth-child(5n)    { left: 48%; }
.section-balloons img:nth-child(7n)    { left: 68%; }
.section-balloons img:nth-child(11n)   { left: 82%; }

/* ── Profile ───────────────────────────────────────────────────── */
.section-profile {
  z-index: 1;
}

.profile-wrapper {
  position: relative;
  display: inline-block;
}

.profile-picture {
  width: clamp(150px, 35vw, 280px);
  height: clamp(150px, 35vw, 280px);
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 3px solid rgba(128, 128, 128, 0.15);
}

.wish {
  margin-top: 1.2rem;
  max-width: 90%;
}

.wish-hbd {
  font-size: clamp(1.4rem, 4.5vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
}

.wish-hbd span {
  display: inline-block;
}

.wish-text {
  font-size: clamp(0.9rem, 2.8vw, 1.4rem);
  font-weight: 300;
  margin-top: 0.5rem;
  opacity: 0.7;
  overflow-wrap: break-word;
}

/* ── Confetti ──────────────────────────────────────────────────── */
.section-confetti {
  position: fixed !important;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.confetti-dot {
  position: absolute;
  width: 20px;
  visibility: hidden;
}

/* ── Closing ───────────────────────────────────────────────────── */
.section-closing p {
  font-size: clamp(1rem, 3.5vw, 1.8rem);
  font-weight: 300;
  line-height: 1.9;
  padding: 0 1rem;
}

.replay-btn {
  cursor: pointer;
  z-index: 3;
  pointer-events: none;
  color: var(--accent) !important;
  font-weight: 500 !important;
  transition: opacity 0.3s ease;
}

.replay-btn:hover {
  opacity: 0.7;
}

.last-smile {
  font-size: clamp(2rem, 5vw, 3rem) !important;
  display: inline-block;
  margin-top: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

/* ── Small mobile ──────────────────────────────────────────────── */
@media screen and (max-width: 600px) {
  .section {
    padding: 1.2rem 1rem;
  }

  .text-box {
    width: 94%;
    padding: 1.2rem;
  }

  .fake-btn {
    bottom: -36px;
    right: 8px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
  }

  .quote-card {
    width: 92%;
    padding: 1.5rem;
  }

  #theme-toggle {
    width: 38px;
    height: 38px;
    font-size: 1rem;
    top: 0.75rem;
    right: 0.75rem;
  }

  .wish-hbd {
    letter-spacing: 1px;
  }
}

/* ── Landscape mobile ─────────────────────────────────────────── */
@media screen and (max-height: 500px) {
  .section {
    padding: 0.5rem 1rem;
  }

  .greeting-title {
    font-size: clamp(1.8rem, 6vw, 3rem);
  }

  .profile-picture {
    width: clamp(100px, 25vw, 180px);
    height: clamp(100px, 25vw, 180px);
  }

  .wish-hbd {
    font-size: clamp(1.2rem, 3.5vw, 2rem);
  }

  .wish-text {
    font-size: clamp(0.8rem, 2vw, 1.1rem);
  }

  .countdown-num {
    font-size: clamp(4rem, 14vw, 7rem);
  }

  .quote-card {
    padding: 1.2rem;
  }

  .section-announcement p {
    font-size: clamp(1.4rem, 5vw, 2.2rem);
  }
}

/* ── SweetAlert2 ───────────────────────────────────────────────── */
.swal2-popup {
  border-radius: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
   REDESIGN LAYER — "letter written in candlelight"
   Warm serif display + handwritten accents + ambient glow.
   (Appended last so it refines the base styles above.)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-hand: 'Caveat', 'Segoe Script', cursive;
  --glow: 0 0 42px rgba(242, 132, 158, 0.28);
}

/* ── Ambient atmosphere (persistent, behind everything) ────────── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 12%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(70% 60% at 82% 88%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 72%),
    radial-gradient(65% 55% at 15% 78%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 72%);
  opacity: 0.9;
  transition: opacity 0.6s ease;
}
/* faint drifting star dust */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.2px 1.2px at 70% 20%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.6px 1.6px at 40% 70%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.2px 1.2px at 85% 65%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.3px 1.3px at 55% 45%, rgba(255,255,255,0.3), transparent),
    radial-gradient(1.5px 1.5px at 10% 85%, rgba(255,255,255,0.4), transparent);
  opacity: 0.55;
  animation: driftDust 14s ease-in-out infinite alternate;
}
@keyframes driftDust {
  from { transform: translateY(0) scale(1); opacity: 0.4; }
  to   { transform: translateY(-14px) scale(1.03); opacity: 0.65; }
}
/* light mode: soften the glow so paper stays clean */
:root:has(#theme-toggle) { /* noop guard */ }
body:has(#theme-toggle) {}

/* ── Greeting: serif, gradient name, glow ─────────────────────── */
.greeting-title { font-weight: 300; letter-spacing: 0.01em; }
.greeting-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  margin-top: 0.15em;
  background: linear-gradient(105deg, var(--primary), var(--violet) 55%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(242,132,158,0.28));
}
.greeting-subtitle { font-family: var(--font-hand); font-size: clamp(1.2rem, 4vw, 1.8rem); opacity: 0.72; }

/* ── Announcement: warm serif ─────────────────────────────────── */
.section-announcement p {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.35;
  max-width: 16ch;
  margin: 0 auto;
  text-wrap: balance;
}

/* ── Wordplay (signature) ─────────────────────────────────────── */
.section-wordplay { gap: 0.2rem; }
.wp-lead {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  letter-spacing: 0.28em;
  text-transform: lowercase;
  opacity: 0;
  margin-bottom: 0.4rem;
}
.wp-stage {
  position: relative;
  height: clamp(4.5rem, 16vw, 9rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wp-word {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 11vw, 6.5rem);
  line-height: 1;
  opacity: 0;
  padding: 0 0.5rem;
  background: linear-gradient(100deg, var(--primary), var(--accent) 50%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 34px rgba(245,199,126,0.32));
  will-change: transform, opacity, filter;
}
.wp-finale {
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 5.5vw, 2.6rem);
  line-height: 1.3;
  max-width: 20ch;
  margin: 0.8rem auto 0;
  color: var(--text);
  opacity: 0;
  text-wrap: balance;
}

/* ── Gallery (photo memory reel) ──────────────────────────────── */
.section-gallery { gap: 1.2rem; perspective: 1200px; }
.gal-title {
  font-family: var(--font-hand);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  opacity: 0;
}
.gal-reel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.1rem);
  max-width: min(94vw, 780px);
  transform-style: preserve-3d;
}
.gal-card {
  position: relative;
  opacity: 0;
  background: #fffdf9;
  padding: 8px 8px 30px;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
  width: clamp(96px, 22vw, 150px);
  transform-origin: center bottom;
  will-change: transform, opacity;
}
.gal-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 3px;
}
.gal-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  font-family: var(--font-hand);
  font-size: clamp(0.85rem, 2.4vw, 1.15rem);
  color: #3a3050;
  line-height: 1;
}
.gal-subtitle {
  font-family: var(--font-hand);
  font-size: clamp(1rem, 3vw, 1.3rem);
  opacity: 0;
}

/* ── Quote: serif italic + gradient mark ──────────────────────── */
.quote-card {
  border-color: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: 0 0 60px rgba(177,145,232,0.12);
}
.quote-mark {
  font-family: var(--font-display);
  background: linear-gradient(120deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.85;
}
.quote-text { font-family: var(--font-display); font-weight: 400; font-style: italic; }
.quote-author { font-family: var(--font-hand); font-size: clamp(1rem, 2.4vw, 1.3rem); opacity: 0.65; }

/* ── Profile: warmer frame + handwritten wish ─────────────────── */
.profile-wrapper::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: conic-gradient(from 90deg, var(--primary), var(--accent), var(--violet), var(--primary));
  filter: blur(14px);
  opacity: 0.55;
  z-index: -1;
}
.profile-picture { border-color: rgba(255,255,255,0.35); box-shadow: 0 0 40px rgba(242,132,158,0.25); }
.wish-hbd { font-family: var(--font-display); letter-spacing: 1px; text-transform: none; }
.wish-text { font-family: var(--font-hand); font-size: clamp(1.1rem, 3.4vw, 1.7rem); opacity: 0.82; }

/* ── Closing: warm sign-off ───────────────────────────────────── */
.section-closing .closing-text { font-family: var(--font-display); font-weight: 400; }
.replay-btn { font-family: var(--font-hand) !important; font-size: clamp(1.1rem, 3.2vw, 1.6rem) !important; }

/* ── Countdown / stars pick up the warm accents automatically ─── */
.countdown-num {
  background: linear-gradient(120deg, var(--accent), var(--primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Accessibility: honor reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .star { animation: none; opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════
   BACKDROP LAYER — the sunset-lake scene as a living background
   + elevated photo framing & transitions.
   (Appended last; refines everything above.)
   ═══════════════════════════════════════════════════════════════ */

/* 1 ─ The scene itself: fixed, full-cover, with a slow ken-burns drift */
html::before {
  content: "";
  position: fixed;
  inset: -6% -6% -6% -6%;          /* overscan so the drift never shows edges */
  z-index: -3;
  background: url("../img/background.jpeg") center 42% / cover no-repeat;
  transform-origin: 58% 62%;        /* pivot near the sun */
  animation: kenburns 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(-1.2%, 0.6%, 0); }
  to   { transform: scale(1.14) translate3d(1.4%, -1.0%, 0); }
}

/* 2 ─ Readability scrim over the scene (dark mode default) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(15, 7, 34, 0.30) 72%, rgba(12, 5, 28, 0.62) 100%),
    linear-gradient(to bottom, rgba(16, 8, 40, 0.34) 0%, transparent 26%, transparent 62%, rgba(10, 5, 24, 0.55) 100%);
  transition: opacity 0.6s ease, background 0.6s ease;
}

/* 3 ─ A few extra twinkles layered onto the sky (the scene has its own too) */
body::after {
  opacity: 0.35;
  animation-duration: 18s;
}

/* Light mode: wash the scene to a soft pastel so ink text stays crisp */
html[data-mode="light"]::before { filter: brightness(1.28) saturate(0.85); }
html[data-mode="light"] body::before {
  background:
    radial-gradient(120% 95% at 50% 42%, rgba(247,238,230,0.55) 20%, rgba(247,238,230,0.74) 70%, rgba(247,238,230,0.9) 100%);
}
html[data-mode="light"] body::after { opacity: 0.12; }

/* 4 ─ Legibility: give key text a soft shadow so it floats over the scene */
html[data-mode="dark"] .greeting-title,
html[data-mode="dark"] .greeting-subtitle,
html[data-mode="dark"] .section-announcement p,
html[data-mode="dark"] .wp-lead,
html[data-mode="dark"] .wp-finale,
html[data-mode="dark"] .gal-title,
html[data-mode="dark"] .gal-subtitle,
html[data-mode="dark"] .wish-hbd,
html[data-mode="dark"] .wish-text,
html[data-mode="dark"] .section-closing p,
html[data-mode="dark"] .countdown-go {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* gradient-clipped text can't take text-shadow — give it a drop-shadow glow */
html[data-mode="dark"] .greeting-name,
html[data-mode="dark"] .wp-word,
html[data-mode="dark"] .countdown-num {
  filter: drop-shadow(0 3px 20px rgba(0, 0, 0, 0.5))
          drop-shadow(0 0 30px rgba(247, 133, 47, 0.28));
}

/* Glass cards: a touch more presence against the busy scene */
.text-box, .quote-card {
  background: rgba(20, 10, 40, 0.34);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
html[data-mode="light"] .text-box,
html[data-mode="light"] .quote-card {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(120, 80, 160, 0.18);
}

/* ═══════════════════════════════════════════════════════════════
   PHOTO FRAMING — the portrait & the polaroids
   ═══════════════════════════════════════════════════════════════ */

/* ── Portrait: a framed photo that floats, with a sunset halo + light sweep ── */
.section-profile { z-index: 1; }
.profile-wrapper {
  padding: 12px;                     /* a cream photo-mat around the picture */
  border-radius: 50%;
  background: rgba(253, 244, 234, 0.14);
  animation: floaty 6s ease-in-out infinite;
}
.profile-wrapper::after {            /* rotating sunset halo behind the mat */
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(from 210deg,
    var(--accent), var(--primary), var(--violet), var(--accent));
  filter: blur(16px);
  opacity: 0.7;
  z-index: -1;
  animation: spinHalo 12s linear infinite;
}
.profile-picture {
  border: 4px solid rgba(253, 244, 234, 0.9);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), 0 0 46px rgba(247, 133, 47, 0.3);
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes spinHalo { to { transform: rotate(360deg); } }

/* ── Polaroids: real printed photos laid on the dock, with tape + gloss ── */
.gal-card {
  padding: 9px 9px 34px;
  background: linear-gradient(160deg, #fffef9, #f4ece0);
  border-radius: 4px;
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.gal-card::before {                  /* a strip of translucent tape at the top */
  content: "";
  position: absolute;
  top: -12px; left: 50%;
  width: 58px; height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(240,225,190,0.35));
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
}
.gal-card::after {                   /* soft diagonal gloss on the print */
  content: "";
  position: absolute;
  inset: 9px 9px 34px;
  background: linear-gradient(135deg, rgba(255,255,255,0.32) 0%, transparent 42%);
  border-radius: 3px;
  pointer-events: none;
}
.gal-card img { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06); }
.gal-card figcaption { color: #3a2a52; }

/* ── Closing replay: a little glowing pill so it reads as tappable ── */
#replay {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.35em 1.1em;
  border-radius: 999px;
  background: linear-gradient(120deg, var(--primary), var(--accent));
  color: #1a0e2e !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  box-shadow: 0 8px 24px rgba(247,133,47,0.35);
}
#replay:hover { transform: translateY(-2px); opacity: 1; }

/* Theme toggle: match the warm glass */
#theme-toggle {
  background: rgba(20, 10, 40, 0.4);
  border-color: rgba(255, 255, 255, 0.18);
}

/* Reduced motion: calm the ambient motion */
@media (prefers-reduced-motion: reduce) {
  html::before { animation: none; transform: scale(1.08); }
  .profile-wrapper { animation: none; }
  .profile-wrapper::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   V3 — dreamy blurred backdrop · BIG photos · new presentations
        · lots of small delightful motion
   ═══════════════════════════════════════════════════════════════ */

/* ── Soften the scene into a dreamy, blurred backdrop ──────────── */
html::before {
  inset: -14%;                                   /* extra overscan for the blur */
  filter: blur(10px) brightness(0.9) saturate(1.05);
  animation: kenburns 40s ease-in-out infinite alternate;
}
@keyframes kenburns {                            /* redefined bigger to hide blur edges */
  from { transform: scale(1.16) translate3d(-1.4%, 0.8%, 0); }
  to   { transform: scale(1.24) translate3d(1.6%, -1.2%, 0); }
}
/* a hair more veil so the crisp foreground pops off the soft background */
html[data-mode="dark"] body::before {
  background:
    radial-gradient(120% 90% at 50% 42%, transparent 26%, rgba(15, 7, 34, 0.40) 70%, rgba(10, 4, 24, 0.72) 100%),
    linear-gradient(to bottom, rgba(16, 8, 40, 0.42) 0%, transparent 30%, transparent 60%, rgba(9, 4, 22, 0.6) 100%);
}

/* ── Small motion: the name gently shimmers ───────────────────── */
.greeting-name {
  background-size: 220% 100%;
  animation: shimmerText 7s ease-in-out infinite;
}
@keyframes shimmerText {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ═══════════════════════════════════════════════════════════════
   PROFILE — big framed portrait, revealed with a light sweep,
   ringed by twinkling sparkles, swaying gently.
   ═══════════════════════════════════════════════════════════════ */
.section-profile { z-index: 1; gap: 1.4rem; }

.pf-reveal {
  position: relative;
  display: inline-block;
  will-change: transform, opacity, filter;
}

.pf-frame {
  position: relative;
  width: min(80vw, 440px);
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  border: 6px solid rgba(253, 244, 234, 0.94);
  background: #fdf4ea;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(247, 133, 47, 0.32);
  animation: pfSway 6.5s ease-in-out infinite;
}
@keyframes pfSway {
  0%, 100% { transform: rotate(-1.4deg) translateY(0); }
  50%      { transform: rotate(1.4deg)  translateY(-10px); }
}
.pf-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}
.pf-shine {                                        /* the light bar that sweeps across */
  position: absolute;
  top: -10%;
  left: 0;
  width: 55%;
  height: 120%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* sparkles ringing the frame */
.pf-spark {
  position: absolute;
  font-size: clamp(0.9rem, 2.4vw, 1.4rem);
  color: var(--accent);
  opacity: 0;                                      /* GSAP fades these in on cue */
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(247, 133, 47, 0.8));
}
.pf-spark > i {                                     /* inner glyph twinkles on its own */
  display: inline-block;
  font-style: normal;
  animation: sparkTwinkle 2.4s ease-in-out infinite;
}
@keyframes sparkTwinkle {
  0%, 100% { transform: scale(0.7) rotate(0deg);   filter: brightness(0.8); }
  50%      { transform: scale(1.3) rotate(90deg);  filter: brightness(1.6); }
}
.pf-spark:nth-child(2) { top: -3%;  left: 4%;  }
.pf-spark:nth-child(3) { top: 8%;   right: -4%; color: var(--primary); }
.pf-spark:nth-child(4) { top: 46%;  left: -6%; color: var(--violet); }
.pf-spark:nth-child(5) { bottom: 10%; right: -5%; }
.pf-spark:nth-child(6) { bottom: -3%; left: 12%; color: var(--primary); }
.pf-spark:nth-child(7) { top: 32%;  right: 2%;  color: var(--violet); }
.pf-spark:nth-child(2) > i { animation-delay: 0s;   }
.pf-spark:nth-child(3) > i { animation-delay: 0.5s; }
.pf-spark:nth-child(4) > i { animation-delay: 1.0s; }
.pf-spark:nth-child(5) > i { animation-delay: 0.3s; }
.pf-spark:nth-child(6) > i { animation-delay: 0.8s; }
.pf-spark:nth-child(7) > i { animation-delay: 1.3s; }

.wish { margin-top: 0.2rem; }

/* ═══════════════════════════════════════════════════════════════
   GALLERY — cinematic reel: one BIG photo at a time.
   ═══════════════════════════════════════════════════════════════ */
.section-gallery { gap: 1rem; perspective: 1500px; }

.gal-stage {
  position: relative;
  width: min(84vw, 420px);
  height: min(60vh, 520px);
  margin: 0 auto;
  transform-style: preserve-3d;
}
.gal-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  opacity: 0;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
.gal-photo {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 6px solid rgba(253, 244, 234, 0.92);
  background: #fdf4ea;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 46px rgba(160, 108, 255, 0.22);
}
.gal-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-gallery figcaption {
  font-family: var(--font-hand);
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  color: var(--text);
  line-height: 1;
  flex: 0 0 auto;
}
.gal-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.4rem;
}
.gal-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0;
}

/* ── Big photos on short/landscape screens: keep them on-screen ── */
@media screen and (max-height: 620px) {
  .pf-frame { width: min(42vh, 300px); }
  .gal-stage { width: min(60vw, 320px); height: min(70vh, 360px); }
  .section-gallery figcaption { font-size: clamp(1.1rem, 4vw, 1.6rem); }
}