/**
 * Supa View — premium motion & interaction layer
 *
 * Sophisticated, restrained motion: soft fade reveals, smooth image scaling,
 * elegant hover interactions, cinematic transitions. All effects honor
 * prefers-reduced-motion via token zeroing in tokens.css.
 *
 * This file LAYERS on top of existing component styles. It does not replace
 * AOS reveals (which still drive scroll-triggered fades); it adds the
 * page-load entrance choreography, refined hover language, and consistent
 * stagger utilities.
 */

/* ─── Global motion baselines ─────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0ms !important;
        transition-delay: 0ms !important;
    }
}

/* ─── Cinematic reveal keyframes ──────────────────────────────── */

@keyframes sv-reveal-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sv-reveal-rise {
    from {
        opacity: 0;
        transform: translate3d(0, var(--sv-reveal-distance), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes sv-reveal-rise-soft {
    from {
        opacity: 0;
        transform: translate3d(0, calc(var(--sv-reveal-distance) * 0.66), 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes sv-reveal-settle {
    from {
        opacity: 0;
        transform: scale3d(1.015, 1.015, 1);
    }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

/* ─── Page-hero cinematic entrance ───────────────────────────── */
/* The shared <x-sv.page-hero> background fades in via AOS on the wrapper;
 * here we stagger the inner content for a premium feel. */

.sv-page-hero__inner > * {
    opacity: 0;
    animation: sv-reveal-rise-soft var(--sv-duration-cinematic) var(--sv-ease-immersive) both;
}

.sv-page-hero__inner > .sv-eyebrow {
    animation-delay: 200ms;
}

.sv-page-hero__inner > .sv-page-hero__title {
    animation-delay: 320ms;
}

.sv-page-hero__inner > .sv-page-hero__lead {
    animation-delay: 480ms;
}

.sv-page-hero__inner > *:nth-child(n + 4) {
    animation-delay: 620ms;
}

/* Subtle, slow zoom on the background image of every page hero.
 * The photo is re-painted on a ::before layer at `cover` and scaled with a
 * transform, so it always fills the frame — a width-based background-size
 * left portrait-shaped (mobile) heroes tiling — and the loop stays on the GPU.
 * background-position is inherited (center / center 40% for --tall).
 * Opacity is handled by AOS fade-in on the wrapper, so we leave it alone. */
.sv-page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: inherit;
    background-size: cover;
    background-position: inherit;
    animation: sv-page-hero-zoom var(--sv-duration-extended) var(--sv-ease-immersive) both,
               sv-page-hero-drift 22s var(--sv-ease-soft) 1800ms infinite alternate;
    will-change: transform;
    pointer-events: none;
}

@keyframes sv-page-hero-zoom {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1.05);
    }
}

@keyframes sv-page-hero-drift {
    from {
        transform: scale(1.05);
    }
    to {
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-page-hero::before {
        animation: none;
        transform: none;
    }
}

/* ─── Rooms hero (light, no scrim) ───────────────────────────── */

.sv-rooms-hero__inner > * {
    opacity: 0;
    animation: sv-reveal-rise-soft var(--sv-duration-cinematic) var(--sv-ease-immersive) both;
}

.sv-rooms-hero__inner > *:nth-child(1) {
    animation-delay: 120ms;
}

.sv-rooms-hero__inner > *:nth-child(2) {
    animation-delay: 280ms;
}

.sv-rooms-hero__inner > *:nth-child(n + 3) {
    animation-delay: 420ms;
}

/* AOS attribute on .sv-rooms-hero__inner can conflict — let the CSS win. */
.sv-rooms-hero__inner[data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

/* ─── Booking bar (overlap entrance) ─────────────────────────── */

.sv-booking-wrap {
    animation: sv-booking-rise var(--sv-duration-extended) var(--sv-ease-immersive) 700ms both;
}

@keyframes sv-booking-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* ─── Section heads — refine AOS fade-up to feel calmer ──────── */
/* Section heading typography rises just a touch slower than body content. */

[data-aos="fade-up"].sv-section-head {
    transition-timing-function: var(--sv-ease-immersive) !important;
    transition-duration: 1100ms !important;
}

/* ─── Smooth image scaling — unified luxury timing ───────────── */

.sv-room-card__media img,
.sv-room-row__media img,
.sv-editorial-card__media img,
.sv-overlay-card__bg img,
.sv-experience-cinematic__image,
.sv-gallery-item__trigger img,
.sv-intro__image,
.sv-media-slot__image {
    transition: transform var(--sv-duration-cinematic) var(--sv-ease-luxury),
                filter var(--sv-duration-cinematic) var(--sv-ease-luxury);
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .sv-intro__media:hover .sv-intro__image,
    .sv-media-slot:hover .sv-media-slot__image {
        transform: scale(1.035);
    }
}

/* Slight tonal lift on image hover */
.sv-editorial-card:hover .sv-editorial-card__media img,
.sv-room-card__link:hover .sv-room-card__media img,
.sv-experience-cinematic:hover .sv-experience-cinematic__image {
    filter: brightness(1.02);
}

/* ─── Elegant link underline grow ────────────────────────────── */

.sv-editorial-card__cta,
.sv-room-card__cta .sv-link {
    position: relative;
    display: inline-block;
    padding-bottom: 0.25em;
}

.sv-editorial-card__cta::after,
.sv-room-card__cta .sv-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0.35);
    transform-origin: left center;
    transition: transform var(--sv-duration-base) var(--sv-ease-luxury),
                opacity var(--sv-duration-base) var(--sv-ease-luxury);
    opacity: 0.45;
}

.sv-editorial-card:hover .sv-editorial-card__cta::after,
.sv-room-card__link:hover .sv-room-card__cta .sv-link::after {
    transform: scaleX(1);
    opacity: 1;
}

/* ─── Card lift — the gentlest hover translation ─────────────── */

.sv-panel--inset {
    transition:
        border-color var(--sv-duration-quick) var(--sv-ease-luxury),
        transform var(--sv-duration-quick) var(--sv-ease-luxury),
        box-shadow var(--sv-duration-quick) var(--sv-ease-luxury);
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .sv-panel--inset:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 18px 32px -28px rgba(28, 27, 25, 0.28);
    }

    .sv-events-package {
        transition:
            border-color var(--sv-duration-quick) var(--sv-ease-luxury),
            transform var(--sv-duration-quick) var(--sv-ease-luxury);
        will-change: transform;
    }

    .sv-events-package:hover {
        transform: translate3d(0, -2px, 0);
    }
}

/* ─── Button micro-motion — feel weighted, not bouncy ────────── */

.sv-btn {
    transition:
        color var(--sv-duration-fast) var(--sv-ease-luxury),
        background-color var(--sv-duration-fast) var(--sv-ease-luxury),
        border-color var(--sv-duration-fast) var(--sv-ease-luxury),
        opacity var(--sv-duration-fast) var(--sv-ease-luxury),
        transform var(--sv-duration-quick) var(--sv-ease-luxury);
    will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
    .sv-btn:active {
        transform: translate3d(0, 1px, 0);
    }
}

/* ─── Eyebrow + heading micro-flourish ───────────────────────── */
/* When inside a section head, the eyebrow can have a tiny accent line that
 * draws in. Used for the section head accent. Reduced-motion safe. */

.sv-section-head .sv-eyebrow::after,
.sv-page-hero .sv-eyebrow::after,
.sv-rooms-hero__inner .sv-eyebrow::after,
.sv-contact-header__inner .sv-eyebrow::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 2.5rem;
    height: 1px;
    margin-left: 0.75rem;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    animation: sv-eyebrow-stroke var(--sv-duration-slow) var(--sv-ease-immersive) 240ms forwards;
    opacity: 0.7;
}

.sv-section-head--center .sv-eyebrow::after,
.sv-page-hero--center .sv-eyebrow::after {
    display: none;
}

@keyframes sv-eyebrow-stroke {
    to {
        transform: scaleX(1);
    }
}

/* ─── Sticky header — calmer transition ──────────────────────── */

.main-header {
    transition: background-color var(--sv-duration-quick) var(--sv-ease-luxury),
                box-shadow var(--sv-duration-quick) var(--sv-ease-luxury),
                border-color var(--sv-duration-quick) var(--sv-ease-luxury),
                backdrop-filter var(--sv-duration-quick) var(--sv-ease-luxury),
                height var(--sv-duration-quick) var(--sv-ease-luxury);
}

/* ─── Sidebar menu — softer slide ────────────────────────────── */

.sidebar-menu {
    transition: opacity var(--sv-duration-base) var(--sv-ease-luxury),
                visibility var(--sv-duration-base) var(--sv-ease-luxury);
}

/* ─── Sidebar link entrance (when menu opens) ────────────────── */

.sidebar-menu.active .sidebar-links a {
    animation: sv-reveal-rise-soft var(--sv-duration-base) var(--sv-ease-immersive) both;
}

.sidebar-menu.active .sidebar-links a:nth-child(1) { animation-delay: 80ms; }
.sidebar-menu.active .sidebar-links a:nth-child(2) { animation-delay: 140ms; }
.sidebar-menu.active .sidebar-links a:nth-child(3) { animation-delay: 200ms; }
.sidebar-menu.active .sidebar-links a:nth-child(4) { animation-delay: 260ms; }
.sidebar-menu.active .sidebar-links a:nth-child(5) { animation-delay: 320ms; }
.sidebar-menu.active .sidebar-links a:nth-child(6) { animation-delay: 380ms; }
.sidebar-menu.active .sidebar-links a:nth-child(7) { animation-delay: 440ms; }
.sidebar-menu.active .sidebar-links a:nth-child(n + 8) { animation-delay: 500ms; }

/* ─── Reusable stagger utility for any grid container ────────── */
/* Apply .sv-stagger on a container with children, and child reveals will
 * cascade by --sv-stagger-step. The container can still use data-aos; the
 * children's stagger is purely CSS-driven on initial mount. */

.sv-stagger > * {
    opacity: 0;
    animation: sv-reveal-rise-soft var(--sv-duration-slow) var(--sv-ease-immersive) both;
}

.sv-stagger > *:nth-child(1) { animation-delay: calc(var(--sv-stagger-step) * 1); }
.sv-stagger > *:nth-child(2) { animation-delay: calc(var(--sv-stagger-step) * 2); }
.sv-stagger > *:nth-child(3) { animation-delay: calc(var(--sv-stagger-step) * 3); }
.sv-stagger > *:nth-child(4) { animation-delay: calc(var(--sv-stagger-step) * 4); }
.sv-stagger > *:nth-child(5) { animation-delay: calc(var(--sv-stagger-step) * 5); }
.sv-stagger > *:nth-child(6) { animation-delay: calc(var(--sv-stagger-step) * 6); }
.sv-stagger > *:nth-child(n + 7) { animation-delay: calc(var(--sv-stagger-step) * 7); }

/* ─── Lightbox cinematic ─────────────────────────────────────── */
/* Existing lightbox uses var(--sv-duration-fast). Bump to base for a calmer
 * open/close, and ease the image scale on entry. */

.sv-lightbox {
    transition: opacity var(--sv-duration-base) var(--sv-ease-luxury),
                visibility var(--sv-duration-base) var(--sv-ease-luxury);
}

.sv-lightbox__image {
    transition: opacity var(--sv-duration-base) var(--sv-ease-immersive),
                transform var(--sv-duration-cinematic) var(--sv-ease-immersive);
}

.sv-lightbox:not(.is-open) .sv-lightbox__image {
    opacity: 0;
    transform: scale(0.985);
}

/* ─── Gallery filter pill — refined hover/active ─────────────── */

.sv-gallery-filter,
.sv-rooms-filter {
    transition:
        color var(--sv-duration-quick) var(--sv-ease-luxury),
        border-color var(--sv-duration-quick) var(--sv-ease-luxury),
        background-color var(--sv-duration-quick) var(--sv-ease-luxury);
}

/* ─── Form input focus — calmer accent ───────────────────────── */

.sv-contact-form__input,
.sv-events-form__input,
.sv-room-booking__input,
.sv-booking__input {
    transition: border-color var(--sv-duration-quick) var(--sv-ease-luxury),
                box-shadow var(--sv-duration-quick) var(--sv-ease-luxury),
                background-color var(--sv-duration-quick) var(--sv-ease-luxury);
}

.sv-contact-form__input:focus,
.sv-events-form__input:focus,
.sv-room-booking__input:focus {
    box-shadow: 0 1px 0 0 var(--sv-accent);
}

/* ─── Anchor scroll offset (so smooth-scrolled targets clear the header) */

[id] {
    scroll-margin-top: calc(var(--sv-header-height) + var(--sv-space-4));
}