/**
 * mp-reveal.css — Shree Pithad Dham motion system
 *
 *  1. Temple-doors intro (first page of a session, opted in by the <head> script)
 *  2. Page banner + homepage hero entrance (pure CSS, runs from first paint)
 *  3. Scroll reveal (works with mp-reveal.js; hidden state only once JS marks elements)
 *  4. Cross-page view transitions (header stays put, content crossfades)
 *
 * Everything is switched off under prefers-reduced-motion.
 */

:root {
    --mp-ease-out: cubic-bezier(.2, .7, .2, 1);
    --mp-ease-door: cubic-bezier(.65, 0, .35, 1);
    --mp-enter: 0s;                /* entrance offset; pushed back while the doors open */
}
.mp-doors-on { --mp-enter: 1.2s; }

/* ── 1. Temple doors ────────────────────────────────────────────────────── */
.mp-doors { display: none; }

.mp-doors-on .mp-doors {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 100000;
    perspective: 1800px;
    pointer-events: auto;
    animation: mp-doors-pass 0s linear .9s forwards, mp-doors-done 0s linear 1.75s forwards;
}

/* Light from the sanctum, glimpsed as the doors part */
.mp-doors::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%, rgba(255, 214, 140, 0.95) 0%, rgba(232, 130, 12, 0.55) 30%, rgba(43, 13, 13, 0) 70%);
    opacity: 0;
    animation: mp-sanctum-glow 1.7s ease-out both;
}

.mp-door {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.5%;
    backface-visibility: hidden;
    background:
        /* carved panel rails */
        repeating-linear-gradient(180deg, transparent 0 calc(25% - 2px), rgba(201, 154, 63, 0.55) calc(25% - 2px) 25%),
        /* depth toward the hinge */
        linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, transparent 35%),
        linear-gradient(160deg, #7A2323 0%, #4A1414 55%, #2B0D0D 100%);
    box-shadow:
        inset 0 0 0 14px rgba(43, 13, 13, 0.85),
        inset 0 0 0 16px rgba(201, 154, 63, 0.7),
        inset 0 0 0 36px rgba(110, 30, 30, 0.6),
        inset 0 0 0 37px rgba(201, 154, 63, 0.35);
}
.mp-door-left {
    left: 0;
    transform-origin: left center;
    animation: mp-door-left 1s var(--mp-ease-door) .7s both;
}
.mp-door-right {
    right: 0;
    transform-origin: right center;
    animation: mp-door-right 1s var(--mp-ease-door) .7s both;
}
.mp-door-right {
    background:
        repeating-linear-gradient(180deg, transparent 0 calc(25% - 2px), rgba(201, 154, 63, 0.55) calc(25% - 2px) 25%),
        linear-gradient(270deg, rgba(0, 0, 0, 0.35) 0%, transparent 35%),
        linear-gradient(200deg, #7A2323 0%, #4A1414 55%, #2B0D0D 100%);
}
/* Brass door rings on the meeting edge */
.mp-door::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border-radius: 50%;
    border: 3px solid #C99A3F;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.mp-door-left::after { right: 22px; }
.mp-door-right::after { left: 22px; }

.mp-doors-emblem {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 26px 30px 20px;
    border-radius: 50% / 46%;
    background: radial-gradient(circle, #4A1414 0%, #2B0D0D 100%);
    box-shadow: 0 0 0 2px #C99A3F, 0 0 0 8px rgba(43, 13, 13, 0.9), 0 0 0 9px rgba(201, 154, 63, 0.5), 0 0 40px rgba(232, 130, 12, 0.35);
    color: #F4C77E;
    transform: translate(-50%, -50%);
    animation: mp-emblem 1.05s var(--mp-ease-out) both;
}
.mp-doors-emblem span {
    font-family: var(--mp-font-display, 'Marcellus', serif);
    font-size: 15px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.mp-doors-emblem .mp-icon { filter: drop-shadow(0 0 8px rgba(244, 199, 126, 0.6)); }

@keyframes mp-door-left  { to { transform: rotateY(-100deg); opacity: .2; } }
@keyframes mp-door-right { to { transform: rotateY(100deg);  opacity: .2; } }
@keyframes mp-emblem {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.82); }
    28%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    68%  { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
    88%  { opacity: 0; transform: translate(-50%, -50%) scale(1.14); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes mp-sanctum-glow {
    0%, 40% { opacity: 0; }
    62%     { opacity: .9; }
    100%    { opacity: 0; }
}
@keyframes mp-doors-pass { to { pointer-events: none; } }
@keyframes mp-doors-done { to { visibility: hidden; } }

@media (max-width: 575.98px) {
    .mp-door { box-shadow: inset 0 0 0 8px rgba(43, 13, 13, 0.85), inset 0 0 0 10px rgba(201, 154, 63, 0.7), inset 0 0 0 22px rgba(110, 30, 30, 0.6), inset 0 0 0 23px rgba(201, 154, 63, 0.35); }
    .mp-door-left::after { right: 14px; }
    .mp-door-right::after { left: 14px; }
}

/* ── 2. Entrance: page banner ───────────────────────────────────────────── */
/* The mandala unfolds, the title is unveiled upward, a gold rule draws, the trail settles. */
.mp-page-banner::before {
    animation: mp-mandala 1.6s var(--mp-ease-out) var(--mp-enter) both;
}
.mp-page-banner .mp-eyebrow {
    animation: mp-fade-up .7s var(--mp-ease-out) calc(var(--mp-enter) + .1s) both;
}
/* Headline is the LCP element: it is not held back by the doors (it unveils beneath them) */
.mp-page-banner h1 {
    animation: mp-unveil .95s var(--mp-ease-out) .2s both;
}
.mp-page-banner .mp-breadcrumb {
    animation: mp-fade .7s ease-out calc(var(--mp-enter) + .6s) both;
}
.mp-page-banner .mp-breadcrumb::before {
    content: '';
    display: block;
    width: 72px;
    height: 1px;
    margin: 0 auto 14px;
    background: linear-gradient(90deg, transparent, var(--mp-gold, #C99A3F), transparent);
    transform-origin: center;
    animation: mp-draw .8s var(--mp-ease-out) calc(var(--mp-enter) + .5s) both;
}

/* ── 2b. Entrance: homepage hero ────────────────────────────────────────── */
#slider.mp-hero .swiper-slide { overflow: hidden; }
.mp-hero-bg {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: mp-settle 2.6s var(--mp-ease-out) var(--mp-enter) both;
}
#slider.mp-hero .swiper-slide > .container { position: relative; z-index: 1; }

.mp-hero-caption .mp-eyebrow { animation: mp-fade-up .8s var(--mp-ease-out) calc(var(--mp-enter) + .25s) both; }
.mp-hero-caption .mp-hero-title { animation: mp-unveil 1s var(--mp-ease-out) .35s both; }
.mp-hero-caption .mp-hero-lead { animation: mp-fade-up .8s var(--mp-ease-out) calc(var(--mp-enter) + .6s) both; }
.mp-hero-caption .mp-hero-cta { animation: mp-fade-up .8s var(--mp-ease-out) calc(var(--mp-enter) + .75s) both; }
.mp-quick-grid { animation: mp-rise 1s var(--mp-ease-out) calc(var(--mp-enter) + .85s) both; }

@keyframes mp-mandala {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-40deg); }
    to   { opacity: .35; transform: translate(-50%, -50%) scale(1) rotate(0); }
}
@keyframes mp-unveil {
    from { opacity: .01; transform: translateY(.45em); clip-path: inset(0 -5% 100% -5%); }
    to   { opacity: 1; transform: none; clip-path: inset(-25% -5% -25% -5%); }
}
@keyframes mp-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mp-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mp-rise {
    from { opacity: 0; transform: translateY(36px); }
    to   { opacity: 1; transform: none; }
}
@keyframes mp-settle {
    from { transform: scale(1.12); filter: brightness(.6); }
    to   { transform: scale(1); filter: none; }
}

/* ── 3. Scroll reveal ───────────────────────────────────────────────────── */
/* Hidden state only applies once mp-reveal.js has marked an element, so no-JS shows everything. */
.reveal-ready .mp-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity .8s var(--mp-ease-out) var(--mp-stagger, 0ms),
        transform .8s var(--mp-ease-out) var(--mp-stagger, 0ms);
}
.reveal-ready .mp-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Cards rise with a soft scale so a row "settles" one by one */
.reveal-ready .mp-card-generic.mp-reveal,
.reveal-ready .kd-home-box.mp-reveal,
.reveal-ready .ev-festival-card.mp-reveal,
.reveal-ready .ev-upcoming-card.mp-reveal { transform: translateY(32px) scale(.97); }
.reveal-ready .mp-card-generic.mp-reveal.is-visible,
.reveal-ready .kd-home-box.mp-reveal.is-visible,
.reveal-ready .ev-festival-card.mp-reveal.is-visible,
.reveal-ready .ev-upcoming-card.mp-reveal.is-visible { transform: none; }

/* Section heads build line by line: eyebrow → title → rule → lead */
.reveal-ready .mp-section-head.mp-reveal { opacity: 1; transform: none; }
.reveal-ready .mp-section-head.mp-reveal > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .7s var(--mp-ease-out), transform .7s var(--mp-ease-out);
}
.reveal-ready .mp-section-head.mp-reveal.is-visible > * { opacity: 1; transform: none; }
.reveal-ready .mp-section-head.mp-reveal.is-visible > :nth-child(2) { transition-delay: .1s; }
.reveal-ready .mp-section-head.mp-reveal.is-visible > :nth-child(3) { transition-delay: .2s; }
.reveal-ready .mp-section-head.mp-reveal.is-visible > :nth-child(n+4) { transition-delay: .3s; }

/* Gold divider rules draw outward from the centre diamond */
.reveal-ready .mp-reveal .mp-divider::before,
.reveal-ready .mp-reveal .mp-divider::after,
.reveal-ready .mp-divider.mp-reveal::before,
.reveal-ready .mp-divider.mp-reveal::after {
    transform: scaleX(0);
    transition: transform .9s var(--mp-ease-out) .3s;
}
.reveal-ready .mp-reveal .mp-divider::before,
.reveal-ready .mp-divider.mp-reveal::before { transform-origin: right center; }
.reveal-ready .mp-reveal .mp-divider::after,
.reveal-ready .mp-divider.mp-reveal::after { transform-origin: left center; }
.reveal-ready .mp-reveal.is-visible .mp-divider::before,
.reveal-ready .mp-reveal.is-visible .mp-divider::after,
.reveal-ready .mp-divider.mp-reveal.is-visible::before,
.reveal-ready .mp-divider.mp-reveal.is-visible::after { transform: scaleX(1); }

/* ── 4. Cross-page view transitions ─────────────────────────────────────── */
@view-transition { navigation: auto; }

.mp-topbar { view-transition-name: mp-topbar; }
/* Named on #header-wrap (already a z-indexed stacking context) — naming #header would trap the nav and dropdown under page content */
#header.mp-header #header-wrap { view-transition-name: mp-header; }
#header.mp-header > .container { view-transition-name: mp-brand; }

::view-transition-old(root) { animation: mp-vt-out .22s ease-in both; }
::view-transition-new(root) { animation: mp-vt-in .45s var(--mp-ease-out) both; }
/* Header is identical across pages: swap it instantly instead of crossfading (which washes it out) */
::view-transition-group(mp-header),
::view-transition-group(mp-brand),
::view-transition-group(mp-topbar) { animation: none; }
::view-transition-old(mp-header),
::view-transition-old(mp-brand),
::view-transition-old(mp-topbar) { display: none; }
::view-transition-new(mp-header),
::view-transition-new(mp-brand),
::view-transition-new(mp-topbar) { animation: none; }

@keyframes mp-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes mp-vt-in  { from { opacity: 0; transform: translateY(12px); } }

/* ── Print: never print an unrevealed (transparent) section ─────────────── */
@media print {
    .mp-doors { display: none !important; }
    .mp-page-banner::before,
    .mp-page-banner .mp-eyebrow,
    .mp-page-banner h1,
    .mp-page-banner .mp-breadcrumb,
    .mp-page-banner .mp-breadcrumb::before,
    .mp-hero-bg,
    .mp-hero-caption > *,
    .mp-quick-grid { animation: none !important; }
    .mp-reveal,
    .mp-reveal > *,
    .mp-reveal::before,
    .mp-reveal::after,
    .mp-reveal .mp-divider::before,
    .mp-reveal .mp-divider::after {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ── Reduced motion: everything visible, nothing moves ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mp-doors { display: none !important; }
    .mp-page-banner::before,
    .mp-page-banner .mp-eyebrow,
    .mp-page-banner h1,
    .mp-page-banner .mp-breadcrumb,
    .mp-page-banner .mp-breadcrumb::before,
    .mp-hero-bg,
    .mp-hero-caption > *,
    .mp-quick-grid { animation: none !important; }
    .mp-reveal,
    .mp-reveal > *,
    .mp-reveal::before,
    .mp-reveal::after,
    .mp-reveal .mp-divider::before,
    .mp-reveal .mp-divider::after {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    @view-transition { navigation: none; }
}