/* SHUUDEN — landing hero. Single screen, responsive 320–2560px. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;            /* sin scroll horizontal ni barras laterales */
}

body {
  background: #ffffff;           /* blanco físico */
  overflow: hidden;             /* single-hero, sin scroll */
}

.stage {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  overflow: hidden;
}

/* Encaje base (móvil-first): la mancha se ajusta a viewport manteniendo proporción */
.frame {
  position: relative;
  aspect-ratio: 1100 / 1898;
  width: min(96vw, calc(96vh * 1100 / 1898));
}

/* Fondo dinámico: la mancha con deformación de fluido + respiración */
.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 50%;
  animation: breathe 9s ease-in-out infinite;
  will-change: transform;
}

/* Logotipo: vectorial, fijo, centrado, por encima del centro */
.logo {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: 78%;
  pointer-events: none;
  user-select: none;
}

@keyframes breathe {
  0%   { transform: scale(1.00) translate(0, 0)        rotate(0deg); }
  25%  { transform: scale(1.05) translate(-1.4%, 1.0%) rotate(0.9deg); }
  50%  { transform: scale(1.02) translate(1.2%, -1.2%) rotate(-0.7deg); }
  75%  { transform: scale(1.06) translate(-0.9%, -0.8%) rotate(0.6deg); }
  100% { transform: scale(1.00) translate(0, 0)        rotate(0deg); }
}

/* Tablet: adaptación proporcional, sin romper la escala del hero */
@media (min-width: 601px) and (max-width: 1024px) {
  .frame { width: min(92vw, calc(94vh * 1100 / 1898)); }
}

/* Desktop: composición amplia con aire lateral, mancha gobernada por la altura */
@media (min-width: 1025px) {
  .frame {
    height: 94vh;
    width: calc(94vh * 1100 / 1898);
    max-width: 96vw;
  }
}

/* Móvil: construcción vertical específica, la mancha ocupa el ancho disponible */
@media (max-width: 600px) {
  .frame { width: min(96vw, calc(94vh * 1100 / 1898)); }
}

/* Accesibilidad: respeta la reducción de movimiento del sistema */
@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; }
}