/*
  HERO SCROLL
  La foto se queda fija y el eslogan pintado "Es KURO o nada." se arma
  palabra por palabra conforme bajas. Los valores de movimiento viven en
  js/heroScroll.js; aqui solo esta la posicion de cada palabra.
  Base = telefono (2:3). Desde 769px se cambia al encuadre 16:9.
*/
/*
  Pantallas de "hold": lo que sigue pinchado el hero DESPUES de que el
  eslogan termina de armarse, y que es justo lo que tarda el contenido de
  abajo en subir encima. En escritorio no hay hold (0).
*/
:root{
    --hero-hold: 1;
}

.hero-stage{
    position: relative;
    height: calc(340vh + var(--hero-hold) * 100vh);
    background-color: #0d0d0c;
}
.hero-sticky{
    position: sticky;
    top: 0;
    z-index: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/*En telefono la foto ocupa la pantalla completa, sin bordes negros*/
.hero-frame{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--negro);
}
/*
  El lienzo es la foto: siempre 2:3 y del tamaño justo para tapar la
  pantalla. Las palabras van dentro de el (no del encuadre), asi caen
  siempre en el mismo punto de la foto aunque el telefono la recorte.
*/
/*
  Los % son del encuadre, que en telefono ya es la pantalla completa.
  max(...)  = crece hasta taparla toda.
  min(...)  = tope de seguridad. "KURO" termina en el 82% de la foto, asi
              que pasando 1.5625 veces el ancho el recorte se lo empezaria
              a comer. Solo aplica en telefonos muy alargados (mas de
              21:9); ahi quedan unos milimetros negros arriba y abajo
              antes que cortar el logo.
*/
.hero-canvas{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(max(100%, calc(100vh * 2 / 3)), calc(100% * 1.5625));
    aspect-ratio: 2 / 3;
}
.hero-base{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*Cada palabra del eslogan*/
.hero-word{
    position: absolute;
    opacity: 0;
    will-change: transform, opacity;
    backface-visibility: hidden;
}
.hero-word img{
    width: 100%;
    height: auto;
    display: block;
}
.hero-word-es{
    left: 41%;
    top: 9%;
    width: 14%;
    transform-origin: 50% 100%;
}
.hero-word-kuro{
    left: 21.6%;
    top: 20.1%;
    width: 60.4%;
    transform-origin: 50% 50%;
}
.hero-word-o{
    left: 24.8%;
    top: 36.1%;
    width: 6.45%;
    transform-origin: 50% 100%;
}
.hero-word-nada{
    left: 37.4%;
    top: 33%;
    width: 39.8%;
    transform-origin: 0% 50%;
}

.hero-hint{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    text-align: center;
    pointer-events: none;
    font-family: 'Aldrich', sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.8);
}

@media (min-width: 769px){
    .hero-stage{
        height: calc(380vh + var(--hero-hold) * 100vh);
    }
    /*
      El encuadre sigue siendo la pantalla completa (viene del bloque de
      telefono); aqui solo cambia la foto a 16:9.

      Va pegado a la DERECHA a proposito: en esta toma el eslogan llega
      hasta el 97% del ancho, asi que recortar centrado le comeria la "O"
      de KURO. Recortando de la izquierda se pierde tantito del borde del
      plato, que de por si ya se sale de cuadro, y el eslogan nunca se
      corta. En pantallas 16:9 no se recorta nada.

      El 1.16 es el tope de recorte (~14%): mas alla de eso, en ventanas
      con formas raras, mejor unas franjas negras que destrozar la foto.
    */
    .hero-canvas{
        top: 50%;
        left: auto;
        right: 0;
        transform: translateY(-50%);
        width: min(max(100%, calc(100vh * 16 / 9)), calc(100% * 1.16));
        aspect-ratio: 16 / 9;
    }
    .hero-word-es{
        left: 52%;
        top: 17.5%;
        width: 8.6%;
        transform-origin: 50% 100%;
    }
    .hero-word-kuro{
        left: 65.7%;
        top: 17.5%;
        width: 31.35%;
        transform-origin: 0% 50%;
    }
    .hero-word-o{
        left: 57.7%;
        top: 41.7%;
        width: 8.57%;
        transform-origin: 50% 100%;
    }
    .hero-word-nada{
        left: 70.65%;
        top: 37.7%;
        width: 22.72%;
        transform-origin: 0% 50%;
    }
    .hero-hint{
        bottom: 20px;
        letter-spacing: 0.3em;
        color: rgba(255, 255, 255, 0.6);
    }
}

/*
  El resto de la pagina sube ENCIMA del hero pinchado en vez de empujarlo,
  igual que el panel de pedidos en ordenar.html. El margen negativo es
  exactamente el hold, asi el panel acaba de subir justo cuando el hero
  se despincha.
*/
.hero-after{
    position: relative;
    z-index: 1;
    background-color: #f3f7f4;
    margin-top: calc(var(--hero-hold) * -100vh);
    border-radius: 28px 28px 0 0;
    box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.08);
}

/*Sin animacion: se muestra el eslogan ya armado y se quita la pista de scroll*/
@media (prefers-reduced-motion: reduce){
    .hero-stage{
        height: auto;
    }
    .hero-sticky{
        position: static;
        height: auto;
        padding: 40px 0;
    }
    .hero-frame{
        width: min(96vw, calc(92vh * 2 / 3), 480px);
        height: auto;
        aspect-ratio: 2 / 3;
        margin: 0 auto;
    }
    .hero-canvas{
        inset: 0;
        width: 100%;
        height: 100%;
        transform: none;
        aspect-ratio: auto;
    }
    .hero-word{
        opacity: 1;
    }
    .hero-hint{
        display: none;
    }
    .hero-after{
        margin-top: 0;
    }
}
/*Mismo caso pero en escritorio: la foto es 16:9*/
@media (prefers-reduced-motion: reduce) and (min-width: 769px){
    .hero-frame{
        width: min(100%, calc(100vh * 16 / 9));
        aspect-ratio: 16 / 9;
    }
}