/* ---------- BASE ---------- */
:root{
  --accent1:#ff8bb0;
  --accent2:#ff5c8a;
  --accent3:#ffd6e8;
  --text:#222;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{color:var(--text);overflow-x:hidden;position:relative;background:#fff0f6}

/* animated gradient background */
.bg-gradient{
  position:fixed;inset:0;z-index:-3;
  background:linear-gradient(135deg,#ffefef 0%, #fff2f7 30%, #f6f0ff 60%, #eefcff 100%);
  background-size:400% 400%;
  animation: gradShift 12s ease infinite;
  filter:blur(18px);
  opacity:0.95;
}
@keyframes gradShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* overlay canvases full-screen */
.overlay{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}

/* container */
.container{position:relative;z-index:3;max-width:1100px;margin:30px auto;padding:20px}

/* audio controls */
.audio-controls{position:fixed;right:20px;top:20px;z-index:10}
.audio-controls button{background:linear-gradient(90deg,var(--accent1),var(--accent2));border:0;padding:8px 12px;border-radius:10px;color:#fff;margin-left:8px;cursor:pointer}

/* HERO */
.hero{text-align:center;padding:40px 20px;border-radius:18px}
.birthday-title{font-size:44px;margin:0;color:#ff0909;text-shadow:0 4px 18px rgba(0,0,0,0.2)}
.subtitle{color:#fe7826;margin-top:8px;opacity:0.95}

/* CAKE */
.cake-container{display:inline-block;margin-top:26px;position:relative}
#birthdayCake{display:block;background:transparent;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,0.12)}
.cake-title{margin:10px 0 0;color:#f20e61;font-size:24px;text-shadow:0 6px 20px rgba(255,90,140,0.28);animation: pulse 2.2s infinite}
@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* MESSAGE */
.message-section{padding:28px 18px;text-align:center}
.typed{max-width:900px;margin:8px auto 0;font-size:18px;line-height:1.7;color:#333}

/* SECRET */
.secret{margin:14px 0;text-align:center}
.btn{background:linear-gradient(90deg,var(--accent2),#ff6a9a);color:#fff;padding:10px 16px;border-radius:12px;border:0;cursor:pointer}
.secret-text{max-width:760px;margin:12px auto;font-size:18px;color:#c21a60}

/* GALLERY */
.gallery{margin-top:28px;padding:20px;border-radius:12px;background:rgba(255,255,255,0.6);backdrop-filter: blur(6px)}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;align-items:start}
.photo-card{display:block;border-radius:14px;overflow:hidden;position:relative;text-decoration:none;color:inherit;box-shadow:0 8px 30px rgba(0,0,0,0.12);transition:transform .25s ease, box-shadow .25s}
.photo-card img{width:100%;height:260px;object-fit:cover;display:block;transform-origin:center}
.photo-card .caption{position:absolute;left:12px;bottom:12px;background:linear-gradient(90deg,rgba(0,0,0,0.45),rgba(0,0,0,0.2));color:#fff;padding:8px 12px;border-radius:10px;font-weight:600}
.photo-card:hover{transform:translateY(-6px)}
.photo-card:hover img{transform:scale(1.06)}

/* balloon zone (balloons are created/animated by JS) */
.balloon-zone{position:fixed;inset:0;pointer-events:none;z-index:4}

/* single balloon style (JS will add classes & styles) */
.balloon{
  position:absolute;bottom:-200px;width:68px;height:92px;border-radius:50% 50% 48% 48%/60% 60% 40% 40%;
  transform-origin:center center;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,0.15);transition:transform .12s ease;
}
.balloon:active{transform:scale(.96)}
.balloon::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-42px;width:2px;height:40px;background:rgba(0,0,0,0.12);border-radius:2px}

/* hint text */
.hint{text-align:center;color:#666;margin-top:10px;font-size:14px}

/* hidden util */
.hidden{display:none}

/* responsive tweaks */
@media (max-width:720px){
  .birthday-title{font-size:30px}
  .photo-card img{height:180px}
}

/* small sparkle style (pure css decorative hearts etc if needed) */
span{
  color: #c21a60;
}
/* Envelope Surprise */
.envelope-section {
  margin: 60px auto;
  text-align: center;
  max-width: 700px;
}
.env-title {
  font-size: 26px;
  color: #c21a60;
  margin-bottom: 20px;
  font-weight: 700;
}

.envelope {
  width: 320px;
  height: 220px;
  margin: auto;
  position: relative;
  cursor: pointer;
  transition: transform .3s ease;
}
.envelope:hover { transform: scale(1.04); }

.envelope .flap {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ffc5d9;
  clip-path: polygon(0% 0%, 100% 0%, 50% 55%);
  z-index: 3;
  transition: transform .65s ease;
  transform-origin: top;
}

.letter {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  top: 0;
  left: 0;
  padding: 18px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  border-radius: 6px;
  transform: translateY(25%);
  opacity: 0;
  transition: all .6s ease;
  overflow: auto;
  z-index: 1;
}

.letter-img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}
.voice { width: 100%; margin: 8px 0; }
.end-title { color: #e44686; margin: 8px 0 4px; }
.end-msg { color: #444; margin-top: 10px; font-size: 17px; }

/* On Open */
.envelope.open .flap { transform: rotateX(180deg); }
.envelope.open .letter {
  transform: translateY(-8%);
  opacity: 1;
}
/* Cake Screen */
#cake-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffe5e5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
}

/* Cake Base Container */
#cake {
  width: 220px;
  height: 180px;
  position: relative;
  cursor: pointer;
  transition: transform 0.5s ease;
}

/* Cake Cutting */
#cake.cut {
  transform: scale(0.95) rotate(4deg);
}

/* Layers */
.layer {
  position: absolute;
  width: 100%;
  left: 0;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

/* Bottom Cake Layer */
.layer.bottom {
  height: 70px;
  background: 
    repeating-linear-gradient(
      -45deg,
      #d18f6f,
      #d18f6f 8px,
      #c57f5b 8px,
      #c57f5b 16px
    );
  bottom: 0;
}

/* Middle Cream */
.layer.middle {
  height: 25px;
  background: linear-gradient(#fffdfc, #fff6f6);
  bottom: 70px;
}

/* Top Layer */
.layer.top {
  height: 45px;
  background: 
    linear-gradient(#e59090, #d96f7f);
  bottom: 95px;
  border-top-left-radius: 110px;
  border-top-right-radius: 110px;
}

/* Cream Edge Drips */
.cream-edge {
  width: 100%;
  height: 22px;
  background: #fff4f4;
  border-radius: 0 0 12px 12px;
  position: absolute;
  bottom: 95px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.12);
  z-index: 10;
}

/* Drip Effect */
.cream-edge::before,
.cream-edge::after {
  content: '';
  position: absolute;
  width: 35px;
  height: 35px;
  background: #fff4f4;
  border-radius: 50%;
  left: 30px;
  bottom: -15px;
}

.cream-edge::after {
  left: 120px;
  height: 30px;
  width: 30px;
  bottom: -12px;
}

/* Sprinkles */
.sprinkles span {
  width: 8px;
  height: 4px;
  border-radius: 4px;
  position: absolute;
  background: red;
  top: 105px;
  animation: sprinkleMove 3s infinite linear;
}

.sprinkles span:nth-child(1) { left: 40px; background: #ffde59; }
.sprinkles span:nth-child(2) { left: 75px; background: #ff66aa; }
.sprinkles span:nth-child(3) { left: 110px; background: #77dd77; }
.sprinkles span:nth-child(4) { left: 145px; background: #66b3ff; }
.sprinkles span:nth-child(5) { left: 170px; background: #ff8c69; }

/* Sprinkle Animation */
@keyframes sprinkleMove {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Candle */
.candle {
  width: 12px;
  height: 35px;
  background: linear-gradient(#ffffff, #ffe3e3);
  position: absolute;
  left: 104px;
  top: 10px;
  border-radius: 4px;
}

/* Flame */
.flame {
  width: 18px;
  height: 22px;
  background: orange;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: -10px;
  animation: flicker 0.25s infinite alternate;
}

@keyframes flicker {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.14); opacity: 0.8; }
}

/* Text */
.cake-text {
  font-size: 28px;
  margin-top: 20px;
  display: none;
  font-weight: bold;
  color: #ff0066;
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}