/* ============================================================
   THE SHAKESPEARE PUB BANGKOK — Scroll & Hover Animations
   Powered by IntersectionObserver (see main.js)
   ============================================================ */

/* ── Base states: elements start hidden ──────────────────── */

/* Fade + slide up (default reveal) */
.reveal {
    opacity   : 0;
    transform : translateY(36px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.is-visible {
    opacity   : 1;
    transform : translateY(0);
}

/* Fade + slide from left */
.reveal-left {
    opacity   : 0;
    transform : translateX(-50px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-left.is-visible {
    opacity   : 1;
    transform : translateX(0);
}

/* Fade + slide from right */
.reveal-right {
    opacity   : 0;
    transform : translateX(50px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal-right.is-visible {
    opacity   : 1;
    transform : translateX(0);
}

/* Fade only */
.reveal-fade {
    opacity   : 0;
    transition: opacity 0.9s ease;
}
.reveal-fade.is-visible {
    opacity   : 1;
}

/* Scale up from slightly smaller */
.reveal-scale {
    opacity   : 0;
    transform : scale(0.92);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-scale.is-visible {
    opacity   : 1;
    transform : scale(1);
}

/* Clip-path curtain reveal for images (wipes down) */
.reveal-curtain {
    clip-path : inset(0 0 100% 0);
    transition: clip-path 0.85s cubic-bezier(0.77, 0, 0.18, 1);
    /* Safety fallback: reveal after 1.5s even if observer doesn't fire */
    animation : curtainFallback 0s 1.5s forwards;
}
@keyframes curtainFallback {
    to { clip-path: inset(0 0 0% 0); }
}
.reveal-curtain.is-visible {
    clip-path : inset(0 0 0% 0);
    animation : none;
}


/* ── Gold separator: draw from left ──────────────────────── */
.separator {
    transform  : scaleX(0);
    transition : transform 0.7s cubic-bezier(0.77, 0, 0.18, 1);
}
.separator.is-visible {
    transform: scaleX(1);
}
.separator--center {
    transform-origin: center;
}


/* ── Stagger delays for sibling groups ───────────────────── */
/* Assign .stagger-children to parent; children get .reveal */
.stagger-children .reveal:nth-child(1) { transition-delay: 0ms;   }
.stagger-children .reveal:nth-child(2) { transition-delay: 120ms; }
.stagger-children .reveal:nth-child(3) { transition-delay: 240ms; }
.stagger-children .reveal:nth-child(4) { transition-delay: 360ms; }

/* Stagger for gallery items specifically */
.gallery-grid .gallery-item:nth-child(1) { transition-delay: 0ms;   }
.gallery-grid .gallery-item:nth-child(2) { transition-delay: 100ms; }
.gallery-grid .gallery-item:nth-child(3) { transition-delay: 200ms; }
.gallery-grid .gallery-item:nth-child(4) { transition-delay: 300ms; }

/* Stagger for event cards */
.events-grid .event-card:nth-child(1) { transition-delay: 0ms;   }
.events-grid .event-card:nth-child(2) { transition-delay: 100ms; }
.events-grid .event-card:nth-child(3) { transition-delay: 200ms; }
.events-grid .event-card:nth-child(4) { transition-delay: 300ms; }
.events-grid .event-card:nth-child(5) { transition-delay: 400ms; }
.events-grid .event-card:nth-child(6) { transition-delay: 500ms; }


/* ── Hero section entrance ────────────────────────────────── */
/* Animate only opacity — never override transform (used for positioning) */
.hero__overlay {
    opacity   : 0;
    animation : heroFadeIn 1.1s ease 0.4s forwards;
}
@keyframes heroFadeIn {
    to { opacity: 1; }
}


/* ── Parallax on hero image (JS sets --scroll-y custom prop) ── */
.hero__image {
    transform: translateY(calc(var(--scroll-y, 0) * 0.25px));
}


/* ── Navigation entrance: none on desktop (header is static absolute) ── */
/* Mobile entrance animation will be added with the mobile design.        */


/* ── Reduce motion: respect OS preference ─────────────────── */
@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right,
    .reveal-fade, .reveal-scale, .reveal-curtain,
    .separator, .hero__overlay, .site-header {
        transition : none !important;
        animation  : none !important;
        opacity    : 1 !important;
        transform  : none !important;
        clip-path  : none !important;
    }
}