/* Motion + interaction layer (framer-motion equivalents, vanilla) */

html {
    scroll-behavior: auto !important;
}
html.lenis, html.lenis body {
    height: auto;
}
.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}
.lenis.lenis-stopped {
    overflow: hidden;
}
.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

.rv {
    opacity: 0;
    transform: translateY(36px) translateZ(0);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, opacity;
}
.rv.rv-in {
    opacity: 1;
    transform: none;
}

[data-parallax-bg],
[data-parallax-bg] img,
[data-parallax-img] {
    will-change: transform;
    backface-visibility: hidden;
}

#gallery-grid [data-gallery-item] img,
#services-section article img {
    content-visibility: auto;
    contain-intrinsic-size: 1px 500px;
}

.hline {
    display: block;
    overflow: hidden;
}
.hline > span {
    display: block;
    transform: translateY(115%);
    animation: lineUp 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes lineUp {
    to {
        transform: translateY(0);
    }
}

.fu {
    opacity: 0;
    animation: fadeUp 0.8s ease forwards;
}
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.bounce-y {
    animation: bounceY 2.2s ease-in-out infinite;
}
@keyframes bounceY {
    0%,
    100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, 10px);
    }
}

#site-header.header-scrolled {
    background: rgba(35, 8, 40, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

#mobile-menu.open {
    display: flex;
}

/* Z-indexes + modal panel metrics (not in compiled tailwind build) */
#booking-modal {
    z-index: 90;
}
#booking-modal.open {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
}
#booking-modal .relative {
    width: 100%;
    max-width: 42rem;
    margin: 4vh 1rem 2rem;
    max-height: 92vh;
    overflow-y: auto;
}
#gallery-lightbox {
    z-index: 80;
}
#toast-wrap {
    z-index: 100;
}

/* Service pill checkboxes */
.svc-pill input:checked + span {
    background: linear-gradient(135deg, #fbbf24, #f97316);
    color: #2e0832;
    border-color: transparent;
}
.svc-pill span:hover {
    border-color: rgba(251, 191, 36, 0.6);
}

/* FAQ accordion */
.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}
.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Booking modal */
#booking-modal.open .relative {
    animation: modalIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Lightbox */
#gallery-lightbox.open {
    display: flex;
}

/* Toast */
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 14px;
    font-family: "Outfit", sans-serif;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: toastIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.toast-success {
    background: #052e16;
    border: 1px solid rgba(52, 211, 153, 0.4);
    color: #6ee7b7;
}
.toast-error {
    background: #3b0713;
    border: 1px solid rgba(244, 63, 94, 0.4);
    color: #fda4af;
}
@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.spin {
    animation: spin 0.9s linear infinite;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rv,
    .fu,
    .hline > span {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }
}