/*
 * transition.css - page transition: a warm veil opens from the centre while the Jain emblem builds up,
 * then closes back into the centre on the next page. Classes are set on <html> by site.js
 * (nk-leaving) and by the inline head script (nk-arriving).
 */

.nk-transition {
    position: fixed; inset: 0; z-index: 4000; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 50% 45%, rgba(255, 214, 140, .55), rgba(255, 214, 140, 0) 45%),
        linear-gradient(160deg, #fffaf0 0%, #fdf0d8 55%, #f9e2bd 100%);
    clip-path: circle(0% at 50% 50%);
    visibility: hidden;
    transition: clip-path .65s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .65s;
}
.nk-transition-mandala {
    position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -380px 0 0 -380px; opacity: .22;
    background: url('../images/lotus-mandala.svg') center / contain no-repeat;
    animation: nkSpin 120s linear infinite;
}
.nk-transition-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.nk-transition-halo {
    position: absolute; left: 50%; top: 42px; width: 240px; height: 240px; margin-left: -120px; margin-top: -70px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 200, 90, .6), rgba(255, 200, 90, 0) 68%);
    opacity: 0; transform: scale(.6); transition: opacity .6s ease .15s, transform .8s ease .15s;
}
.nk-emblem { position: relative; overflow: visible; filter: drop-shadow(0 6px 14px rgba(120, 60, 10, .28)); }
.nk-band, .nk-siddhashila, .nk-dot, .nk-swastika, .nk-hand, .nk-chakra { transform-box: fill-box; }
/* colour bands rise from the bottom, one after another */
.nk-band { transform-origin: 50% 100%; transform: scaleY(0); transition: transform .32s cubic-bezier(.3, .8, .3, 1); }
.nk-emblem-outline { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s ease; }
.nk-siddhashila { transform-origin: 50% 100%; opacity: 0; transform: translateY(-10px); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .9, .3, 1.3); }
.nk-dot { transform-origin: 50% 50%; opacity: 0; transform: scale(0); transition: opacity .2s ease, transform .3s cubic-bezier(.2, .9, .3, 1.6); }
.nk-swastika { transform-origin: 50% 50%; opacity: 0; transform: rotate(-180deg) scale(.3); transition: opacity .25s ease, transform .55s cubic-bezier(.2, .9, .3, 1.1); }
.nk-hand { transform-origin: 50% 100%; opacity: 0; transform: translateY(26px) scale(.9); transition: opacity .3s ease, transform .5s cubic-bezier(.2, .9, .3, 1.2); }
.nk-chakra { transform-origin: 50% 50%; animation: nkSpin 6s linear infinite; }
.nk-emblem-motto {
    margin-top: -2px; color: #3b2a1a; font: 500 15px/1.3 "Noto Sans Devanagari", Poppins, sans-serif; letter-spacing: .02em;
    opacity: 0; transition: opacity .4s ease .5s;
}
.nk-transition-text {
    color: #8f0b21; font: 600 21px/1.3 "Noto Sans Devanagari", Poppins, sans-serif; letter-spacing: .06em;
    opacity: 0; transform: translateY(8px); transition: opacity .4s ease .3s, transform .5s ease .3s;
}

/* veil open (leaving this page, or just arrived and not yet revealed) */
html.nk-leaving .nk-transition,
html.nk-arriving .nk-transition {
    pointer-events: auto; visibility: visible; clip-path: circle(150% at 50% 50%);
    transition: clip-path .6s cubic-bezier(.65, 0, .35, 1), visibility 0s;
}
html.nk-leaving .nk-band, html.nk-arriving .nk-band { transform: none; }
html.nk-leaving .nk-band-5 { transition-delay: .05s; }
html.nk-leaving .nk-band-4 { transition-delay: .11s; }
html.nk-leaving .nk-band-3 { transition-delay: .17s; }
html.nk-leaving .nk-band-2 { transition-delay: .23s; }
html.nk-leaving .nk-band-1 { transition-delay: .29s; }
html.nk-leaving .nk-emblem-outline, html.nk-arriving .nk-emblem-outline { stroke-dashoffset: 0; }
html.nk-leaving .nk-hand, html.nk-arriving .nk-hand { opacity: 1; transform: none; }
html.nk-leaving .nk-hand { transition-delay: .22s; }
html.nk-leaving .nk-swastika, html.nk-arriving .nk-swastika { opacity: 1; transform: none; }
html.nk-leaving .nk-swastika { transition-delay: .3s; }
html.nk-leaving .nk-dot, html.nk-arriving .nk-dot { opacity: 1; transform: none; }
html.nk-leaving .nk-dot-1 { transition-delay: .4s; }
html.nk-leaving .nk-dot-2 { transition-delay: .46s; }
html.nk-leaving .nk-dot-3 { transition-delay: .52s; }
html.nk-leaving .nk-siddhashila, html.nk-arriving .nk-siddhashila { opacity: 1; transform: none; }
html.nk-leaving .nk-siddhashila { transition-delay: .56s; }
html.nk-leaving .nk-emblem-motto, html.nk-arriving .nk-emblem-motto { opacity: 1; }
html.nk-leaving .nk-transition-halo, html.nk-arriving .nk-transition-halo { opacity: 1; transform: scale(1); animation: nkHaloPulse 2.4s ease-in-out .9s infinite alternate; }
html.nk-leaving .nk-transition-text, html.nk-arriving .nk-transition-text { opacity: 1; transform: none; }
@keyframes nkHaloPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.12); opacity: .7; } }

/* arriving: start fully shown with no animation, then the class is removed and the veil closes */
html.nk-arriving .nk-transition, html.nk-arriving .nk-transition * { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
    .nk-transition { display: none; }
}