/* ───────── Page transition ─────────
   Following a link to another page of the site: a navy curtain (with the school's logo and orbit) rises from the bottom
   and covers the page; the next page loads under it, then the curtain lifts away upward and the page's own entrance
   animations play. All driven by js/transitions.js; with "reduce motion", without JS or in print, there is no curtain.
   To undo it all: remove the three lines in base.html (the head script, this stylesheet + script, the .gs-curtain block). */

.gs-curtain {
    --wave: clamp(40px, 7vw, 100px); --ease-in: cubic-bezier(.5, 0, .2, 1); --ease-out: cubic-bezier(.6, 0, .2, 1);
    position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; pointer-events: none; visibility: hidden;
    background: var(--ink) url("../images/ellipses.svg") 62% 50% / 1500px auto no-repeat;
    transform: translateY(calc(100% + var(--wave)));
}
/* the curved edges: leading edge on top while it rises, trailing edge below while it leaves */
.gs-curtain-edge { position: absolute; left: 0; width: 100%; height: var(--wave); fill: var(--ink); display: block; }
.gs-curtain-edge.top { bottom: calc(100% - 1px); }
.gs-curtain-edge.bottom { top: calc(100% - 1px); transform: scaleY(-1); }

/* the mark: the logo in a white disc, ringed by the yellow orbit, like the hero */
.gs-curtain-mark { position: relative; display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: #fff; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); opacity: 0; scale: .7; }
.gs-curtain-mark img { width: 84%; height: auto; object-fit: contain; }
.gs-curtain-ring { position: absolute; inset: -12px -34px; border: 3px solid var(--yellow); border-radius: 50%; rotate: -18deg; pointer-events: none; }

/* 1. leaving this page: rise and cover */
.gs-curtain.is-in { visibility: visible; transform: translateY(0); transition: transform .17s var(--ease-in); pointer-events: auto; will-change: transform; }
.gs-curtain.is-in .gs-curtain-mark { opacity: 1; scale: 1; transition: scale .22s var(--ease-out) .05s, opacity .15s ease .05s; }

/* 2. the next page starts covered (set before the first paint by the head script), ... */
html.gs-arriving { background: var(--ink); }
html.gs-arriving .gs-curtain { visibility: visible; transform: translateY(0); transition: none; pointer-events: auto; }
html.gs-arriving .gs-curtain-mark { opacity: 1; scale: 1; transition: none; }

/* 3. ... then lifts away upward */
.gs-curtain.is-out { visibility: visible; transform: translateY(calc(-100% - var(--wave))); transition: transform .32s var(--ease-out); will-change: transform; }
.gs-curtain.is-out .gs-curtain-mark { opacity: 0; scale: 1.08; transition: scale .2s ease, opacity .12s ease; }

/* while the next page is covered, its own entrance animations wait (CSS animations here; transitions are held by the script) */
html.gs-hold body > :not(.gs-curtain), html.gs-hold body > :not(.gs-curtain) *,
html.gs-hold body > :not(.gs-curtain)::before, html.gs-hold body > :not(.gs-curtain)::after,
html.gs-hold body > :not(.gs-curtain) *::before, html.gs-hold body > :not(.gs-curtain) *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce), print { .gs-curtain { display: none !important; } }