/* Themes — page starts "neutral"; script.js switches to the real one after the video */
:root[data-theme="girl"]    { --accent: #e88fa8; --accent-soft: #fde6ec; --sky-top: #ffd6e3; --sky-bottom: #fff4e8; }
:root[data-theme="boy"]     { --accent: #4f95cf; --accent-soft: #e2f0fb; --sky-top: #cfe8fb; --sky-bottom: #f3faff; }
:root[data-theme="neutral"] { --accent: #8bbf9f; --accent-soft: #e6f4ea; --sky-top: #fbeec1; --sky-bottom: #f4fbf3; }

body { transition: background-color .8s ease; }
.intro-active { overflow: hidden; }

/* ---------- Intro video ---------- */
.intro {
  position: fixed; inset: 0; z-index: 10;
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
  display: grid; place-items: center;
  transition: opacity .8s ease;
}
.intro.done { opacity: 0; pointer-events: none; }
.intro video { width: 100%; height: 100%; object-fit: contain; }

.play-btn { position: absolute; font-size: 1.3rem; padding: 16px 32px; }

.intro-controls {
  position: absolute; right: 16px; bottom: 16px; left: 16px;
  display: flex; justify-content: flex-end; gap: 10px;
}
.intro-controls .btn { background: rgb(255 255 255 / .85); backdrop-filter: blur(4px); padding: 8px 16px; font-size: .9rem; }

/* ---------- Details (revealed) ---------- */
.details { animation: fadeIn .9s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero {
  text-align: center; padding: clamp(56px, 12vw, 120px) 16px clamp(40px, 8vw, 72px);
  background: linear-gradient(var(--sky-top), var(--sky-bottom));
}
.eyebrow {
  font: 600 clamp(1.4rem, 4vw, 2rem) var(--font-display); color: var(--accent);
  animation: pop .8s .3s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes pop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
.hero h1 { font-size: clamp(2rem, 7vw, 3.8rem); margin: 8px 0; }
.hero-date { color: var(--muted); font-size: 1.1rem; }

main { padding: 40px 0; display: grid; gap: 40px; }

.card {
  background: var(--surface); border-radius: var(--radius); padding: clamp(24px, 5vw, 48px);
  text-align: center; box-shadow: 0 10px 30px rgb(0 0 0 / .06);
}
.message { font-size: 1.15rem; max-width: 560px; margin: 0 auto 20px; }
.parents { font-weight: 600; }
.siblings { color: var(--muted); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.stat {
  background: var(--accent-soft); border-radius: var(--radius); padding: 20px 16px;
  display: grid; gap: 4px; text-align: center;
}
.stat .icon { font-size: 1.6rem; }
.stat .label { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.stat .value { font: 600 1.1rem var(--font-display); }

.gallery-section h2 { text-align: center; margin-bottom: 20px; color: var(--accent); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.gallery figure { background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 18px rgb(0 0 0 / .06); }
.gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gallery figcaption { padding: 10px 14px; font-size: .95rem; color: var(--muted); }

.replay-row { text-align: center; }

/* Confetti burst on reveal */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.confetti span {
  position: absolute; top: -40px; font-size: 1.5rem;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: .2; } }

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .details, .eyebrow { animation: none; }
}