/* Estilos propios del molde "cumple" (lo que no conviene hacer con clases de Tailwind). */

.cumple {
  --tinta: #6a5484;
  --lila: #8a6bb8;
  --amarillo: #ffe58a;
  --amarillo-fuerte: #ffcf33;
  isolation: isolate;
  overflow-x: clip;
  padding-bottom: env(safe-area-inset-bottom);
}

/* Fondo fijo (background-attachment: fixed no anda en iPhone, por eso va en un pseudo-elemento) */
.cumple::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 229, 138, .55), transparent 40%),
    radial-gradient(circle at 90% 85%, rgba(255, 214, 226, .9), transparent 45%),
    linear-gradient(160deg, #e6dbff, #d3f4e4);
}

.cumple-entra { animation: cumple-entra 1.1s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes cumple-entra { from { opacity: 0; transform: translateY(30px) scale(.96); } }

.cumple-titulo { text-shadow: 3px 3px 0 var(--amarillo); text-wrap: balance; }

.cumple-late { animation: cumple-late 1.4s ease-in-out infinite; }
@keyframes cumple-late { 50% { transform: scale(1.15) rotate(-6deg); } }

/* Polaroid con cinta */
.cumple-polaroid {
  position: relative;
  width: min(290px, 74vw);
  padding: 12px 12px 48px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(106, 84, 132, .25);
  transform: translateX(var(--corrido, 0)) rotate(var(--giro, -3deg));
  transition: transform .3s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cumple-polaroid:hover, .cumple-polaroid:active { transform: translateX(var(--corrido, 0)) rotate(0) scale(1.03); z-index: 1; }
.cumple-polaroid::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 90px;
  height: 26px;
  background: rgba(255, 229, 138, .85);
  transform: translateX(-50%) rotate(4deg);
}
.cumple-polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  background: #fff9e6;
}
.cumple-polaroid figcaption {
  position: absolute;
  inset: auto 0 8px;
  font-family: var(--font-titulo);
  font-size: 1.7rem;
  line-height: 1.2;
}

/* Botón y carta desplegable */
.cumple-boton {
  font-weight: 800;
  color: var(--tinta);
  background: var(--amarillo-fuerte);
  border-radius: 999px;
  padding: 14px 28px;
  box-shadow: 0 6px 0 #e3b41e;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.cumple-boton:active { transform: translateY(3px); box-shadow: 0 3px 0 #e3b41e; }
.cumple-boton:focus-visible, .cumple-polaroid:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

.cumple-carta {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: -1.5rem;
  transition: grid-template-rows .6s ease, opacity .4s, margin .4s;
}
.cumple-carta.abierta { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }

/* Flores que se mecen */
.cumple-tallo {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: cumple-mece 4s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s);
}
@keyframes cumple-mece { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* Pétalos y confeti */
.cumple-petalo, .cumple-confeti {
  position: fixed;
  top: -30px;
  z-index: 20;
  pointer-events: none;
  animation: cumple-cae linear both;
}
.cumple-petalo { border-radius: 60% 0 60% 0; }
.cumple-confeti { border-radius: 2px; }
@keyframes cumple-cae {
  to { transform: translate(var(--deriva, 0), 110vh) rotate(600deg); opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
  .cumple *, .cumple { animation: none !important; transition: none !important; }
}