/* A quiet, vector-drawn passage. No images, WebGL, or animation dependencies. */
.aj-passage {
    --passage-ink: color-mix(in srgb, var(--aj-text) 72%, var(--aj-primary));
    --passage-muted: color-mix(in srgb, var(--aj-text) 68%, var(--aj-surface));
    --passage-line: color-mix(in srgb, var(--aj-secondary) 48%, var(--aj-surface));
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--aj-surface);
    color: var(--passage-ink);
    opacity: 0;
    transition: opacity 160ms ease;
    touch-action: none;
}
.aj-passage[hidden], .aj-passage__skip[hidden] { display: none !important; }
.aj-passage.is-visible { opacity: 1; }
.aj-passage.is-leaving { opacity: 0; transition-duration: 420ms; pointer-events: none; }
.aj-passage__light {
    position: absolute;
    inset: -20%;
    z-index: -1;
    background: radial-gradient(ellipse at 50% 44%, var(--aj-surface) 0%, color-mix(in srgb, var(--aj-surface) 96%, var(--aj-secondary-light)) 32%, color-mix(in srgb, var(--aj-surface) 94%, var(--aj-primary)) 75%);
}
.aj-passage__composition { width: min(640px, 94vw); text-align: center; transform: translateY(-1.5vh); }
.aj-passage__eyebrow {
    margin: 0 0 -6px;
    color: var(--passage-muted);
    font: 400 12px/2 var(--aj-body-font, "Alexandria", sans-serif);
}
.aj-passage__scene { width: 100%; }
.aj-passage__drawing { display: block; width: 100%; height: auto; overflow: visible; }
.aj-passage__floor { opacity: .23; }
.aj-passage__ornaments { opacity: .55; }
.aj-passage__arch { transform-origin: 320px 322px; }
.aj-passage__arch--far { opacity: .32; }
.aj-passage__arch--middle { opacity: .5; }
.aj-passage__arch--near { opacity: .8; }
.aj-passage.is-visible .aj-passage__arch { animation: passage-advance 1600ms cubic-bezier(.2,.65,.25,1) both; }
.aj-passage.is-visible .aj-passage__sanctuary { transform-origin: 320px 310px; animation: passage-sanctuary 1800ms ease-out both; }
.aj-passage.is-visible .aj-passage__halo { animation: passage-breathe 3200ms ease-in-out infinite alternate; }
.aj-passage.is-visible .aj-passage__motes { animation: passage-motes 3400ms ease-in-out infinite alternate; }
.aj-passage__copy { margin-top: -18px; position: relative; }
.aj-passage__title {
    margin: 0;
    color: var(--passage-ink);
    font: 500 clamp(30px, 4.5vw, 39px)/1.7 "Noto Naskh Arabic", "Kufam", serif;
}
.aj-passage__destination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 8px 0 0;
    color: var(--passage-muted);
    font: 400 12px/2 var(--aj-body-font, "Alexandria", sans-serif);
}
.aj-passage__destination::before, .aj-passage__destination::after {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--passage-line);
}
.aj-passage__thread { width: 76px; height: 1px; margin: 28px auto 0; overflow: hidden; background: var(--passage-line); }
.aj-passage__thread span { display: block; width: 50%; height: 100%; background: var(--aj-secondary); }
.aj-passage.is-visible .aj-passage__thread span { animation: passage-thread 1900ms ease-in-out infinite; }
.aj-passage__skip {
    position: absolute;
    bottom: max(24px, env(safe-area-inset-bottom));
    border: 1px solid var(--passage-line);
    border-radius: 24px;
    padding: 9px 20px;
    background: var(--aj-surface);
    color: var(--passage-ink);
    font: 400 12px/1.7 var(--aj-body-font, "Alexandria", sans-serif);
    cursor: pointer;
}
.aj-passage__skip:focus-visible { outline: 2px solid var(--passage-ink); outline-offset: 4px; }
@keyframes passage-advance { from { transform: scale(.93); } to { transform: scale(1.075); } }
@keyframes passage-sanctuary { from { opacity: .45; transform: scale(.96); } to { opacity: .95; transform: scale(1.02); } }
@keyframes passage-breathe { from { opacity: .55; } to { opacity: 1; } }
@keyframes passage-motes { from { opacity: .2; transform: translateY(3px); } to { opacity: .65; transform: translateY(-5px); } }
@keyframes passage-thread { 0% { transform: translateX(110%); } 100% { transform: translateX(-210%); } }
@media (max-width: 600px) {
    .aj-passage__composition { width: min(510px, 100vw); }
    .aj-passage__eyebrow { font-size: 10px; margin-bottom: 6px; }
    .aj-passage__copy { margin-top: 0; }
    .aj-passage__destination { font-size: 11px; }
}
@media (max-height: 640px) and (min-width: 601px) {
    .aj-passage__composition { width: 430px; }
    .aj-passage__title { font-size: 29px; }
    .aj-passage__thread { margin-top: 16px; }
}
@media (max-height: 500px) {
    .aj-passage__composition { width: min(350px, 90vw); }
    .aj-passage__title { font-size: 25px; }
    .aj-passage__copy { margin-top: -20px; }
    .aj-passage__thread { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .aj-passage, .aj-passage.is-leaving { transition-duration: 100ms; }
    .aj-passage *, .aj-passage.is-visible * { animation: none !important; }
}