/* ========================================
   PORTADA HORIZONTAL
   Fotos a pantalla completa. Se avanza hacia la derecha: la rueda
   del mouse hacia abajo mueve a la derecha.
   ======================================== */

.portada-horizontal {
    height: 100%;
    overflow: hidden;   /* nada de scroll vertical en la portada */
    background: #101010;
    padding-top: 0 !important; /* el nav flota, no reserva lugar */
}

.galeria-h {
    position: fixed;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    cursor: grab;
    outline: none;
}

.galeria-h::-webkit-scrollbar { display: none; }  /* Chrome / Safari */

/* IMPORTANTISIMO: mientras la galeria se mueve (arrastrando con el mouse
   o viajando sola de una foto a otra) hay que apagar el snap. Con
   "mandatory" prendido el navegador devuelve el scroll a la foto anterior
   apenas el JS lo toca, asi que arrastrar no hacia absolutamente nada.
   El snap se vuelve a prender al frenar, y ahi termina de acomodar. */
.galeria-h.esta-moviendose,
.galeria-h.esta-arrastrando {
    scroll-snap-type: none;
}

.galeria-h.esta-arrastrando {
    cursor: grabbing;
    user-select: none;          /* que arrastrar no seleccione los textos */
    -webkit-user-select: none;
}

.galeria-h.esta-arrastrando * {
    cursor: grabbing;
}

.galeria-h__pista {
    display: flex;
    height: 100%;
    width: max-content;
}

/* Cada foto ocupa la pantalla entera */
.panel {
    position: relative;
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    height: 100dvh; /* en celular descuenta la barra del navegador */
    scroll-snap-align: start;
    margin: 0;
    overflow: hidden;
}

.panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* ========================================
   PORTADA CON VIDEO
   El video de Nordelta va de fondo, a pantalla completa y en silencio.
   Debajo queda la foto de respaldo: se ve mientras el video carga y
   tambien si el navegador decide no reproducirlo (celular en ahorro de
   energia, datos apagados). El video entra con un fundido.
   ======================================== */

.panel--video .panel__respaldo,
.panel--video .panel__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.panel--video .panel__video {
    z-index: 1;
    opacity: 0;
    pointer-events: none;   /* el video no se lleva el arrastre */
    transition: opacity 1.1s ease;
}

/* El JS la agrega cuando el video ya tiene imagen para mostrar */
.panel--video .panel__video.esta-lista {
    opacity: 1;
}

/* El velo y la marca van por encima del video */
.panel--video::after { z-index: 2; }

/* Velo para que ARHAUS se lea sobre la foto. Sobre el video hace mas
   falta todavia: la imagen se mueve y por momentos aclara el centro. */
.panel--con-marca::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            ellipse 58% 44% at 50% 50%,
            rgba(0, 0, 0, 0.46) 0%,
            rgba(0, 0, 0, 0.18) 58%,
            rgba(0, 0, 0, 0) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.34) 0%,
            rgba(0, 0, 0, 0.14) 45%,
            rgba(0, 0, 0, 0.44) 100%
        );
    pointer-events: none;
}

/* ARHAUS, encima de la primera foto y centrado */
.panel__marca {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    z-index: 3;
    pointer-events: none;
}

/* Velo y bloque de texto sobre las fotos que hablan del estudio */
.panel--con-texto::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.45) 42%,
        rgba(0, 0, 0, 0.12) 75%,
        rgba(0, 0, 0, 0.10) 100%
    );
    pointer-events: none;
}

.panel__texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 0 clamp(28px, 8vw, 130px);
    z-index: 3;
}

.panel__texto-caja {
    max-width: min(560px, 46vw);
    color: #ffffff;
}

.panel__texto-caja h2 {
    margin: 0 0 clamp(14px, 2vh, 22px);
    font-family: "Work Sans", sans-serif;
    font-size: clamp(1.7rem, 4vw, 3.2rem);
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: 0.01em;
}

.panel__texto-caja p {
    margin: 0;
    font-family: "Work Sans", sans-serif;
    font-size: clamp(0.92rem, 1.25vw, 1.12rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.88);
}

.panel__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(22px, 3vh, 34px);
}

.panel__acciones a {
    padding: 11px 24px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 999px;
    color: #ffffff;
    font-family: "Work Sans", sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease;
}

.panel__acciones a:hover {
    background: #ffffff;
    color: #141414;
}

.hero-brand__name {
    margin: 0;
    line-height: 0; /* el h1 solo contiene el SVG del logo */
}

/* El logo real de ARHAUS en vectores: asi la "A" mantiene su forma
   de chevron (sin el travesano del medio) y el "AR" queda en el rojo
   de la marca, exactamente igual que el logo. */
.marca {
    display: inline-block;
    width: clamp(220px, 52vw, 680px);
    height: auto;
    /* Tres sombras con oficios distintos: la primera, sin desplazamiento y
       casi sin difuminar, le dibuja el canto a la letra y es la que hace
       que se despegue; la del medio le da volumen; la grande la apoya
       sobre el fondo. */
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.5))
            drop-shadow(0 3px 12px rgba(0, 0, 0, 0.5))
            drop-shadow(0 18px 48px rgba(0, 0, 0, 0.45));
}

/* Colores tomados del propio logo. A cada pieza se le pone ademas un
   trazo de su mismo color: la tipografia es de remate fino, y sobre una
   imagen esos pelitos desaparecen. El trazo los engorda apenas —un pelo
   por lado— y el logo gana peso sin perder la forma. */
.marca__pieza--roja  { fill: #880723; stroke: #880723; }               /* AR */
.marca__pieza--clara { fill: #ffffff; stroke: #ffffff; }               /* HAUS */
/* La barrita del medio ya es un rectangulo macizo: engrosarla solo la
   hacia pesada al lado de las letras, asi que va sin contorno. */
.marca__pieza--barra { fill: rgba(255, 255, 255, 0.72); stroke: none; } /* separador | */
.marca__tagline      { fill: #ffffff; stroke: #ffffff; }               /* DEVELOPERS */

.marca__pieza {
    stroke-width: 0.42;
    stroke-linejoin: round;
    paint-order: stroke fill;
}

/* "DEVELOPERS" es diez veces mas chico: con el mismo trazo se empastaba */
.marca__tagline {
    stroke-width: 0.11;
}

/* ========================================
   ENTRADA DEL LOGO
   Aparece recien a los 3,5 segundos, cuando ya se vio un rato el video.
   Las piezas arrancan desparramadas hacia afuera y desenfocadas, y se
   van juntando hasta armar la marca: primero el AR, despues la barra y
   HAUS, y al final se abre DEVELOPERS. El "3" de la cuenta es la pieza
   del medio (la barrita): las de un lado salen para la izquierda y las
   del otro para la derecha.
   ======================================== */

.marca__pieza {
    opacity: 0;
    /* OJO: adentro de un SVG, "px" son unidades del viewBox (150 de ancho),
       no pixeles de pantalla. Por eso los numeros parecen chicos. */
    transform: translateX(calc((var(--i) - 3) * 3.4px)) scale(1.06);
    filter: blur(4px);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    will-change: opacity, transform, filter;
}

.galeria-h.is-listo .marca__pieza {
    animation: piezaSeJunta 1.35s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
    animation-delay: calc(var(--i) * 75ms);
}

@keyframes piezaSeJunta {
    55% {
        filter: blur(0);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

/* "DEVELOPERS" no se corre de costado: es una linea larga y quedaria
   raro. Entra despues que las letras, abriendose desde abajo. */
.marca__tagline {
    transform: translateY(28%) scale(0.92);
}

.galeria-h.is-listo .marca__tagline {
    animation-name: taglineSeAbre;
    animation-duration: 1.1s;
    animation-delay: 680ms;
}

@keyframes taglineSeAbre {
    55% {
        filter: blur(0);
    }
    to {
        opacity: 0.85;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ========================================
   HOVER SOBRE EL LOGO
   La animacion de entrada usa "forwards", que deja fijados transform
   y opacity: mientras siga activa, el hover no puede moverlos. Por eso
   al terminar la entrada el JS agrega .entrada-lista, que la desactiva
   y fija el estado final. Recien ahi el transform queda libre.
   ======================================== */

.marca.entrada-lista .marca__pieza {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;   /* la entrada arranca desenfocada: al terminar, nitida */
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
                fill 0.45s ease;
}

.marca.entrada-lista .marca__tagline {
    opacity: 0.85;
}

/* El logo si recibe el cursor (el resto del bloque no, para no tapar nada) */
.marca.entrada-lista {
    pointer-events: auto;
    transition: filter 0.45s ease;
}

/* Al pasar por encima: las letras se levantan en ola, de izquierda a
   derecha, y el AR toma un rojo mas vivo. */
.marca.entrada-lista:hover .marca__pieza {
    transform: translateY(-7%);
    transition-delay: calc(var(--i) * 45ms);
}

/* El trazo tiene que viajar con el relleno: si no, al encenderse el rojo
   le quedaria alrededor el borde del rojo viejo, mas oscuro. */
.marca.entrada-lista:hover .marca__pieza--roja {
    fill: #c2183c;
    stroke: #c2183c;
}

.marca.entrada-lista:hover .marca__pieza--barra {
    fill: rgba(255, 255, 255, 0.92);
}

.marca.entrada-lista:hover {
    filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.5))
            drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55))
            drop-shadow(0 18px 48px rgba(0, 0, 0, 0.45))
            drop-shadow(0 0 26px rgba(255, 255, 255, 0.2));
}

@media (prefers-reduced-motion: reduce) {
    .marca.entrada-lista:hover .marca__pieza {
        transform: none;
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
    .marca {
        width: min(78vw, 330px);
    }

    /* En pantalla angosta el texto va abajo y a lo ancho: al costado
       quedaba una columna finita ilegible (46vw = 173px en un celular). */
    .panel--con-texto::after {
        background: linear-gradient(
            to top,
            rgba(0, 0, 0, 0.80) 0%,
            rgba(0, 0, 0, 0.55) 38%,
            rgba(0, 0, 0, 0.15) 70%,
            rgba(0, 0, 0, 0.10) 100%
        );
    }

    .panel__texto {
        align-items: flex-end;
        padding: 0 24px clamp(48px, 10vh, 90px);
    }

    .panel__texto-caja {
        max-width: 100%;
    }

    .panel__texto-caja p {
        line-height: 1.6;
    }
}

/* Respeta a quien pide menos animacion en su sistema */
@media (prefers-reduced-motion: reduce) {
    .marca__pieza {
        animation-duration: 0.01s !important;
        animation-delay: 0s !important;
    }
}