@import url(https://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
  width: 100%;
  height: 100%;
}
#confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:3;
}
#confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
}

@keyframes fall {
  to { transform: translateY(110vh); }
}



body {
  background: #ffc0cb;
}

#cake {
  display: block;
  position: relative;
  margin: -10em auto 0 auto;
}

.candle {
  background: #ffffff;
  border-radius: 10px;
  position: absolute;
  top: 228px;
  left: 50%;
  margin-left: -5px;
  margin-top: -8.33333333px;
  width: 10px;
  height: 70px;
  transform: translateY(-300px);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-animation: in 500ms 6s ease-out forwards;
          animation: in 500ms 6s ease-out forwards;
}

.candle:after,
.candle:before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: 2.22222222px;
}

.candle:after {
  top: 15%;
  left: 0;
}

.candle:before {
  top: 45%;
  left: 0;
}

.fire {
  border-radius: 100%;
  position: absolute;
  top: -20px;
  left: 50%;
  margin-left: -2.6px;
  width: 6.66666667px;
  height: 18px;
}

.fire:nth-child(1) {
  -webkit-animation: fire 2s 6.5s infinite;
          animation: fire 2s 6.5s infinite;
}

.fire:nth-child(2) {
  -webkit-animation: fire 1.5s 6.5s infinite;
          animation: fire 1.5s 6.5s infinite;
}

.fire:nth-child(3) {
  -webkit-animation: fire 1s 6.5s infinite;
          animation: fire 1s 6.5s infinite;
}

.fire:nth-child(4) {
  -webkit-animation: fire 0.5s 6.5s infinite;
          animation: fire 0.5s 6.5s infinite;
}

.fire:nth-child(5) {
  -webkit-animation: fire 0.2s 6.5s infinite;
          animation: fire 0.2s 6.5s infinite;
}

@-webkit-keyframes fire {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    transform: translateY(-20px) scale(0);
  }
}
@keyframes fire {
  0%, 100% {
    background: rgba(254, 248, 97, 0.5);
    box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
    transform: translateY(0) scale(1);
  }
  50% {
    background: rgba(255, 50, 0, 0.1);
    box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
    transform: translateY(-20px) scale(0);
  }
}
@-webkit-keyframes in {
  to {
    transform: translateY(0);
  }
}
@keyframes in {
  to {
    transform: translateY(0);
  }
}
.text {
  margin-top: 25px;           /* space below cake */
  text-align: center;
}

.text h1 {
  font-family: 'Brush Script MT', cursive;
  font-size: 3rem;            /* 🔥 CHANGE SIZE HERE */
  color: #78438c;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid #78438c;
  display: inline-block;
}

.typewriter {
  animation:
    typing 2s steps(30, end) forwards,
    blink .7s infinite;
}

/* Typing effect */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

/* Cursor blink */
@keyframes blink {
  50% { border-color: transparent; }
}


@keyframes fall {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(110vh) rotate(360deg); }
}
#scene.paused * {
  animation-play-state: paused !important;
}

#scene.hidden {
  visibility: hidden;
}
/* La presentación original, con una carta discreta debajo del saludo. */
body { margin: 0; background: #f5c7e4; }
.text { padding: 0 18px 40px; }
.text h1 { max-width: 100%; font-size: clamp(1.5rem, 6vw, 3rem); }

/* Sobre lateral: flota suavemente y abre la carta sin mover el pastel. */
.letter-button{position:fixed;right:clamp(20px,6vw,100px);top:46%;z-index:10000;border:0;background:transparent;color:#643579;padding:20px 10px;font:16px Georgia,serif;cursor:pointer;text-align:center}
.envelope-art{display:block;position:relative;width:140px;height:94px;margin:0 auto 15px;background:#71409a;border-radius:5px;box-shadow:0 12px 26px #55237455,0 0 0 2px #fff4fc;perspective:500px;animation:envelope-float 3s ease-in-out infinite}
.envelope-paper{position:absolute;left:12px;right:12px;top:8px;height:70px;background:#fff8fd;border-radius:3px;padding-top:12px;font:italic 15px Georgia,serif;transition:transform .35s}
.envelope-pocket{position:absolute;inset:0;z-index:2;background:linear-gradient(145deg,#9a65c4,#75439f);clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);border-radius:5px}
.envelope-flap{position:absolute;inset:0 0 auto;height:52px;background:#593076;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .35s;z-index:3}
.envelope-seal{position:absolute;left:56px;top:36px;z-index:4;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;background:#fff0cc;color:#63317f;font-size:17px;transition:opacity .2s}
.letter-label{display:block;line-height:1.6}.letter-label small{font:11px Arial,sans-serif;letter-spacing:.04em;color:#815e8a}
.letter-button:hover .envelope-flap,.letter-button:focus-visible .envelope-flap{transform:rotateX(160deg)}
.letter-button:hover .envelope-paper,.letter-button:focus-visible .envelope-paper{transform:translateY(-22px)}
.letter-button:hover .envelope-seal,.letter-button:focus-visible .envelope-seal{opacity:0}
.letter-button:focus-visible,.letter-close:focus-visible{outline:3px solid #78438c;outline-offset:5px;border-radius:8px}
.letter-dialog{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:85dvh;padding:44px 32px 34px;border:1px solid #dfbce1;border-radius:16px;background:#fff8fd;color:#643579;box-shadow:0 25px 90px #43234f40}
.letter-dialog[open]{animation:letter-unfold .4s ease both}.letter-dialog::backdrop{background:#42254f66;backdrop-filter:blur(5px)}
.letter-close{position:absolute;top:10px;right:14px;border:0;background:transparent;color:#78438c;font:28px Arial,sans-serif;cursor:pointer;width:36px;height:36px}
.letter-eyebrow{font:10px Arial,sans-serif;letter-spacing:.15em;color:#94679d}
.letter-dialog h2{margin:20px 0;font:italic 32px Georgia,serif}.letter-dialog p{font:16px/1.9 Georgia,serif;margin:0}.letter-sign{display:block;margin-top:24px;font:italic 17px Georgia,serif}
@keyframes envelope-float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(3deg)}}
@keyframes letter-unfold{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:760px){.letter-button{position:relative;top:auto;right:auto;display:block;margin:30px auto 0;padding:15px}.envelope-art{width:120px;height:82px}.envelope-seal{left:46px;top:30px}.letter-dialog{padding:42px 25px 28px}}
@media(prefers-reduced-motion:reduce){.envelope-art,.letter-dialog[open]{animation:none}.envelope-paper,.envelope-flap,.envelope-seal{transition:none}}
/* Globos decorativos: se activan junto con la sorpresa. */
.balloons{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.balloon{position:absolute;width:68px;height:86px;border-radius:50% 50% 47% 47%;background:radial-gradient(ellipse at 30% 25%,#ffffff99 0,transparent 28%),var(--balloon-color);box-shadow:inset -9px -7px 16px #54236b20;animation:balloon-sway 5s ease-in-out infinite alternate;transform-origin:50% 160%;opacity:.88}
.balloon:before{content:'';position:absolute;bottom:-7px;left:calc(50% - 5px);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--balloon-color)}
.balloon:after{content:'';position:absolute;top:calc(100% + 8px);left:50%;width:15px;height:125px;border-left:1px solid #84538c77;border-radius:50%;transform:rotate(-5deg)}
.balloon-one{--balloon-color:#d97db6;left:5%;top:20%;animation-delay:-1s}
.balloon-two{--balloon-color:#9c70c4;left:14%;top:43%;width:55px;height:72px;animation-delay:-3s}
.balloon-three{--balloon-color:#b28bd4;right:5%;top:8%;animation-delay:-2s}
.balloon-four{--balloon-color:#e89bc9;right:17%;top:14%;width:52px;height:68px;animation-delay:-4s}
#cake-wrapper,.text{position:relative;z-index:1}
@keyframes balloon-sway{from{transform:translateY(0) rotate(-7deg)}to{transform:translateY(-23px) rotate(7deg)}}
@media(max-width:760px){.balloon{width:42px;height:55px;opacity:.7}.balloon-one{left:3%;top:13%}.balloon-two{left:2%;top:47%;width:33px;height:44px}.balloon-three{right:3%;top:12%}.balloon-four{right:2%;top:47%;width:33px;height:44px}.balloon:after{height:70px}}
@media(prefers-reduced-motion:reduce){.balloon{animation:none}}
.letter-fireworks{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;pointer-events:none;overflow:hidden}
.letter-fireworks::backdrop{background:transparent;pointer-events:none}
.firework-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:currentColor;box-shadow:0 0 8px 2px currentColor;animation:firework-burst 1.85s cubic-bezier(.12,.55,.32,1) forwards}
@keyframes firework-burst{0%{opacity:0;transform:translate(0,0) scale(.5)}12%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:translate(var(--spark-x),var(--spark-y)) scale(.15)}}
@media(prefers-reduced-motion:reduce){.letter-fireworks{display:none!important}}
/* Carta y fuegos comparten la capa del diálogo, sin depender de Popover. */
.letter-dialog{width:100%;height:100%;max-width:100%;max-height:100%;inset:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden}
.letter-dialog[open]{display:grid;place-items:center;animation:none}
.letter-paper{position:relative;z-index:1;box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:85dvh;overflow:auto;padding:44px 32px 34px;border:1px solid #dfbce1;border-radius:16px;background:#fff8fd;box-shadow:0 25px 90px #43234f40;animation:letter-unfold .4s ease both}
.letter-fireworks{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.firework-spark{width:8px;height:8px;box-shadow:0 0 6px 2px #fff,0 0 18px 6px currentColor,0 0 36px 9px currentColor}
@media(max-width:760px){.letter-paper{padding:42px 25px 28px}}
@media(prefers-reduced-motion:reduce){.letter-paper{animation:none}}
.letter-dialog::backdrop{background:#281239bd;backdrop-filter:blur(5px)}