/* css/splash.css — front page only.
   Scoped to body[data-page="home"] where it overrides site-wide styles, so the rest of the
   site keeps its own look. */

/* The palette now lives in site.css :root and is shared by every page — these are aliases
   onto it, kept so the rules below stay readable, and so there is no second set of colour
   values that could drift from the site's. Only cream-soft is local: the splash wants a
   brighter muted tone than body copy elsewhere. */
body[data-page="home"] {
    --splash-gold: var(--color-accent);
    --splash-gold-bright: var(--color-accent-bright);
    --splash-gold-dim: var(--color-border);
    --splash-cream: var(--color-text);
    --splash-cream-soft: #ddd2ba;
    --splash-display: var(--font-display);

    /* A stronger version of the site-wide wash — the front door gets more light than the
       interior pages. */
    background-image:
        radial-gradient(ellipse 70% 50% at 50% 0%, rgba(200, 164, 77, 0.10), transparent 70%),
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(120, 90, 40, 0.10), transparent 70%);
}

/* Available to a screen reader and to a crawler reading the document outline, but not
   painted — used for the wordmark and tagline when the crest artwork already shows them.
   Not display:none, which would remove them from the accessibility tree entirely. */
body[data-page="home"] .is-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.splash {
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 1.25rem 3.5rem;
    text-align: center;
}

/* The header treatment moved into site.css so every page shares it; the splash only asks
   for a translucent bar, letting the wash behind show through. */
body[data-page="home"] #site-header {
    background: rgba(11, 10, 8, 0.82);
    backdrop-filter: blur(6px);
}

/* --- Crest ------------------------------------------------------------------- */

.splash-hero {
    margin: 0 auto 1.25rem;
    max-width: 320px;
}

.splash-hero-img {
    display: block;
    width: 100%;
    height: auto;
}

.splash-hero--placeholder .splash-hero-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px solid var(--splash-gold-dim);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 30%, rgba(200, 164, 77, 0.16), transparent 60%);
}

.splash-hero-glyph {
    font-size: clamp(3rem, 10vw, 5rem);
    line-height: 1;
    opacity: 0.6;
}

/* --- Wordmark and tagline ----------------------------------------------------- */

.splash-wordmark {
    margin: 0;
    font-family: var(--splash-display);
    font-weight: 400;
    font-size: clamp(3rem, 12vw, 6.5rem);
    line-height: 1;
    letter-spacing: 0.005em;
    color: var(--splash-cream);
}

.splash-tm {
    font-size: 0.22em;
    vertical-align: super;
    letter-spacing: 0.04em;
    color: var(--splash-cream-soft);
}

.splash-tagline {
    margin: 0.9rem auto 0;
    /* Wide enough to sit on one line at desktop — at 40ch it broke just before "of the
       world", which reads as an accident rather than a line break. */
    max-width: 48ch;
    font-family: var(--splash-display);
    font-size: clamp(1rem, 2.5vw, 1.32rem);
    line-height: 1.45;
    color: var(--splash-cream-soft);
}

.parenthetical { font-style: italic; }

/* --- Ornamental rule ----------------------------------------------------------- */

/* Hairline, diamond, hairline. Built from elements rather than a background image so it
   inherits the gold variable and scales with the page. */
.splash-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem auto 1rem;
    max-width: 320px;
}

.splash-rule span {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--splash-gold-dim), transparent);
}

.splash-rule i {
    width: 7px;
    height: 7px;
    transform: rotate(45deg);
    border: 1px solid var(--splash-gold);
    flex-shrink: 0;
}

/* --- Quote carousel ------------------------------------------------------------ */

.splash-quotes {
    position: relative;
    margin: 0 auto 2.5rem;
    max-width: 700px;
    padding: 2rem 3.25rem 2.25rem;
    border: 1px solid var(--splash-gold-dim);
    /* Hands vertical gestures to the browser for page scrolling and leaves horizontal ones
       to us. Without it the browser waits to see which way a gesture is going before
       scrolling, which makes the whole page feel like it sticks under the thumb. */
    touch-action: pan-y;
    background: linear-gradient(180deg, rgba(23, 19, 13, 0.55), rgba(11, 10, 8, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The slides are absolutely positioned so they can cross-fade over each other, which takes
   them out of flow and leaves the track with no height of its own. A fixed height can't
   work here: the quotes are drawn at random from the table, so any value tall enough for
   the longest leaves a chasm under the shortest, and any value that looks right for a
   typical quote lets a long one spill out of the panel.
   splash.js measures the tallest slide in the current set and sets the height to match —
   the panel then fits its own content and never resizes mid-rotation. This min-height is
   only the floor for before that runs, or if JS never does. */
.splash-quote-track {
    position: relative;
    width: 100%;
    min-height: 6.5rem;
    /* Slides now travel a full ±100%, so without clipping they would sweep across the
       arrows and out past the panel border. Clipping at the track keeps the motion looking
       like content moving behind the panel's edge. */
    overflow: hidden;
}

.splash-quote {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    opacity: 0;
    transform: translateX(0);
    transition: opacity 600ms ease, transform 600ms ease;
    pointer-events: none;
}

.splash-quote.is-active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* Suppresses the transition for the one reflow it takes to move a slide to its starting
   position.
   This is load-bearing, and its absence is subtle: because .splash-quote transitions
   transform, adding an -enter class does not put the slide at ±100%, it starts a 600ms
   glide *towards* ±100%. Releasing it a frame later then reverses that from wherever it
   had crept to — a few pixels — so the slide appeared to cross-fade in place. Suppressing
   the transition makes the element jump to its mark, and only the real entrance animates. */
.splash-quote.is-positioning { transition: none; }

/* Direction-aware slide states. The -enter class is the position a slide starts from,
   applied with is-positioning above and then released so it animates in. The -leave class
   is the position a slide travels to, and is cleaned up once the transition ends.
   Going next, content moves right-to-left; going back, the reverse — so the motion always
   matches the arrow that was pressed. */
.splash-quote.slide-next-enter { transform: translateX(100%); opacity: 0; }
.splash-quote.slide-next-leave { transform: translateX(-100%); opacity: 0; }

.splash-quote.slide-prev-enter { transform: translateX(-100%); opacity: 0; }
.splash-quote.slide-prev-leave { transform: translateX(100%); opacity: 0; }

/* First paint. The opening quote arrives with is-active already on it — the server renders
   it that way so the panel is never empty — which means it would otherwise just be sitting
   there when the page appears. This parks it off to the right for one frame so it slides in
   like every quote after it.
   Must stay after .is-active: the two have equal specificity, so source order is what lets
   this win for the frame it is applied. */
.splash-quote.slide-initial-enter { transform: translateX(100%); opacity: 0; }

.splash-quote blockquote {
    margin: 0;
    font-family: var(--splash-display);
    font-style: italic;
    font-size: clamp(1.02rem, 2.5vw, 1.28rem);
    line-height: 1.55;
    color: var(--splash-cream);
    /* A comfortable measure for a pull quote — narrow enough to stay readable, wide enough
       that a typical observation lands in two lines rather than three. */
    max-width: 46ch;
}

.splash-quote figcaption {
    font-family: var(--splash-display);
    font-size: 0.84rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--splash-gold);
}

/* Small diamond beneath each quote, echoing the rule above the panel. */
.splash-quote-mark {
    display: block;
    width: 5px;
    height: 5px;
    margin-top: 0;
    transform: rotate(45deg);
    border: 1px solid var(--splash-gold-dim);
}

.splash-quote-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--splash-gold);
    font-family: var(--splash-display);
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 160ms ease, color 160ms ease;
}

.splash-quote-nav:hover,
.splash-quote-nav:focus-visible {
    opacity: 1;
    color: var(--splash-gold-bright);
}

.splash-quote-nav--prev { left: 0.4rem; }
.splash-quote-nav--next { right: 0.4rem; }

/* --- Actions --------------------------------------------------------------------- */

.splash-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.75rem;
}

.splash-link {
    font-family: var(--splash-display);
    font-size: clamp(1rem, 2.3vw, 1.14rem);
    color: var(--splash-cream);
    text-decoration: none;
    transition: color 160ms ease;
}

.splash-link span { color: var(--splash-gold); margin-left: 0.2rem; }

.splash-link:hover,
.splash-link:focus-visible { color: var(--splash-gold-bright); }
.splash-link:hover span,
.splash-link:focus-visible span { color: var(--splash-gold-bright); }

/* Vertical hairline between the two actions. Collapses on narrow screens, where the links
   wrap and a divider between stacked items reads as a stray mark. */
.splash-divider {
    width: 1px;
    height: 1.6rem;
    background: var(--splash-gold-dim);
}

.splash-institute {
    margin: 0;
    font-family: var(--splash-display);
    color: var(--splash-gold);
    font-size: clamp(0.82rem, 2vw, 0.95rem);
    letter-spacing: 0.1em;
}

@media (max-width: 560px) {
    .splash-divider { display: none; }
    .splash-actions { gap: 0.9rem; flex-direction: column; }

    /* Room for the full-height tap columns below. */
    .splash-quotes { padding: 1.75rem 3.5rem 2rem; }

    /* On a phone the obvious thing to press is the side of the panel, not the glyph. The
       chevron stays where it was; the target becomes the whole column beside the quote,
       which also clears the ~44px minimum a 2.25rem button falls short of. */
    .splash-quote-nav {
        top: 0;
        bottom: 0;
        width: 3.25rem;
        height: auto;
        transform: none;
        /* Nothing to select in here, and a long-press on a control shouldn't start a text
           selection over the quote behind it. */
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .splash-quote-nav--prev { left: 0; }
    .splash-quote-nav--next { right: 0; }

    /* Pressed feedback, since a tap has no hover to rely on. */
    .splash-quote-nav:active { background: rgba(200, 164, 77, 0.09); }
}

/* While a finger is down the slides are driven directly by JS, so their own transition has
   to be out of the way — same reasoning as .is-positioning, just for the whole gesture. */
.splash-quotes.is-dragging .splash-quote {
    transition: none;
}

.splash-quotes.is-dragging {
    -webkit-user-select: none;
    user-select: none;
    cursor: grabbing;
}

/* Motion here is decoration, so it goes entirely rather than being shortened. splash.js
   checks the same query and stops rotating; the arrows keep working. */
@media (prefers-reduced-motion: reduce) {
    .splash-quote { transition: none; }
}