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

/* Fondo */
body {
  height: 100vh;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, sans-serif;
  color: white;
}

/* Contenedor */
.container {
  text-align: center;
}

/* =============== LOGO CON BRILLO ANIMADO =============== */
.logo-mask {
  width: 360px;
  height: 480px;
  margin: 0 auto;
  position: relative;
  
  /* Color base del logo (será visible a través de la máscara) */
  background-color: #a05a2a;

  /* 1. MÁSCARA: Define la forma del logo usando logo.png */
  -webkit-mask-image: url('logo.png');
  mask-image: url('logo.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  /* 2. BRILLO: El gradiente animado que se superpone */
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.7) 50%, /* Ajustado para un brillo más visible */
    rgba(255, 255, 255, 0) 100%
  );

  /* Hacer el gradiente más ancho para que se vea el deslizamiento */
  background-size: 200% 100%;
  
  /* Iniciar la animación del brillo */
  animation: shine 2.8s ease-in-out infinite;
}

/*
 * 3. Animación: Mueve la posición del fondo (el brillo)
 */
@keyframes shine {
  0% { background-position: -200% 0; } /* Empieza fuera del borde izquierdo */
  50% { background-position: 200% 0; }  /* Pasa completamente al borde derecho */
  100% { background-position: 200% 0; } /* Se detiene en el borde derecho */
}

/* Texto */
.coming-soon {
  margin-top: 24px;
  font-size: 1.1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
}