/* ==========================================================
   Entrada ordenada del collage, fundido negro inferior y
   botón para ver la foto sin adornos / volver a armar.
   ========================================================== */
.poster{
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --base: .9s;
}
.poster.rearmar{ --base: .05s; }
html, body{ background: #0B0A0C; }

/* Fundido inferior: la portada se funde con la franja negra del contador */
.poster::before{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  background: linear-gradient(180deg,
    rgba(11,10,12,0) 0%,
    rgba(11,10,12,.32) 42%,
    rgba(11,10,12,.82) 76%,
    #0B0A0C 100%);
  z-index: 8;
  pointer-events: none;
}

/* ---------- Antes de empezar: nada a medio cargar ---------- */
.poster:not(.ready) .photo,
.poster:not(.ready) .layer,
.poster:not(.ready) .name-composition{ opacity: 0; }
.poster:not(.ready) .glasses,
.poster:not(.ready) .balloon{ visibility: hidden; }
.poster:not(.chispas) .sparkle{ opacity: 0 !important; animation: none !important; }

/* ---------- Secuencia ---------- */
.poster.ready .photo{ animation: photoIn 1.7s var(--ease-out) both; }
.poster.ready .name-composition{ animation: nameIn 1.3s var(--ease-out) calc(var(--base) + .25s) both; }
.poster.ready .layer{ animation: pop .8s var(--ease-pop) calc(var(--d, 0s) + var(--base) + .5s) both; }
.poster.ready .star{
  animation:
    pop .8s var(--ease-pop) calc(var(--d, 0s) + var(--base) + .5s) both,
    paper-sway var(--duration, 7s) ease-in-out var(--offset, 0s) infinite;
}
.poster.ready .balloon{
  animation:
    arrive-balloon var(--arrival, 4s) cubic-bezier(.2,.65,.3,1) calc(var(--delay, 0s) + var(--base) + .9s) both,
    float-balloon var(--duration, 7s) ease-in-out calc(var(--delay, 0s) + var(--arrival, 4s) + var(--base) + .9s) infinite;
}
.poster.ready .glasses{ animation: glasses-land 2.6s cubic-bezier(.22,.61,.36,1) calc(var(--base) + 1.5s) both; }
.poster.ready .lens::after{ animation-delay: 6s; }
.poster.ready .lens-right::after{ animation-delay: 6.2s; }

/* Al volver a armar, la foto y el nombre quedan quietos */
.poster.rearmar .photo,
.poster.rearmar .name-composition{ animation: none; opacity: 1; }

@keyframes photoIn{
  from{ opacity: 0; scale: 1.06; }
  to  { opacity: 1; scale: 1; }
}
@keyframes nameIn{
  from{ opacity: 0; translate: 0 18px; filter: blur(8px); }
  to  { opacity: 1; translate: 0 0;   filter: blur(0); }
}
@keyframes pop{
  0%  { opacity: 0; scale: .55; }
  55% { opacity: 1; }
  100%{ opacity: 1; scale: 1; }
}

/* ---------- Sin adornos ---------- */
.poster.ready.limpia .layer,
.poster.ready.limpia .star{ animation: salir .55s cubic-bezier(.55,0,.75,.2) calc(var(--d, 0s) * .35) both; }
.poster.ready.limpia .balloon{ animation: globo-vuela 1.5s cubic-bezier(.45,0,.75,.3) calc(var(--delay, 0s) * .5) both; }
.poster.ready.limpia .glasses{ animation: anteojos-salen .85s cubic-bezier(.5,0,.75,.2) both; }
.poster.ready.limpia .lens::after{ animation: none; opacity: 0; }
@keyframes salir{
  from{ opacity: 1; scale: 1; }
  to  { opacity: 0; scale: .6; }
}
@keyframes globo-vuela{
  from{ translate: 0 0; }
  to  { translate: 12px -120svh; }
}
@keyframes anteojos-salen{
  from{ opacity: 1; translate: 0 0; }
  to  { opacity: 0; translate: 0 -24svh; rotate: 6deg; }
}

/* ---------- Botón (solo ícono, discreto) ---------- */
.replay{
  z-index: 30;
  width: 34px;
  height: 34px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffefe9;
  background: rgba(36,27,35,.38);
  border: 1px solid rgba(255,239,233,.22);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease, background .25s ease, transform .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.replay .ico{ width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.replay .ico-sacar{ fill: currentColor; stroke: none; }
.replay .ico-armar{ display: none; }
.poster.limpia .replay .ico-sacar{ display: none; }
.poster.limpia .replay .ico-armar{ display: block; }
.poster.boton .replay{ opacity: .6; pointer-events: auto; }
.poster.boton .replay:hover,
.poster.boton .replay:focus-visible{ opacity: 1; background: rgba(36,27,35,.7); }
.poster.limpia .replay{ animation: latido 2.4s ease-in-out 1.2s 2; }
@keyframes latido{ 0%,100%{ scale: 1; } 50%{ scale: 1.12; } }
.replay:active{ transform: scale(.92); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .poster.ready .photo,
  .poster.ready .name-composition{ animation: none !important; opacity: 1; }
  .poster.ready.limpia .layer,
  .poster.ready.limpia .glasses,
  .poster.ready.limpia .sparkle{ visibility: hidden; }
  .poster .replay{ display: inline-flex; }
}

/* ==========================================================
   Ajustes de compatibilidad para celulares
   (navegadores sin unidades cqw / svh, p. ej. el de WhatsApp
   o iPhone con iOS 15): el nombre ya no se achica.
   ========================================================== */
.poster{ height: 100vh; height: 100svh; }
.name-composition h1{
  font-size: 105px;
  font-size: clamp(92px, 27vw, 145px);
}
@media (min-width: 900px){
  .name-composition h1{
    font-size: clamp(110px, 18vh, 170px);
    font-size: clamp(110px, 18svh, 170px);
  }
}
@media (max-height: 620px) and (max-width: 899px){
  .name-composition h1{ font-size: 21vh; font-size: 21svh; }
}
@keyframes glasses-land{
  0%  { translate: 0 -110vh; translate: 0 -110svh; rotate: 8deg; }
  70% { translate: 0 -12px; rotate: 1.5deg; }
  88% { translate: 0 2px; rotate: -.4deg; }
  100%{ translate: 0 0; rotate: 0deg; }
}
@keyframes arrive-balloon{
  0%  { translate: -6px 110vh; translate: -6px 110svh; rotate: -6deg; }
  75% { translate: 1px -7px; rotate: 1deg; }
  100%{ translate: 0 0; rotate: 0deg; }
}
@keyframes globo-vuela{
  from{ translate: 0 0; }
  to  { translate: 12px -120vh; translate: 12px -120svh; }
}
@keyframes anteojos-salen{
  from{ opacity: 1; translate: 0 0; }
  to  { opacity: 0; translate: 0 -24vh; translate: 0 -24svh; rotate: 6deg; }
}

/* ==========================================================
   Reflejo de los anteojos: recortado con la forma exacta de
   los anteojos, así nunca se sale de los cristales.
   ========================================================== */
.lens{ display: none; }
.glasses::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(112deg,
    rgba(255,255,255,0) 45.5%,
    rgba(255,255,255,.35) 48.5%,
    rgba(255,255,255,.8) 49.7%,
    rgba(255,255,255,.8) 50.3%,
    rgba(255,255,255,.35) 51.5%,
    rgba(255,255,255,0) 54.5%);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-position: 90% 0;
  -webkit-mask-image: url('assets/anteojos-glam.webp');
          mask-image: url('assets/anteojos-glam.webp');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0;
}
.poster.ready .glasses::after{ animation: brillo 8s ease-in-out 5.6s infinite; }
.poster.ready.limpia .glasses::after{ animation: none; opacity: 0; }
@keyframes brillo{
  0%, 68%  { background-position: 90% 0; opacity: 0; }
  71%      { opacity: 1; }
  86%      { background-position: 10% 0; opacity: 1; }
  89%, 100%{ background-position: 10% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .glasses::after{ display: none; }
}