/* House of Vale — Orion hero reframing + timed title reveal */

/* Keep Orion's head/face in frame on wide screens by favoring the upper source area. */
.vale-hero-video {
    object-fit: cover !important;
    object-position: 50% 18% !important;
}

/* Timed cinematic title */
.vale-hero-brand-reveal {
    position: absolute;
    z-index: 8;
    left: clamp(28px, 6vw, 110px);
    bottom: clamp(52px, 9vh, 115px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    animation: valeHouseReveal 12.1s ease-in-out infinite;
}

.vale-hero-brand-reveal span {
    display: block;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 5vw, 82px);
    font-weight: 400;
    line-height: .95;
    letter-spacing: .12em;
    color: #EAE1D3;
    text-shadow:
        0 2px 18px rgba(0,0,0,.75),
        0 0 36px rgba(181,151,99,.18);
    white-space: nowrap;
}

/* Video is ~12.1 sec. Title begins emerging around the turn,
   reaches full visibility for eye contact/wink, then fades before loop reset. */
@keyframes valeHouseReveal {
    0%, 24% {
        opacity: 0;
        transform: translateY(10px);
    }
    39%, 82% {
        opacity: 1;
        transform: translateY(0);
    }
    94%, 100% {
        opacity: 0;
        transform: translateY(0);
    }
}

@media (min-width: 1200px) {
    .vale-hero-video {
        object-position: 50% 12% !important;
    }
}

@media (max-width: 767px) {
    .vale-hero-video {
        object-position: 50% 16% !important;
    }

    .vale-hero-brand-reveal {
        left: 50%;
        bottom: 9%;
        width: 92%;
        text-align: center;
        transform: translate(-50%, 10px);
    }

    .vale-hero-brand-reveal span {
        font-size: clamp(26px, 8vw, 44px);
        letter-spacing: .09em;
        white-space: normal;
    }

    @keyframes valeHouseReveal {
        0%, 24% {
            opacity: 0;
            transform: translate(-50%, 10px);
        }
        39%, 82% {
            opacity: 1;
            transform: translate(-50%, 0);
        }
        94%, 100% {
            opacity: 0;
            transform: translate(-50%, 0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .vale-hero-brand-reveal {
        animation: none;
        opacity: 1;
        transform: none;
    }
}