/* Static birthday site — styles ported from the original React/Tailwind build.
   This file uses only custom classes (no Tailwind utility classes), so the
   @import "tailwindcss" was removed and a minimal reset is included instead. */

:root {
  color: #ffffff;
  background: #0e5bd7;
  font-family: "Helvetica Regular", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

html,
body,
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html {
  font-family: "Helvetica Regular", Helvetica, Arial, sans-serif;
}

/* Minimal reset (replaces Tailwind preflight) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

button,
a {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  background: none;
  color: inherit;
  padding: 0;
}

svg {
  display: inline-block;
  vertical-align: middle;
}

.birthday-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: #1466db;
}

.boomerang-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  transform: scale(1.08);
  transform-origin: center;
  background: #1466db;
}

.boomerang-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 63, 178, 0.05);
  box-shadow: inset 0 8rem 8rem rgba(2, 35, 96, 0.08);
}

.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 86px;
  padding: 0 clamp(1.5rem, 4vw, 4.75rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62rem;
  width: fit-content;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand svg { width: 20px; height: 20px; fill: currentColor; }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.8vw, 3rem);
}

.desktop-nav button {
  padding: 0.7rem 0;
  color: rgba(255,255,255,0.92);
  background: transparent;
  font-size: 0.82rem;
  transition: color 180ms ease, transform 180ms ease;
}
.desktop-nav button span { margin-left: 0.26rem; opacity: 0.86; }
.desktop-nav button:hover { color: #fff; transform: translateY(-1px); }

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.55rem;
}

.wish-count {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.25rem 0.9rem 0.25rem 0.25rem;
  border-radius: 0.75rem;
  background: #fff;
  color: #111827;
  font-size: 0.8rem;
  transition: transform 200ms ease;
  box-shadow: 0 10px 28px rgba(13, 51, 120, 0.16);
}
.wish-count:hover { transform: scale(1.05); }
.wish-count:active { transform: scale(0.95); }
.wish-count__icon {
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 0.55rem;
  color: #fff;
  background: #1d4ed8;
}
.wish-count__mobile { display: none; }
.mobile-menu { display: none; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: 0.75rem; color: #fff; }

.hero-copy {
  position: relative;
  z-index: 10;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(9rem, 18vh, 12rem) 1.5rem 11rem;
  text-align: center;
  pointer-events: none;
}
.hero-copy > * { pointer-events: auto; }

.tag {
  margin-bottom: 1.55rem;
  padding: 0.42rem 1rem;
  border-radius: 0.55rem;
  color: #fff;
  background: rgba(255,255,255,0.16);
  font-size: clamp(0.73rem, 1vw, 0.88rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.hero-copy h1 {
  display: flex;
  flex-direction: column;
  margin: 0;
  max-width: 55rem;
  color: #fff;
  font-size: clamp(2.55rem, 5vw, 4.8rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 22px rgba(0, 56, 138, 0.13);
}
.hero-copy h1 span[lang="en"] {
  margin-top: 0.18em;
  font-size: 0.78em;
  letter-spacing: -0.035em;
}

.hero-copy p {
  margin: 1.35rem 0 0;
  max-width: 39rem;
  color: rgba(255,255,255,0.9);
  font-size: clamp(0.84rem, 1.2vw, 1rem);
  line-height: 1.55;
  text-shadow: 0 1px 12px rgba(0, 50, 130, 0.2);
}
.hero-copy p span { opacity: 0.94; }

.hero-actions {
  display: flex;
  gap: 0.72rem;
  margin-top: 1.7rem;
}
.hero-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 11.5rem;
  padding: 0.76rem 1.45rem;
  border-radius: 0.78rem;
  font-size: 0.78rem;
  transition: transform 200ms ease, background-color 200ms ease;
}
.hero-actions button:hover { transform: scale(1.045); }
.hero-actions button:active { transform: scale(0.95); }
.primary-action { background: #fff; color: #111827; box-shadow: 0 12px 32px rgba(23, 62, 128, 0.15); }
.secondary-action { color: #fff; background: rgba(255,255,255,0.05); }

.player {
  position: absolute;
  right: clamp(1rem, 3.5vw, 3.5rem);
  bottom: clamp(1rem, 3vw, 2.4rem);
  z-index: 20;
  width: min(18rem, calc(100vw - 2rem));
}

.track-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.62rem 0.88rem 0.62rem 0.62rem;
  border-radius: 1rem;
  background: #fff;
  color: #111827;
  box-shadow: 0 14px 38px rgba(18, 55, 111, 0.18);
}
.track-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  color: #fff;
  background: #1d4ed8;
}
.track-icon.is-playing svg { animation: pulse-bars 1.1s ease-in-out infinite alternate; }
.track-info { min-width: 0; flex: 1; }
.track-title { overflow: hidden; font-size: 0.78rem; white-space: nowrap; text-overflow: ellipsis; }
.progress { height: 0.22rem; margin-top: 0.62rem; overflow: hidden; border-radius: 99px; background: #e5e7eb; }
.progress span { display: block; height: 100%; border-radius: inherit; background: #1d4ed8; transition: width 300ms linear; }
.times { display: flex; justify-content: space-between; margin-top: 0.28rem; color: #6b7280; font-size: 0.57rem; }

.player-controls { display: flex; align-items: center; gap: 0.48rem; margin-top: 0.55rem; }
.player-controls button {
  display: flex;
  height: 2.45rem;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  border-radius: 1rem;
  background: #fff;
  color: #111827;
  font-size: 0.72rem;
  box-shadow: 0 12px 28px rgba(18, 55, 111, 0.16);
  transition: transform 200ms ease;
}
.player-controls button:hover { transform: scale(1.05); }
.player-controls button:active { transform: scale(0.95); }
.player-controls .heart-button { flex: 0 0 2.45rem; border-radius: 50%; color: #1d4ed8; }

.mobile-nav {
  position: absolute;
  top: 4.4rem;
  left: 1rem;
  right: 1rem;
  z-index: 30;
  display: grid;
  padding: 0.5rem;
  border-radius: 1rem;
  background: rgba(24, 89, 187, 0.36);
}
.mobile-nav button { padding: 0.82rem 1rem; border-radius: 0.75rem; text-align: left; color: rgba(255,255,255,0.94); background: transparent; font-size: 0.84rem; }
.mobile-nav button:hover { background: rgba(255,255,255,0.1); }
.mobile-nav span { opacity: 0.8; margin-left: 0.35rem; }

.wish-dialog-wrap {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(5, 33, 87, 0.32);
  backdrop-filter: blur(8px);
}
.wish-dialog {
  width: min(31rem, 100%);
  padding: 2.2rem;
  border-radius: 1.5rem;
  color: #fff;
  text-align: center;
  background: rgba(20, 87, 188, 0.25);
  box-shadow: 0 28px 80px rgba(5, 31, 75, 0.28);
}
.dialog-close { position: absolute; top: 0.9rem; right: 0.9rem; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #fff; background: rgba(255,255,255,0.1); }
.dialog-icon { display: grid; width: 3rem; height: 3rem; margin: 0 auto 1rem; place-items: center; border-radius: 0.9rem; color: #1d4ed8; background: #fff; }
.dialog-kicker { margin: 0 0 0.75rem; font-size: 0.68rem; letter-spacing: 0.16em; opacity: 0.75; }
.wish-dialog h2 { margin: 0; font-size: clamp(1.55rem, 3vw, 2.1rem); font-weight: 400; line-height: 1.25; }
.wish-dialog > p:not(.dialog-kicker) { margin: 1rem auto 1.5rem; max-width: 25rem; color: rgba(255,255,255,0.82); font-size: 0.86rem; line-height: 1.55; }
.wish-dialog > button:last-child { padding: 0.72rem 1.3rem; border-radius: 0.75rem; color: #1d4ed8; background: #fff; font-size: 0.78rem; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.animate-fade-up { animation: fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }
.delay-4 { animation-delay: 0.55s; }
.delay-5 { animation-delay: 0.75s; }
@keyframes pulse-bars { from { transform: scaleY(0.7); } to { transform: scaleY(1.08); } }

@media (max-width: 767px) {
  .birthday-hero { min-height: 600px; }
  .site-header { min-height: 68px; padding: 0 1rem; grid-template-columns: 1fr auto; }
  .desktop-nav { display: none; }
  .brand { font-size: 0.78rem; }
  .brand svg { width: 18px; height: 18px; }
  .mobile-menu { display: grid; }
  .wish-count__text { display: none; }
  .wish-count__mobile { display: inline; }
  .wish-count { padding-right: 0.62rem; gap: 0.45rem; }
  .hero-copy { padding: 7.2rem 1.1rem 11.2rem; }
  .tag { margin-bottom: 1rem; }
  .hero-copy h1 { font-size: clamp(2.25rem, 10vw, 3.4rem); line-height: 1.07; }
  .hero-copy p { margin-top: 1rem; font-size: 0.78rem; }
  .hero-actions { width: min(22rem, 100%); flex-direction: column; margin-top: 1.25rem; gap: 0.55rem; }
  .hero-actions button { width: 100%; min-width: 0; padding: 0.68rem 1rem; }
  .player { right: 0.9rem; bottom: 0.8rem; width: min(17rem, calc(100vw - 1.8rem)); }
  .track-card { padding: 0.5rem 0.7rem 0.5rem 0.5rem; }
  .track-icon { width: 2.4rem; height: 2.4rem; }
  .player-controls button { height: 2.2rem; }
  .player-controls .heart-button { flex-basis: 2.2rem; }
  .boomerang-bg video { object-position: 52% center; }
}

@media (max-height: 720px) and (min-width: 768px) {
  .site-header { min-height: 66px; }
  .hero-copy { padding-top: 6.6rem; }
  .tag { margin-bottom: 1rem; }
  .hero-copy h1 { font-size: clamp(2.4rem, 4.5vw, 3.7rem); }
  .hero-copy p { margin-top: 0.8rem; }
  .hero-actions { margin-top: 1rem; }
  .player { bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up { animation: none; }
  .track-icon.is-playing svg { animation: none; }
}
/* Five-part birthday audio playlist */
.playlist-audio, .ambient-audio { display: none; }

.track-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.65rem);
  width: min(21rem, calc(100vw - 2rem));
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.96);
  color: #111827;
  box-shadow: 0 18px 48px rgba(9, 43, 100, 0.22);
  backdrop-filter: blur(14px);
  animation: playlist-in 220ms ease-out both;
}

.track-list[hidden] { display: none; }

.track-list__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 0.85rem 0.5rem;
  color: #64748b;
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.track-list > button {
  display: grid;
  grid-template-columns: 1.65rem 1fr auto;
  width: 100%;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 0.8rem;
  background: transparent;
  color: #334155;
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease;
}

.track-list > button:hover,
.track-list > button.is-active {
  background: #eef5ff;
  color: #174ea6;
}

.track-list__number {
  color: #94a3b8;
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.track-list__copy {
  display: grid;
  min-width: 0;
  gap: 0.08rem;
}

.track-list__copy strong {
  overflow: hidden;
  font-size: 0.73rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.track-list__copy small {
  overflow: hidden;
  color: #7c8ca0;
  font-size: 0.58rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.track-icon { border: 0; }

.track-heading {
  display: grid;
  width: 100%;
  gap: 0.06rem;
  padding: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.track-heading:hover .track-title { color: #1d4ed8; }

.track-subtitle {
  overflow: hidden;
  color: #718096;
  font-size: 0.57rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.progress {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.track-count {
  flex: 0 0 auto;
  padding: 0.35rem 0 0.35rem 0.35rem;
  background: transparent;
  color: #64748b;
  font-size: 0.55rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.track-count:hover { color: #1d4ed8; }
.track-error { margin-top: 0.24rem; color: #b91c1c; font-size: 0.55rem; }

@keyframes playlist-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .track-list {
    max-height: min(55vh, 24rem);
    overflow-y: auto;
  }
}
/* Ceremonial main-track moment and licensed classical ambience */
.ambient-toggle {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  gap: 0.42rem;
  padding: 0.45rem 0.72rem;
  border-radius: 0.75rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(10, 65, 158, 0.14);
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.ambient-toggle:hover { transform: translateY(-1px); color: #fff; }
.ambient-toggle.is-on { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ambient-toggle.is-on svg { filter: drop-shadow(0 0 6px rgba(255, 239, 181, 0.72)); }

.music-credit {
  position: absolute;
  left: clamp(1rem, 3.5vw, 3.5rem);
  bottom: clamp(1.15rem, 3vw, 2.55rem);
  z-index: 20;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.52rem;
  letter-spacing: 0.035em;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(4, 43, 113, 0.35);
  transition: color 180ms ease;
}
.music-credit:hover { color: rgba(255, 255, 255, 0.95); }

.birthday-celebration {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.birthday-celebration::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 38%;
  width: min(82vw, 70rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0) 0deg 11deg, rgba(255,250,219,0.16) 12deg 13deg, rgba(255,255,255,0) 14deg 25deg);
  -webkit-mask: radial-gradient(circle, transparent 0 26%, #000 47%, transparent 72%);
  mask: radial-gradient(circle, transparent 0 26%, #000 47%, transparent 72%);
  animation: ceremony-rays 6.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.ceremony-halo {
  position: absolute;
  left: 50%;
  top: 39%;
  width: min(76vw, 54rem);
  aspect-ratio: 1.45;
  transform: translate(-50%, -50%) scale(0.56);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(255,250,215,0.35) 0%, rgba(221,243,255,0.18) 28%, rgba(122,195,255,0.08) 49%, transparent 70%);
  filter: blur(3px);
  animation: ceremony-halo 6.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.ceremony-rings {
  position: absolute;
  left: 50%;
  top: 39%;
  width: min(47vw, 32rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.ceremony-rings span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 247, 206, 0.48);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 28px rgba(215, 241, 255, 0.18), inset 0 0 22px rgba(255, 245, 196, 0.08);
  animation: ceremony-ring 3.8s cubic-bezier(0.16, 0.75, 0.25, 1) both;
}

.ceremony-rings span:nth-child(2) { animation-delay: 0.48s; }
.ceremony-rings span:nth-child(3) { animation-delay: 0.96s; }

.ceremony-flare {
  position: absolute;
  top: 35%;
  width: 34vw;
  height: 3px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,247,207,0.78), rgba(255,255,255,0.95));
  filter: blur(0.35px) drop-shadow(0 0 12px rgba(255, 234, 161, 0.45));
  animation: ceremony-flare 2.4s 0.22s ease-out both;
}
.ceremony-flare--left { right: 50%; transform-origin: right; }
.ceremony-flare--right { left: 50%; transform: rotate(180deg); transform-origin: left; }

.ceremony-particles { position: absolute; inset: 0; }
.ceremony-particles i {
  --x: 50%;
  --delay: 0s;
  --drift: 0px;
  --size: 4px;
  --duration: 4s;
  position: absolute;
  left: var(--x);
  top: 78%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: #fff5c6;
  box-shadow: 0 0 8px rgba(255, 245, 198, 0.85), 0 0 18px rgba(207, 238, 255, 0.5);
  animation: ceremony-particle var(--duration) var(--delay) cubic-bezier(0.2, 0.65, 0.25, 1) both;
}
.ceremony-particles i:nth-child(3n) { background: #d9f3ff; }
.ceremony-particles i:nth-child(4n) { border-radius: 1px; transform: rotate(45deg); }

.ceremony-caption {
  position: absolute;
  left: 50%;
  top: min(64%, 34rem);
  transform: translate(-50%, 12px);
  color: rgba(255, 250, 223, 0.86);
  font-size: clamp(0.5rem, 0.78vw, 0.66rem);
  letter-spacing: 0.34em;
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 0 16px rgba(255, 241, 181, 0.45);
  animation: ceremony-caption 5.8s 0.65s ease both;
}

.birthday-hero.is-celebrating .boomerang-bg { animation: ceremony-camera 7.2s cubic-bezier(0.16, 1, 0.3, 1) both; }
.birthday-hero.is-celebrating .hero-copy h1 { animation: ceremony-title 2.8s 0.18s cubic-bezier(0.16, 1, 0.3, 1) both; }
.birthday-hero.is-celebrating .tag { animation: ceremony-tag 2.2s 0.1s ease both; }
.birthday-hero.is-celebrating .track-card { animation: ceremony-player-glow 4.8s 0.25s ease both; }

@keyframes ceremony-rays {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-9deg) scale(0.62); }
  20% { opacity: 0.7; }
  70% { opacity: 0.28; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(14deg) scale(1.16); }
}
@keyframes ceremony-halo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.48); }
  19% { opacity: 1; }
  64% { opacity: 0.56; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}
@keyframes ceremony-ring {
  0% { opacity: 0; transform: scale(0.45); }
  24% { opacity: 0.75; }
  100% { opacity: 0; transform: scale(1.75); }
}
@keyframes ceremony-flare {
  0% { opacity: 0; scale: 0 1; }
  30% { opacity: 0.95; }
  100% { opacity: 0; scale: 1 1; }
}
@keyframes ceremony-particle {
  0% { opacity: 0; translate: 0 10vh; scale: 0.25; }
  16% { opacity: 0.92; }
  76% { opacity: 0.72; }
  100% { opacity: 0; translate: var(--drift) -74vh; scale: 1.1; }
}
@keyframes ceremony-caption {
  0% { opacity: 0; transform: translate(-50%, 12px); }
  18%, 68% { opacity: 0.86; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}
@keyframes ceremony-camera {
  0% { transform: scale(1.08); filter: saturate(1); }
  32% { transform: scale(1.125); filter: saturate(1.08) brightness(1.035); }
  100% { transform: scale(1.095); filter: saturate(1.02); }
}
@keyframes ceremony-title {
  0% { transform: scale(1); filter: brightness(1); }
  20% { transform: scale(1.035); filter: brightness(1.18) drop-shadow(0 0 20px rgba(255,244,192,0.22)); }
  55% { transform: scale(1.012); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes ceremony-tag {
  0%, 100% { background: rgba(255,255,255,0.16); }
  35% { background: rgba(255,248,217,0.26); box-shadow: 0 0 24px rgba(255, 241, 181, 0.2); }
}
@keyframes ceremony-player-glow {
  0%, 100% { box-shadow: 0 14px 38px rgba(18,55,111,0.18); }
  22%, 58% { box-shadow: 0 18px 48px rgba(8,40,103,0.22), 0 0 0 1px rgba(255,245,202,0.5), 0 0 34px rgba(255,235,157,0.3); }
}

@media (max-width: 980px) {
  .ambient-toggle span { display: none; }
  .ambient-toggle { width: 2.3rem; justify-content: center; padding: 0; }
}

@media (max-width: 767px) {
  .header-actions { gap: 0.38rem; }
  .music-credit { left: 1rem; bottom: 8.7rem; max-width: 12rem; line-height: 1.35; }
  .ceremony-rings { width: min(80vw, 26rem); top: 36%; }
  .ceremony-halo { width: 116vw; top: 36%; }
  .birthday-celebration::before { width: 132vw; top: 36%; }
  .ceremony-caption { top: 61%; letter-spacing: 0.2em; }
  .ceremony-particles i:nth-child(n + 21) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .birthday-hero.is-celebrating .boomerang-bg,
  .birthday-hero.is-celebrating .hero-copy h1,
  .birthday-hero.is-celebrating .tag,
  .birthday-hero.is-celebrating .track-card,
  .birthday-celebration *,
  .birthday-celebration::before { animation: none !important; }
  .birthday-celebration { display: none; }
}

/* ===== 祝福弹幕 ===== */
.danmaku-layer {
  position: absolute;
  top: 4.5rem;
  left: 0;
  right: 0;
  height: calc(clamp(9rem, 18vh, 12rem) - 5.5rem);
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
}

.danmaku-item {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  text-shadow: 0 1px 5px rgba(0, 20, 60, 0.6);
  opacity: 0.7;
  will-change: transform;
  animation-name: danmaku-flow;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes danmaku-flow {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100vw - 100%)); }
}

/* ===== 祝福选择面板 ===== */
.blessing-picker-wrap {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(2, 18, 54, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.blessing-picker-wrap[hidden] { display: none; }

.wish-dialog-wrap[hidden] { display: none; }

.blessing-picker {
  position: relative;
  width: min(560px, 92vw);
  max-height: 86vh;
  overflow: auto;
  padding: 1.75rem 1.6rem 1.4rem;
  border-radius: 1.1rem;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 18, 54, 0.5);
}

.blessing-picker h2 {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.blessing-picker__hint {
  margin: 0 0 1.1rem;
  font-size: 0.88rem;
  opacity: 0.78;
}

.blessing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.blessing-chip {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-start;
  padding: 0.85rem 0.9rem;
  border-radius: 0.9rem;
  text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transition: transform 0.15s ease, background 0.15s ease;
}

.blessing-chip:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.18);
}

.blessing-chip__text {
  font-size: 0.96rem;
  line-height: 1.35;
}

.blessing-chip__count {
  font-size: 0.76rem;
  opacity: 0.72;
}

.blessing-custom {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.blessing-custom input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 0.95rem;
  outline: none;
}

.blessing-custom input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.blessing-custom__send {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  background: #ffffff;
  color: #0e5bd7;
  font-weight: 600;
  white-space: nowrap;
}