*{box-sizing:border-box}

:root{
  --page:#f0e7f9;
  --pink:#ff3f76;
  --pink-soft:#ff7fa3;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  background:#f0e7f9;
}

body{
  font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
}

/*
  La pantalla completa es el contenedor.
  No existe desplazamiento vertical ni horizontal.
*/
.coming-soon{
  width:100vw;
  height:100vh;
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f0e7f9;
}

/*
  Imagen original 1536x1024 = relación 3:2.

  El ancho se limita por DOS condiciones:
  1. nunca superar el ancho disponible;
  2. nunca superar el ancho que cabe dentro de la altura disponible.

  Resultado: TODA la imagen entra siempre en la pantalla sin recortes,
  deformaciones ni scroll.
*/
.artboard{
  position:relative;
  width:min(100vw, calc(100dvh * 1.5));
  aspect-ratio:3 / 2;
  flex:0 0 auto;
  overflow:hidden;
}

.scene-image{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

/* Barra existente: se conserva exactamente como estaba. */
.progress-overlay{
  position:absolute;
  left:26.69%;
  top:65.82%;
  width:46.74%;
  height:3.82%;
  overflow:hidden;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff 0%,#fffafd 100%);
  z-index:2;
}

.progress-fill{
  width:0%;
  height:100%;
  border-radius:999px;
  background:
    repeating-linear-gradient(
      -45deg,
      #ff3f76 0 22px,
      #ff3f76 22px 34px,
      #ff789e 34px 56px
    );
  background-size:72px 72px;
  box-shadow:0 0 14px rgba(255,63,118,.32);
  animation:
    boomyProgress 4.1s cubic-bezier(.23,.72,.32,1) infinite,
    boomyStripes .72s linear infinite;
  transform-origin:left center;
}

.progress-fill::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(
    90deg,
    transparent 65%,
    rgba(255,255,255,.86) 94%,
    rgba(255,255,255,.98) 100%
  );
}

@keyframes boomyProgress{
  0%{width:0%}
  10%{width:8%}
  68%{width:92%}
  82%{width:100%}
  94%{width:100%}
  100%{width:0%}
}

@keyframes boomyStripes{
  to{background-position:72px 0}
}

/*
  Fallback para navegadores sin soporte de dynamic viewport units.
*/
@supports not (height:100dvh){
  .coming-soon{
    height:100vh;
  }
  .artboard{
    width:min(100vw, calc(100vh * 1.5));
  }
}

/*
  En teléfonos no ampliamos la imagen artificialmente.
  Se mantiene completa y centrada.
*/
@media (max-width:600px){
  .coming-soon{
    width:100vw;
    height:100dvh;
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
  }

  .artboard{
    width:min(
      calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc(
        (100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))
        * 1.5
      )
    );
  }
}

@media (prefers-reduced-motion:reduce){
  .progress-fill{
    animation:none;
    width:72%;
  }
}