/* ── RESET / BASE ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

html {
  background-color: #000;
}

body {
  height: 100vh;
  background: #071a3a;
  font-family: Poppins, sans-serif;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  animation: background-change 7s ease-in-out alternate infinite;
}

@keyframes background-change {
  0% {
    background-color: #57835e;
  }
  50% {
    background-color: #192d16;
  }
  100% {
    background-color: #2d1629;
  }
}

/* ══════════════════════════════
   GIFTBOX STYLES (3D CSS Box)
══════════════════════════════ */

#giftSection {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 300;
  background: #071a3a;
  transition: opacity 0.5s ease;
}

.present {
  position: absolute;
  left: 50%;
  top: 60%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  animation: moving-present 1s ease-in-out 1s 3;
}

@keyframes moving-present {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  50% {
    transform: translate(-50%, -50%) translateY(20px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}

@media (max-height: 720px) {
  .present {
    transform: translate(-50%, -50%) scale(0.78);
  }
  @keyframes moving-present {
    0%   { transform: translate(-50%, -50%) scale(0.78) translateY(0); }
    50%  { transform: translate(-50%, -50%) scale(0.78) translateY(20px); }
    100% { transform: translate(-50%, -50%) scale(0.78) translateY(0); }
  }
}
@media (max-height: 560px) {
  .present {
    transform: translate(-50%, -50%) scale(0.6);
  }
  @keyframes moving-present {
    0%   { transform: translate(-50%, -50%) scale(0.6) translateY(0); }
    50%  { transform: translate(-50%, -50%) scale(0.6) translateY(20px); }
    100% { transform: translate(-50%, -50%) scale(0.6) translateY(0); }
  }
}

.ribbon {
  width: 40px;
  height: 40px;
  background: red;
  border-radius: 100px / 50px;
  position: absolute;
  box-shadow: -10px 0px 13px -7px #000000, 10px 0px 13px -7px #000000, 5px 5px 15px 5px rgba(0, 0, 0, 0);
  transform: rotate(-6deg);
  top: -152px;
  left: 91px;
  z-index: 2;
  transform-style: preserve-3d;
  animation: none;
}

@keyframes moving-ribbon {
  35% {
    top: -316px;
    left: 136px;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(23deg);
  }
  88% {
    top: -189px;
    left: 259px;
    transform: rotateX(63deg) rotateY(67deg) rotateZ(4deg);
  }
  100% {
    visibility: hidden;
    top: -152px;
    left: 291px;
    transform: rotateX(63deg) rotateY(72deg) rotateZ(20deg);
  }
}

.ribbon::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 64px;
  top: 8px;
  left: -11px;
  background: red;
  transform: rotate(43deg);
}

.ribbon::before {
  content: "";
  position: absolute;
  width: 21px;
  height: 73px;
  top: 5px;
  left: 17px;
  background: red;
  transform: rotate(-27deg);
}

.ribbon-part-left {
  width: 0;
  height: 0;
  position: absolute;
  border-top: 45px solid transparent;
  border-right: 87px solid red;
  border-bottom: 14px solid transparent;
  border-radius: 9px;
  right: 16px;
  bottom: -7px;
  transform: rotate(216deg);
}

.ribbon-part-left::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 148px;
  background: radial-gradient(ellipse at 49% 71%, #de2121 19%, transparent 2%);
  transform: rotate(-119deg);
  top: -88px;
  right: -56px;
}

.ribbon-part-left::after {
  content: '';
  position: absolute;
  width: 41px;
  height: 177px;
  transform: rotate(97deg);
  background: radial-gradient(ellipse at 76% 75%, #ff0000 13%, transparent 1%);
  left: 83px;
  top: -86px;
}

.ribbon-part-right {
  width: 0;
  height: 0;
  position: absolute;
  border-top: 45px solid transparent;
  border-right: 87px solid red;
  border-bottom: 14px solid transparent;
  border-radius: 9px;
  transform: rotate(-20deg);
  top: -20px;
  right: -51px;
}

.ribbon-part-right::before {
  content: '';
  position: absolute;
  width: 56px;
  height: 148px;
  background: radial-gradient(ellipse at 49% 71%, #de2121 19%, transparent 2%);
  transform: rotate(-83deg);
  top: -72px;
  right: -55px;
}

.ribbon-part-right::after {
  content: '';
  position: absolute;
  width: 56px;
  height: 146px;
  background: radial-gradient(ellipse at 49% 71%, #ff0000 19%, transparent 2%);
  transform: rotate(-111deg);
  top: -93px;
  right: -60px;
}

.ribbon-line-left {
  position: absolute;
  margin-top: 8px;
  width: 19px;
  height: 1px;
  left: -22px;
  z-index: 1;
  transform: rotate(22deg);
  background-color: #ca0c0c;
}

.ribbon-line-left::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  width: 20px;
  height: 1px;
  transform: rotate(20deg);
  background-color: #ca0c0c;
}

.ribbon-line-left::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 19px;
  height: 1px;
  transform: rotate(167deg);
  background-color: #ca0c0c;
}

.ribbon-line-right {
  position: absolute;
  margin-top: 8px;
  width: 19px;
  height: 1px;
  left: 41px;
  z-index: 1;
  transform: rotate(152deg);
  background-color: #ca0c0c;
}

.ribbon-line-right::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  width: 20px;
  height: 1px;
  transform: rotate(20deg);
  background-color: #ca0c0c;
}

.ribbon-line-right::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 19px;
  height: 1px;
  transform: rotate(167deg);
  background-color: #ca0c0c;
}

.ribbon-cut-out {
  position: absolute;
  width: 0;
  height: 0;
  top: 54px;
  left: -29px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #b91e1e;
  transform: rotate(41deg);
  z-index: 1;
}

.ribbon-cut-out::before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: -34px;
  left: 43px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #e01d1d;
  transform: rotate(-60deg);
  z-index: 1;
}

.ribbon-cut-out::after {
  content: '';
  width: 43px;
  height: 33px;
  border-radius: 99px / 84px;
  position: absolute;
  top: -69px;
  left: -21px;
  z-index: 1;
  transform: rotate(-33deg);
  border: 1px solid;
  color: #ab1313;
}

.box,
.box-lid,
.back-box-cover {
  height: 240px;
  top: 50px;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(261deg) rotateY(0deg) rotateZ(-140deg);
  width: 240px;
  bottom: 100px;
}

.back-box-cover {
  z-index: -1;
}

.box-lid {
  top: -160px;
  left: 0px;
  z-index: 1;
  animation: none;
}

@keyframes moving-lid {
  20% {
    top: -336px;
    left: 0px;
    transform: rotateX(262deg) rotateY(-21deg) rotateZ(-138deg);
  }
  100% {
    top: -29px;
    left: 352px;
    transform: rotateX(263deg) rotateY(-181deg) rotateZ(-139deg);
  }
}

.box-top-lid {
  height: 105%;
  left: 0px;
  position: absolute;
  top: -6px;
  width: 101%;
  background: #b91e1e;
  transform: translateZ(-72px);
}

.box-top-lid::before {
  position: absolute;
  content: '';
  height: 26%;
  left: -3px;
  top: 83px;
  width: 101%;
  background: #ffd700;
}

.box-top-lid::after {
  position: absolute;
  content: '';
  height: 25%;
  left: -14px;
  top: 91px;
  width: 107%;
  transform: rotate(92deg);
  background: #ffd700;
}

.box-front,
.box-front-lid {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: #e01d1d;
  transform: rotateX(90deg) scaleY(0.9);
  transform-origin: bottom;
  background-image: radial-gradient(#ffffff 17%, transparent 19%);
  background-size: 60px 60px;
}

.box-front-lid {
  transform: rotateX(90deg) scaleY(0.3);
  box-shadow: 0px 82px 12px #0000000f;
  width: 101%;
  height: 101%;
  top: 4px;
  border-top: solid 2px #ff4a4a;
  background: #e01d1d;
}

.box-back,
.box-back-lid {
  height: 100%;
  left: 0;
  position: absolute;
  top: -241px;
  width: 100%;
  background: #901010;
  transform: rotateX(90deg) scaleY(0.9);
  transform-origin: bottom;
}

.box-back-lid {
  transform: rotateX(90deg) scaleY(0.3);
}

.box-front::after,
.box-front-lid::after {
  content: '';
  height: 101%;
  position: absolute;
  top: -2px;
  left: 84px;
  background: #ffd700;
  width: 60px;
}

.box-left,
.box-left-lid {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  background: #b91e1e;
  transform: translateZ(-216px) rotateY(90deg) scaleX(0.9);
  transform-origin: right;
  width: 240px;
  background-image: radial-gradient(#ffffff 17%, transparent 19%);
  background-size: 60px 60px;
}

.box-left-lid {
  transform: translateZ(-72px) rotateY(90deg) scaleX(0.3);
  width: 246px;
  height: 105%;
  top: -3px;
  left: -4px;
  box-shadow: -74px -5px 12px #0000000f;
  background: #b91e1e;
}

.box-left::after,
.box-left-lid::after {
  content: '';
  height: 100%;
  position: absolute;
  top: -17px;
  left: 89px;
  background: #ffd700;
  width: 60px;
  transform: rotate(90deg);
}

.box-right,
.box-right-lid {
  height: 100%;
  left: -236px;
  position: absolute;
  top: 0;
  background: #901010;
  transform: translateZ(-216px) rotateY(90deg) scaleX(0.9);
  transform-origin: right;
  width: 240px;
}

.box-right-lid {
  transform: translateZ(-70px) rotateY(90deg) scaleX(0.3);
  top: -1px;
  left: -239px;
  height: 249px;
  border-top: solid 2px #750707;
}

.star {
  position: absolute;
  z-index: 0;
  width: 130px;
  height: 130px;
  background: #ffd700;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  top: -15px;
  left: 35px;
  box-shadow: 0 0 20px #ffd700, 0 0 80px #ffd700;
  animation: star-glow 1.5s ease-in-out infinite alternate;
}

@keyframes moving-star {
  100% {
    top: -220px;
  }
}

@keyframes star-glow {
  0% {
    box-shadow: 0 0 20px #ffd700, 0 0 60px #ffd700;
  }
  100% {
    box-shadow: 0 0 40px #ffd700, 0 0 120px #ffe84d, 0 0 160px #ffaa00;
  }
}

/* ══════════════════════════════
   BIRTHDAY STYLES
══════════════════════════════ */

#birthdaySection {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #071a3a;
  z-index: 100;
  transition: opacity 1s ease;
}

#intro {
  position: absolute;
  text-align: center;
  z-index: 10;
}

#intro p { font-size: 24px; }

.sub {
  opacity: .7;
  font-size: 16px;
}

/* Star */
#star {
  position: relative;
  z-index: 100;
  width: 90px;
  height: 90px;
  background: #ffd700;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  margin: auto auto 20px;
  cursor: pointer;
  box-shadow: 0 0 20px #ffd700, 0 0 80px #ffd700;
  animation: float 3s infinite ease-in-out;
}

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* Sky */
#sky {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  opacity: 0;
  transition: 2s ease;
}
#sky.show { opacity: 1; }

/* Small stars */
.starSmall {
  position: absolute;
  width: 6px; height: 6px;
  background: white;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%,
    79% 91%, 50% 70%, 21% 91%, 32% 57%,
    2% 35%, 39% 35%
  );
  box-shadow:
    0 0 6px white,
    0 0 12px rgba(255,255,255,0.8),
    0 0 20px rgba(255,255,255,0.6);
  animation: twinkle infinite alternate;
}

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

/* Shooting stars */
.shooting {
  position: absolute;
  width: 160px; height: 2px;
  background: linear-gradient(to right, transparent, #87ceeb);
  transform: rotate(45deg);
  opacity: 0.9;
}
.shooting::after {
  content: "";
  position: absolute;
  right: -4px; top: -3px;
  width: 8px; height: 8px;
  background:   white;
  border-radius: 50%;
  box-shadow: 0 0 8px white, 0 0 18px white, 0 0 30px rgba(255,255,255,0.9);
}
.fromTop  { animation: shootTop  6s linear forwards; }
.fromLeft { animation: shootLeft 6s linear forwards; }

@keyframes shootTop {
  0%   { transform: translate(0,0) rotate(45deg); opacity: 1; }
  100% { transform: translate(800px,800px) rotate(45deg); opacity: 0; }
}
@keyframes shootLeft {
  0%   { transform: translate(0,0) rotate(45deg); opacity: 1; }
  100% { transform: translate(800px,800px) rotate(45deg); opacity: 0; }
}

/* Loader */
#loaderContainer {
  position: absolute;
  z-index: 20;
}
.hidden { display: none; }

/* Birthday message */
#birthdayMessage {
  pointer-events: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 2s ease, transform 2s ease, filter 2s ease;
  z-index: 50;
  text-align: center;
  width: 96vw;
  max-width: 820px;
}
#birthdayMessage.show { opacity: 1; }

/* Vara SVG output styling */
#bdayHandwriting svg {
  display: block;
  margin: 0 auto;
  overflow: visible;
  filter:
    drop-shadow(0 0 5px rgba(255, 220, 120, 0.95))
    drop-shadow(0 0 14px rgba(255, 175, 55, 0.65))
    drop-shadow(0 0 28px rgba(255, 140, 30, 0.4));
}

/* Cake */
.birthday-cake {
  position: absolute;
  width: 250px; height: 200px;
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 80;
  opacity: 0;
  transition: 1.5s;
}
.birthday-cake.show { opacity: 1; }

.birthday-cake > * {
  position: absolute;
}

/* ── Plate ── */
.cake-plate {
  width: 270px;
  height: 110px;
  position: absolute;
  bottom: -10px;
  left: -10px;
  background-color: #ccc;
  border-radius: 50%;
  box-shadow: 0 2px 0 #b3b3b3, 0 4px 0 #b3b3b3, 0 5px 40px rgba(0,0,0,0.5);
}

.cake-plate::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 40%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.25), transparent 70%);
  border-radius: 50%;
  filter: blur(6px);
}

/* ── Cake layers ── */
.cake-layer {
  display: block;
  width: 250px;
  height: 100px;
  border-radius: 50%;
  background-color: #553c13;
  box-shadow:
    0 2px 0px #6a4b18,
    0 4px 0px #33240b,
    0 6px 0px #32230b,
    0 8px 0px #31230b,
    0 10px 0px #30220b,
    0 12px 0px #2f220b,
    0 14px 0px #2f210a,
    0 16px 0px #2e200a,
    0 18px 0px #2d200a,
    0 20px 0px #2c1f0a,
    0 22px 0px #2b1f0a,
    0 24px 0px #2a1e09,
    0 26px 0px #2a1d09,
    0 28px 0px #291d09,
    0 30px 0px #281c09;
}

.cake-layer-top    { top: 0px; }
.cake-layer-middle { top: 33px; }
.cake-layer-bottom { top: 66px; }

/* ── Icing ── */
.cake-icing {
  top: -1px;
  left: 0px;
  background-color: #f0e4d0;
  width: 250px;
  height: 105px;
  border-radius: 50%;
  z-index: 5;
}

.cake-icing::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 5px;
  bottom: 6px;
  left: 5px;
  background-color: #f4ebdc;
  box-shadow: 0 0 4px #f6efe3, 0 0 4px #f6efe3, 0 0 4px #f6efe3;
  border-radius: 50%;
  z-index: 1;
}

/* ── Drips ── */
.cake-drip {
  background-color: #f0e4d0;
  position: absolute;
  z-index: 4;
}

.cake-drip-1 {
  width: 35px; height: 60px;
  top: 51px; left: 0px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-2 {
  width: 35px; height: 60px;
  top: 72px; left: 25px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-3 {
  width: 35px; height: 60px;
  top: 70px; left: 52px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-4 {
  width: 35px; height: 60px;
  top: 82px; left: 79px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-5 {
  width: 35px; height: 60px;
  top: 75px; left: 106px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-6 {
  width: 35px; height: 60px;
  top: 81px; left: 134px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-7 {
  width: 35px; height: 60px;
  top: 70px; left: 163px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-8 {
  width: 35px; height: 60px;
  top: 70px; left: 193px;
  border-radius: 10% 15% 70% 60% / 5% 10% 95% 85%;
}
.cake-drip-9 {
  width: 30px; height: 70px;
  top: 38px; left: 219.84px;
  border-radius: 0% 100% 100% 100% / 0% 30% 95% 85%;
}

/* ── Candle ── */
.cake-candle {
  background-color: #7B020B;
  width: 16px;
  height: 50px;
  border-radius: 8px / 4px;
  top: -10px;
  left: 50%;
  margin-left: -8px;
  z-index: 10;
  box-shadow:
    inset 0 -20px 6px rgba(0,0,0,0.3),
    0 3px 1px 0px #c3bdb5;
}

.cake-candle::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 16px;
  height: 8px;
  border-radius: 50%;
  background-color: #ad030f;
}

/* ── Flame ── */
.cake-flame {
  position: absolute;
  background: radial-gradient(
    ellipse,
    #ffcc33 0%,
    orange 60%,
    rgba(255,140,0,0.2) 100%
  );
  width: 15px;
  height: 35px;
  border-radius: 10px 10px 10px 10px / 25px 25px 10px 10px;
  top: -34px;
  left: 50%;
  margin-left: -7.5px;
  z-index: 10;
  box-shadow: 0 0 15px rgba(255,165,0,0.6), 0 0 30px rgba(255,165,0,0.4);
  filter: blur(0.3px);
  transform-origin: 50% 90%;
  animation: flicker 1s ease-in-out alternate infinite;
}

.cake-flame.out {
  animation: none;
  opacity: 0;
  transform: scale(0);
  transition: 0.6s;
}

@keyframes flicker {
  0%   { transform: skewX(5deg);   box-shadow: 0 0 10px rgba(255,165,0,0.2), 0 0 20px rgba(255,165,0,0.2), 0 0 60px rgba(255,165,0,0.2), 0 0 80px rgba(255,165,0,0.2); }
  25%  { transform: skewX(-5deg);  box-shadow: 0 0 10px rgba(255,165,0,0.5), 0 0 20px rgba(255,165,0,0.5), 0 0 60px rgba(255,165,0,0.5), 0 0 80px rgba(255,165,0,0.5); }
  50%  { transform: skewX(10deg);  box-shadow: 0 0 10px rgba(255,165,0,0.3), 0 0 20px rgba(255,165,0,0.3), 0 0 60px rgba(255,165,0,0.3), 0 0 80px rgba(255,165,0,0.3); }
  75%  { transform: skewX(-10deg); box-shadow: 0 0 10px rgba(255,165,0,0.4), 0 0 20px rgba(255,165,0,0.4), 0 0 60px rgba(255,165,0,0.4), 0 0 80px rgba(255,165,0,0.4); }
  100% { transform: skewX(5deg);   box-shadow: 0 0 10px rgba(255,165,0,0.5), 0 0 20px rgba(255,165,0,0.5), 0 0 60px rgba(255,165,0,0.5), 0 0 80px rgba(255,165,0,0.5); }
}

@keyframes smokePuff {
  0%   { opacity: 0;   transform: translate(0, 0)                      scale(0.4); }
  15%  { opacity: 0.8; transform: translate(calc(var(--dx)*0.1), -12px) scale(0.8); }
  50%  { opacity: 0.55; transform: translate(calc(var(--dx)*0.6), calc(var(--dy)*0.5)) scale(calc(var(--scale)*0.65)); }
  100% { opacity: 0;   transform: translate(var(--dx), var(--dy))       scale(var(--scale)); }
}

.blow-button {
  position: absolute;
  top: calc(50% + 220px);
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 30px;
  background: #ffd700;
  color: #222;
  border: none;
  border-radius: 40px;
  font-size: 18px;
  font-family: Poppins;
  cursor: pointer;
  box-shadow: 0 0 15px #ffd700, 0 0 30px rgba(255,215,0,0.8);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.5s;
}
.blow-button.show {
  opacity: 1;
  pointer-events: auto;
}

/* ══════════════════════════════════════════
   BOX: open animations triggered by JS class
   ══════════════════════════════════════════ */

#giftSection {
  cursor: pointer;
}

#tapHint {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
  text-align: center;
  pointer-events: none;
  animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.present.open .ribbon {
  animation: moving-ribbon 2.4s ease-in 0s both;
}

.present.open .box-lid {
  animation: moving-lid 4s ease-in 0s forwards;
}

.present.open .star {
  animation: moving-star 1.5s ease-in-out 2s forwards,
             star-glow   1.5s ease-in-out infinite alternate;
}

/* ══════════════════════════════════════════
   BIRTHDAY MESSAGE
   ══════════════════════════════════════════ */

.bday-line {
  font-family: 'Great Vibes', cursive;
  font-size: clamp(28px, 5.5vw, 58px);
  color: #fff7c2;
  text-align: center;
  opacity: 0;
  white-space: nowrap;
  filter:
    drop-shadow(0 0 6px rgba(255, 220, 120, 0.9))
    drop-shadow(0 0 18px rgba(255, 175, 55, 0.6))
    drop-shadow(0 0 32px rgba(255, 140, 30, 0.35));
  animation: lineReveal 2.2s ease forwards;
}

@media (max-width: 480px) {
  .bday-line {
    white-space: normal;
    padding: 0 12px;
  }
}

@keyframes lineReveal {
  0%   { opacity: 0; transform: translateY(16px); filter: blur(10px) brightness(2); }
  30%  { opacity: 0.7; }
  100% { opacity: 1; transform: translateY(0);    filter:
           drop-shadow(0 0 6px rgba(255, 220, 120, 0.9))
           drop-shadow(0 0 18px rgba(255, 175, 55, 0.6))
           drop-shadow(0 0 32px rgba(255, 140, 30, 0.35)); }
}

#bdayHandwriting {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
@media (max-width: 480px) {
  #bdayHandwriting { gap: 18px; }
}

/* ══════════════════════════════════════════
   CONFETTI — natural falling pieces
   ══════════════════════════════════════════ */

@keyframes confettiFall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    transform: translateY(115vh) translateX(var(--confetti-drift)) rotate(var(--confetti-spin));
    opacity: 0;
  }
}