/* ========================================
   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 */

/* Mientras se mueve, el snap estorba: se reactiva al frenar y ahi acomoda */
.galeria-h.esta-moviendose {
    scroll-snap-type: 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;
}

/* Velo para que ARHAUS se lea sobre la foto */
.panel--con-marca::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.34) 0%,
        rgba(0, 0, 0, 0.20) 45%,
        rgba(0, 0, 0, 0.40) 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(200px, 46vw, 600px);
    height: auto;
    filter: drop-shadow(0 6px 34px rgba(0, 0, 0, 0.5));
}

/* Colores tomados del propio logo */
.marca__pieza--roja  { fill: #880723; }               /* AR */
.marca__pieza--clara { fill: #ffffff; }               /* HAUS */
.marca__pieza--barra { fill: rgba(255, 255, 255, 0.5); } /* separador | */
.marca__tagline      { fill: #ffffff; }               /* DEVELOPERS */

/* Entrada: cada pieza del logo aparece escalonada y despues queda fija */
.marca__pieza {
    opacity: 0;
    transform: translateY(16%) scale(0.94);
    transform-box: fill-box;
    transform-origin: 50% 50%;
    will-change: opacity, transform;
}

.galeria-h.is-listo .marca__pieza {
    animation: piezaEntra 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    animation-delay: calc(var(--i) * 105ms);
}

@keyframes piezaEntra {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* "DEVELOPERS" entra igual pero un poco mas tenue */
.galeria-h.is-listo .marca__tagline {
    animation-name: piezaEntraTagline;
}

@keyframes piezaEntraTagline {
    to {
        opacity: 0.85;
        transform: translateY(0) scale(1);
    }
}

/* ========================================
   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;
    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);
}

.marca.entrada-lista:hover .marca__pieza--roja {
    fill: #c2183c;
}

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

.marca.entrada-lista:hover {
    filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 22px rgba(255, 255, 255, 0.22));
}

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

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

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

    /* 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;
    }
}