body{
 background: radial-gradient(circle at center, #1a1a12 0%, #000000 70%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.15) 2px, transparent 3px),
    radial-gradient(rgba(255,215,120,.12) 2px, transparent 3px);
  background-size:120px 120px, 200px 200px;
  animation: bokeh 18s linear infinite;
  opacity:.25;
  pointer-events:none;
}

@keyframes bokeh{
  from{transform:translateY(0);}
  to{transform:translateY(-200px);}
}

.container{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* SVG */
#flower-frame{
  height:100vh;
  object-fit:contain;
}

/* ocultar partes hasta animacion */
#Footer_group_1_,
[id^=PinkFlowerGroup],
[id^=BaseGroup] path,
[id^=LeafGroup] path,
path[id^=Stroke],
g[id^=BudGroup] g[id^=BudGroup] g[id^=Bud],
#Bud8_1_,
#Bud10_1_,
#Bud23_1_,
#Bud26_1_,
[id^=Dots],
[id^=Flourish]{
visibility:hidden;
}

/* quitar base duplicada derecha */
#BaseGroup25_1_{
display:none;
}

/* capas */
#PinkFlowerGroup25_1_{
isolation:isolate;
}
#PinkFlowerGroup25_1_ *{
z-index:10;
}

/* movimiento suave flores */
@keyframes wind{
0%{transform:rotate(0deg);}
50%{transform:rotate(2deg);}
100%{transform:rotate(0deg);}
}

@keyframes windReverse{
0%{transform:rotate(0deg);}
50%{transform:rotate(-2deg);}
100%{transform:rotate(0deg);}
}

.flotar1,.flotar2,.flotar3,.flotar4{
transform-origin:bottom center;
animation:wind 5s ease-in-out infinite;
}
.flotar2,.flotar3,.flotar4{
animation:windReverse 5s ease-in-out infinite;
}

/* CANVAS FUEGOS */
#fireworks{
position:fixed;
inset:0;
width:100vw;
height:100vh;
pointer-events:none;
z-index:9999;
background:transparent;
}

/* ================= POSICIÓN ÚNICA Y FIJA ================= */

.mensaje{
  position: fixed;
  left:50%;

  /* altura real del hueco del marco */
  top: 47vh;

  transform: translateX(-50%);
  
  text-align:center;
  color:white;
  opacity:0;
  transition: opacity .6s ease, transform .6s ease;

  max-width:520px;
  width:90vw;
  padding:0 14px;
  
  text-wrap: balance;
  word-break: keep-all;
}



/* solo aparece/desaparece */
.mensaje.visible{
  opacity:1;
}


/* ===== SISTEMA UNIVERSAL DE TEXTO ===== */
/* funciona igual en cualquier móvil, tablet y monitor */

.mensaje.mensaje-cumple{
  font-size: clamp(26px, 4.2vw, 52px);
}

.mensaje.mensaje-largo{
  font-size: clamp(16px, 2.6vw, 28px);
  line-height:1.35;
}

.mensaje.mensaje-final{
  font-size: clamp(20px, 3.4vw, 40px);
  line-height:1.25;
}

/* emojis escalan igual que el texto */
.emoji{
  width: clamp(24px, 3.2vw, 46px);
}

.emoji-corazon{
  width: clamp(28px, 3.8vw, 60px);
}


/* ===== AJUSTES FINOS SOLO MOVIL ===== */
@media (max-width:480px){

  /* 2° texto — demasiado grande */
  .mensaje.mensaje-largo{
    font-size: 1.05rem;
  }
  .mensaje.mensaje-largo .emoji{
    width: 28px;
  }

  /* 3° texto — un poco grande */
  .mensaje.mensaje-final{
    font-size: 1.55rem;
  }

  /* último emoji grande */
  .mensaje.mensaje-cumple .emoji-corazon{
    width: 42px;
  }
}



/* celulares pequeños */
@media (max-width:480px){
  .mensaje.mensaje-cumple{ font-size:2rem; }
  .mensaje.mensaje-largo{ font-size:1.15rem; }
  .mensaje.mensaje-final{ font-size:1.6rem; }
}

/* tablets */
@media (min-width:700px){
  .mensaje.mensaje-cumple{ font-size:2.8rem; }
  .mensaje.mensaje-largo{ font-size:1.5rem; }
  .mensaje.mensaje-final{ font-size:2.1rem; }
}

/* escritorio */
@media (min-width:1100px){
  .mensaje.mensaje-cumple{ font-size:3.2rem; }
  .mensaje.mensaje-largo{ font-size:1.7rem; }
  .mensaje.mensaje-final{ font-size:2.4rem; }
}

/* ===== emojis ===== */

.emoji-corazon{
  width: clamp(28px,5vw,60px);
  vertical-align: middle;
  margin-left:10px;
}

.emoji{
  width: clamp(26px,4.5vw,48px);
  vertical-align:middle;
  margin-left:6px;
}


/* cumpleaños */
.mensaje.mensaje-cumple{
  font-size: clamp(28px,6vw, 45px);
}

.mensaje.mensaje-largo{
  font-size: clamp(18px, 4.8vw, 30px);
  line-height: 1.25;
  padding: 0 14px;
}

.mensaje.mensaje-final{
max-width: 16ch;
margin-inline: auto;
}

#fireflies{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2; /* debajo del texto pero sobre el fondo */
}

.emoji-corazon{
  width: clamp(60px, 4vw, 70px);
  vertical-align: middle;
  margin-left: 10px;
}

.emoji{
  width:60px;
  vertical-align:middle;
  margin-left:6px;
}



@media (max-width:600px){

  .mensaje{
    top:50%;
    transform:translate(-50%,-50%);
  }

}

/* ===== AJUSTE ESCRITORIO ===== */
@media (min-width:900px){

  .mensaje{
    max-width:520px;
  }

  .mensaje.mensaje-cumple{
    font-size:48px;
  }

  .mensaje.mensaje-largo{
    font-size:26px;
  }

  .mensaje.mensaje-final{
    font-size:38px;
  }
  
   .mensaje{
    transform: translate(-50%, -34%);
  }
  
    .mensaje.visible{
    transform:translate(-50%,-34%) scale(1.05);
  }


  .emoji{
    width:42px;
  }

  .emoji-corazon{
    width:50px;
  }
}

/* SOLO PC — agranda textos sin afectar móvil */
@media (min-width:1100px){

  .mensaje.mensaje-largo{
    font-size: 100px !important;
  }

  .mensaje.mensaje-final{
    font-size: 100px !important; 
  }

}