/*
Theme Name: AWO Coming Soon V2
*/

:root {
  --awo-bg: #000000;
  --awo-text: #ffffff;

  --ticker-desktop-size: clamp(2rem, 3.05vw, 3.75rem);
  --ticker-mobile-size: clamp(1.25rem, 7vw, 2.15rem);
  --ticker-gap: clamp(2.25rem, 5vw, 5.5rem);

  /* ================================
     👇 AQUI LE MUEVES AL VIDEO 👇
     ================================ */

  /* Tamaño base del ojo */
  --eye-size: clamp(250px, 32vw, 560px);

  /* ================================ */

  --top-offset: clamp(2.25rem, 4.6vw, 4.25rem);
  --bottom-offset: clamp(2.25rem, 4.6vw, 4.25rem);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--awo-bg);
}

body {
  font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  overflow: hidden;
}

.awo-coming-soon {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--awo-bg);
  color: var(--awo-text);
}

/* ================================
   👇 AQUI LE MUEVES AL VIDEO 👇
   ================================ */

.awo-video-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--eye-size);

  /* controla hasta dónde puede crecer */
  max-width: 100vw;

  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}

/* ================================ */

.awo-video-wrap video {
  display: block;
  width: 100%;
  height: auto;
}

/* TICKERS */

.awo-ticker {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  z-index: 5;
  line-height: 0.9;
  pointer-events: none;
}

.awo-ticker--top {
  top: var(--top-offset);
}

.awo-ticker--bottom {
  bottom: var(--bottom-offset);
}

.awo-ticker__track {
  display: flex;
  width: max-content;
  animation: awo-marquee-left 24s linear infinite;
  will-change: transform;
}

.awo-ticker__track--reverse {
  animation-name: awo-marquee-right;
  animation-duration: 25s;
}

.awo-ticker__group {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--ticker-gap);
  padding-right: var(--ticker-gap);
}

.awo-ticker span {
  display: inline-block;
  font-size: var(--ticker-desktop-size);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--awo-text);
}

/* ANIMACIONES */

@keyframes awo-marquee-left {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes awo-marquee-right {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

/* RESPONSIVE */

@media (max-width: 900px) {
  :root {

    /* 👇 AQUI TAMBIEN LE MUEVES EN MOBILE */
    --eye-size: clamp(210px, 55vw, 380px);

    --top-offset: 2rem;
    --bottom-offset: 2rem;
    --ticker-gap: 2rem;
  }

  .awo-video-wrap {
    max-width: 70vw;
  }

  .awo-ticker span {
    font-size: var(--ticker-mobile-size);
  }
}

@media (max-width: 520px) {
  :root {

    /* 👇 Y AQUI EN MOBILE CHIQUITO */
    --eye-size: clamp(180px, 65vw, 300px);

    --top-offset: 1.5rem;
    --bottom-offset: 1.5rem;
    --ticker-gap: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .awo-ticker__track {
    animation-duration: 90s;
  }
}