@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=Nunito:wght@600;700;800;900&display=swap');

:root {
  color-scheme: light;
  font-family: 'Nunito', 'Gowun Dodum', sans-serif;
  background: #eec9bb;
  color: #fff9ed;
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff8d6; outline-offset: 4px; }
[hidden] { display: none !important; }

.page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  background: radial-gradient(ellipse at center, #f8e4d7, #c88b80);
}
.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: min(100%, 520px);
  height: 100%;
  background: linear-gradient(180deg, #e5b2a3 0%, #e5b2a3 45%, #d89a8b 77%, #b97b70 100%);
  box-shadow: 0 0 50px #77443b55;
}
.stage-background {
  position: absolute;
  inset: 0 0 44%;
  background: url('../images/stage.png') center center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  transition: filter 1.2s ease;
}
.is-open .stage-background { filter: brightness(1.18) saturate(1.05); }
.stage-illumination {
  position: absolute;
  z-index: 2;
  inset: 0 0 44%;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 1.2s ease;
}
.stage-illumination::before, .stage-illumination::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, #fff7db80, #ffe4ad40 55%, transparent 100%); }
.stage-illumination::before { clip-path: polygon(17.5% 0, 22.5% 0, 60.5% 77%, 27.5% 77%); }
.stage-illumination::after { clip-path: polygon(77.5% 0, 82.5% 0, 72.5% 77%, 39.5% 77%); }
.is-open .stage-illumination { opacity: 1; }
/* The lower part of the stage stays visible while the curtain is closed. */
.curtain {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 50%;
  width: 50.5%;
  background: linear-gradient(90deg, #6f363840, transparent 20%, transparent 80%, #713b3d38), url('../images/curtain-velvet.png') center / 100% 100% no-repeat;
  box-shadow: inset 0 -12px 20px #8d514859, inset 0 0 20px #703b3d3b, 0 7px 10px #77493d4d;
  transition: transform 1.2s cubic-bezier(.65, 0, .25, 1);
}
.curtain-left { left: 0; border-radius: 0 0 7px 7px; }
.curtain-right { right: 0; border-radius: 0 0 7px 7px; transform: scaleX(-1); }
.is-open .curtain-left { transform: translateX(-95%); }
.is-open .curtain-right { transform: scaleX(-1) translateX(-95%); }
.stage-shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, #512e302e 0%, transparent 20%, transparent 73%, #6c3b3038 100%); }

/* Each light removes the darkness in its own area, instead of painting over it. */
.ambient-darkness { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stage-light-mask, .candle-light-mask { opacity: 0; transition: opacity .8s ease; }
.is-open .stage-light-mask, .candle-lit .candle-light-mask { opacity: 1; }

.top-mark {
  position: absolute;
  z-index: 6;
  top: max(3.2%, env(safe-area-inset-top));
  left: 0;
  width: 100%;
  text-align: center;
  color: #fff5e5;
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight: 900;
  letter-spacing: .2em;
  text-shadow: 0 2px 4px #73443f;
}
.top-mark span { margin: 0 9px; color: #ffe4ac; }
.message {
  position: absolute;
  z-index: 6;
  top: max(10%, calc(env(safe-area-inset-top) + 42px));
  left: 5%;
  width: 90%;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 5px #7e4445a6;
}
.message button { pointer-events: auto; }
.eyebrow { margin: 0 0 10px; color: #ffe7c9; font-size: clamp(8px, 2vw, 10px); font-weight: 900; letter-spacing: .22em; }
h1, h2 { margin: 0; color: #fffaf1; font-family: 'Gowun Dodum', sans-serif; font-size: clamp(30px, 7.7vw, 42px); line-height: 1.3; letter-spacing: -.055em; }
h1 em, h2 em { color: #ffe3d3; font-style: normal; }
.subtitle { margin: 10px 0 0; color: #fff5ec; font-family: 'Gowun Dodum', sans-serif; font-size: clamp(11px, 3.1vw, 14px); }
.action {
  margin-top: clamp(14px, 2.4vh, 24px);
  padding: 11px 22px;
  color: #9c5157;
  border: 1px solid #fff9ef;
  border-radius: 100px;
  background: linear-gradient(#fffef7, #fae2d4);
  box-shadow: 0 4px 0 #b56e67, 0 8px 16px #6f343456, inset 0 2px 3px #fff;
  font-family: 'Gowun Dodum', sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.action span { padding: 0 3px; color: #d58e87; }
.action:active { transform: translateY(3px); box-shadow: 0 1px 0 #b56e67; }

.birthday-scene { position: absolute; z-index: 3; inset: 55% 5% 0; pointer-events: none; }
.floor-shadow { position: absolute; bottom: 18%; left: 9%; width: 82%; height: 12%; border-radius: 50%; background: #70403738; filter: blur(10px); }
.candle-light { position: absolute; z-index: 0; top: 11%; left: 4%; width: 92%; height: 70%; border-radius: 50%; }
.candle-light::before, .candle-light::after { content: ''; position: absolute; inset: 0; border-radius: inherit; transition: opacity .6s ease; }
.candle-light::before { background: radial-gradient(ellipse, #51373155, transparent 70%); opacity: .65; }
.candle-light::after { background: radial-gradient(ellipse at 50% 40%, #fff5bbdd, #ffdb8b80 28%, #ffd9a43b 52%, transparent 75%); opacity: 0; }
.candle-lit .candle-light::before { opacity: 0; }
.candle-lit .candle-light::after { opacity: 1; }
.character { position: absolute; z-index: 1; width: 27%; height: 46%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 8px 5px #57362b55); }
.character-one { left: 0; top: 6%; transform: rotate(-7deg); }
.character-two { right: 0; top: 6%; transform: rotate(7deg) scaleX(-1); }
.character-three { left: 1%; bottom: 17%; transform: rotate(-5deg); }
.character-four { right: 1%; bottom: 17%; transform: rotate(5deg) scaleX(-1); }
.character-five, .character-six { top: 0; width: 24%; height: 45%; }
.character-five { left: 23%; transform: rotate(-5deg); }
.character-six { right: 23%; transform: rotate(5deg) scaleX(-1); }
.cake-button {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(49%, 29vh);
  aspect-ratio: 1201 / 1310;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  filter: brightness(.85) drop-shadow(0 10px 6px #613f3255);
  transition: filter .6s ease;
}
.cake-button.is-lit { filter: brightness(1.07) drop-shadow(0 10px 6px #613f3255); }
.cake-button img { display: block; width: 100%; height: 100%; object-fit: contain; }
.flame {
  display: none;
  position: absolute;
  top: 7%; left: 46%; width: 8%;
  aspect-ratio: .65;
  border-radius: 75% 20% 70% 35%;
  transform: rotate(-45deg);
  background: radial-gradient(ellipse at 65% 65%, #fffde4 0 18%, #ffd96a 32%, #ff9c41 67%, #ff6f44 100%);
  box-shadow: 0 0 12px 5px #ffcd5c99, 0 0 25px 10px #ff9e5a66;
}
.is-lit .flame { display: block; animation: flame-dance 1s ease-in-out infinite alternate; }
@keyframes flame-dance { to { transform: rotate(-40deg) scale(.88, 1.08); } }

.surprise h2 { font-size: clamp(28px, 7.2vw, 38px); }
.song-controls { display: flex; justify-content: center; align-items: center; gap: 5px; margin: 3px auto 0; }
.mic-button { width: clamp(66px, 18vw, 90px); height: clamp(70px, 12vh, 100px); border: 0; padding: 0; background: transparent; }
.mic-button img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 5px #663b3559); }
.mic-button.playing { animation: pulse 1.2s infinite alternate; }
@keyframes pulse { to { transform: scale(1.06); } }
.song-copy { max-width: 160px; text-align: left; }
.play-label { margin: 0; color: #fffaf2; font-family: 'Gowun Dodum', sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; }
.audio-status { margin: 3px 0 0; color: #fff3df; font-family: 'Gowun Dodum', sans-serif; font-size: 11px; line-height: 1.4; }
.reset-button { border: 0; padding: 5px 10px; background: transparent; color: #fff8ec; font-family: 'Gowun Dodum', sans-serif; font-size: 11px; text-shadow: 0 1px 4px #6d3b38; }

.bottom-note { position: absolute; z-index: 6; bottom: max(6%, calc(env(safe-area-inset-bottom) + 22px)); left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 9px; color: #fff9ee; font-family: 'Gowun Dodum', sans-serif; font-size: 12px; text-shadow: 0 2px 4px #704038; pointer-events: none; }
.note-heart { color: #ffe2cc; font-size: 9px; }
.bottom-signature { position: absolute; z-index: 6; bottom: max(2%, env(safe-area-inset-bottom)); left: 0; width: 100%; text-align: center; color: #ffeadb; font-size: 8px; letter-spacing: .19em; font-weight: 900; text-shadow: 0 1px 4px #704038; }

@media (max-height: 680px) {
  .message { top: max(8%, calc(env(safe-area-inset-top) + 30px)); }
  .eyebrow { margin-bottom: 5px; }
  h1, h2, .surprise h2 { font-size: 27px; }
  .subtitle { margin-top: 5px; }
  .action { margin-top: 10px; padding: 8px 19px; }
  .mic-button { height: 64px; }
  .reset-button { padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* The open stage is lighter than the closed curtain. */
.is-open .message { text-shadow: 0 1px 2px #fff8; }
.is-open .eyebrow, .is-open h2, .is-open .subtitle, .is-open .play-label, .is-open .audio-status, .is-open .reset-button { color: #713d3c; }
.is-open h2 em { color: #a04f57; }
.is-open .reset-button { text-shadow: 0 1px 2px #fff9; }