/* ================================
   MUSEOS — Santos Armada
   Explorable 3D museum building + persistent spark-lit title band.
   Navigation lives entirely inside the animation itself (the glowing
   hotspots) — no flat link grids below the hero.
================================ */

.museos-page {
    --museos-banner-h: 41px; /* trimmed ~30% from 59px (~30% from original 84px) */
    background: var(--bg-dark);
    /* Reserve room in normal flow at bottom so the fixed bottom banner
       (below) never sits on top of the footer content. */
    padding-bottom: var(--museos-banner-h);
    /* The footer crest is now wide enough (clamp up to ~1012px, plus a
       1.05x hover scale on top of that) that on many screens it was
       pushing past the viewport edge and growing the page's scrollable
       width on hover. That shifts the whole layout by a few pixels the
       instant you hover, nudging the crest out from under the cursor —
       hover drops, it shrinks back, cursor's over it again, hover
       re-fires. Reads exactly like "glows then flickers off." Clipping
       horizontal overflow here removes that feedback loop entirely. */
    overflow-x: hidden;
}

/* --- Maya glyph banner strip (bottom) ---
   Permanent fixture: pinned to the viewport edge with position:fixed,
   so it never scrolls away. Sits below the footer. Capped to a slim
   fixed height and cropped with object-fit so the wide/short source
   image reads as a decorative frieze instead of eating the whole
   screen. z-index is set above the navbar (100) and every other fixed
   layer on this page. */
.museos-banner {
    position: fixed;
    left: 0;
    width: 100%;
    height: var(--museos-banner-h);
    z-index: 200;
    background: #000;
    overflow: hidden;
}

.museos-banner-bottom {
    bottom: 0;
}

.museos-banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .museos-page {
        --museos-banner-h: 27px; /* trimmed ~30% from 39px */
    }
}

/* --- Santos Armada logo hover (navbar + footer) --- */
.museos-page .nav-crest,
.museos-page .footer-logo {
    transition: filter 0.3s ease, transform 0.3s ease;
}

.museos-page .nav-title,
.museos-page .footer-title {
    transition: color 0.3s ease, text-shadow 0.3s ease, letter-spacing 0.3s ease;
}

.museos-page .nav-logo:hover .nav-crest {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.15)
            drop-shadow(0 0 12px rgba(200, 169, 110, 0.7));
    transform: rotate(-4deg) scale(1.06);
}

.museos-page .nav-logo:hover .nav-title {
    color: var(--gold-light);
    letter-spacing: 0.2em;
    text-shadow: 0 0 14px rgba(200, 169, 110, 0.5);
}

.museos-page .footer-logo-link:hover .footer-logo {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.15)
            drop-shadow(0 0 16px rgba(200, 169, 110, 0.7));
    transform: scale(1.06);
}

/* --- Footer crest (replaces logo + wordmark on this page) --- */
.museos-page .footer-crest {
    width: clamp(632px, 69vw, 1012px);
    /* Belt-and-suspenders alongside .museos-page's overflow-x:hidden
       above: keep the crest itself from ever getting close enough to
       the viewport edge for the 1.05x hover scale to matter. */
    max-width: 92vw;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.1)
            drop-shadow(0 0 20px rgba(200, 169, 110, 0.4));
    transition: filter 0.35s ease, transform 0.35s ease;
    will-change: transform;
}

/* Hover trigger lives on the image itself, not the parent link: once
   the image scales up, its painted size grows past the anchor's own
   (untransformed) layout box, so a parent-triggered ".footer-logo-link
   :hover" loses hover the moment the cursor sits over that now-enlarged
   overflow — the anchor's real hit box never grew. Self-hover keeps
   the hover state matched to the image's own (correctly growing) hit
   area, so it holds for as long as the cursor is actually over it. */
.museos-page .footer-crest:hover {
    filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg) brightness(1.3)
            drop-shadow(0 0 30px rgba(200, 169, 110, 0.75));
    transform: scale(1.05);
}

.museos-page .footer-logo-link:hover .footer-title {
    color: var(--gold-light);
    letter-spacing: 0.24em;
    text-shadow: 0 0 14px rgba(200, 169, 110, 0.5);
}

/* The sphere canvas + title band are position:fixed so the museum stays
   pinned as an ambient backdrop while you scroll. Without an explicit
   stacking context + opaque background, everything below the hero
   (mission statement, footer, banners) would render underneath that
   fixed layer instead of over it — invisible, even though it's all
   there in the DOM. */
.museos-mission,
.museos-page footer.footer {
    position: relative;
    z-index: 10;
    background: var(--bg-dark);
}

/* --- World / hero section --- */
.museos-world {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #030201;
}

#museos-sphere-canvas {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: block;
    cursor: pointer;
    /* Without this, iOS/tablet Safari intercepts drag/pinch gestures on
       the canvas for its own page-panning/zooming before our touch
       handlers (museos.js) ever see them — the #1 reason the orbit
       drag + tap-to-step interactivity didn't respond on iPad. */
    touch-action: none;
}

/* Title band: sits just under the navbar, spans full width, fixed
   height — everything below it shows the museum building untouched. */
.museos-title-band {
    position: fixed;
    top: 62px;
    left: 0;
    width: 100vw;
    height: clamp(150px, 24vh, 250px);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Wrap wraps just the title text, so the spark canvas (padded
   around it) can use its bounding box as the emitter perimeter. */
.museos-title-wrap {
    position: relative;
    display: inline-block;
}

.museos-title-sparks-canvas {
    position: absolute;
    pointer-events: none;
}

.museos-title-text {
    position: relative;
    z-index: 1;
    display: block;
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-size: clamp(56px, 10vw, 120px);
    letter-spacing: 0.12em;
    color: var(--gold-light);
    text-align: center;
    filter: drop-shadow(0 0 18px rgba(200, 169, 110, 0.55))
            drop-shadow(0 0 42px rgba(200, 169, 110, 0.3));
}

.museos-title-effect {
    display: inline-flex;
}

.museos-title-text .char {
    display: inline-block;
    white-space: pre;
    will-change: transform, opacity, background;
}

/* --- Bottom stack (hint + scroll cue) ---
   Both used to be independently position:fixed with their own bottom %,
   which could overlap on short/resized viewports (a smaller viewport
   height shrinks the % gap between them) or when the hint text wraps
   to two lines. Anchoring them together in one flex column with a
   fixed gap guarantees consistent spacing and no overlap at any size. */
.museos-bottom-stack {
    position: fixed;
    left: 50%;
    bottom: 4%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(92vw, 560px);
}

.museos-hint {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--gold-light);
    /* A dark pill behind the text (same trick as .museos-hotspot-label
       elsewhere on this page) gives reliable contrast against the busy
       photo backdrop. A stroke/heavy shadow directly on small text at
       this size ends up swallowing the gradient fill below almost
       entirely instead of just outlining it — this doesn't. */
    background: rgba(10, 8, 5, 0.6);
    padding: 6px 18px;
    border-radius: 999px;
    text-align: center;
    max-width: 100%;
    opacity: 0;
    animation: museos-hint-in 1s ease 1.2s forwards;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.museos-hint.is-faded {
    opacity: 0.35 !important;
}

@keyframes museos-hint-in {
    to { opacity: 1; }
}

/* --- Ember gradient text sweep ---
   Applied via JS (museos.js: startEmberTextSweep) to any element marked
   .museos-anim-text — splits it into per-letter spans and animates a
   molten gold/amber gradient sweeping across the text, staggered letter
   by letter. Contrast against the busy photo comes from the dark pill
   background on the wrapping element (.museos-hint, .museos-scroll-cue
   .museos-anim-text below), not from a stroke on the letters — a stroke
   at this font size ends up covering the gradient fill almost entirely
   instead of just outlining it. */
.museos-anim-char {
    display: inline-block;
    white-space: pre;
    will-change: transform, opacity, background;
}

/* --- Scroll cue --- */
.museos-scroll-cue {
    position: relative;
    width: 64px;
    height: 64px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.museos-scroll-cue-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--gold-light);
    opacity: 0.6;
    animation: museos-scroll-pulse 2s ease-out infinite;
}

@keyframes museos-scroll-pulse {
    0%   { opacity: 0.6; transform: scale(0.5); }
    50%  { opacity: 0.45; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.6); }
}

.museos-scroll-cue-circle {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    transition: filter 0.3s ease;
}

.museos-scroll-cue-circle::before {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 2px solid rgba(10, 8, 5, 0.4);
}

.museos-scroll-cue-circle svg {
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 2;
    stroke: #0a0805;
}

.museos-scroll-cue:hover .museos-scroll-cue-circle {
    filter: brightness(1.1);
}

@media (prefers-reduced-motion: reduce) {
    .museos-scroll-cue-pulse {
        animation: none;
        opacity: 0;
    }
}

/* --- Wayfinding hotspots ---
   Positioned every frame via inline left/top (museos.js), computed from
   their real 3D coordinates — the CSS here only handles appearance. */
.museos-hotspot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.4s ease;
    will-change: left, top;
}

.museos-hotspot.is-visible {
    opacity: 1;
}

.museos-hotspot-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6df 0%, var(--gold-light) 45%, rgba(200, 169, 110, 0) 75%);
    box-shadow: 0 0 10px 2px rgba(255, 230, 180, 0.85), 0 0 22px 6px rgba(200, 169, 110, 0.35);
    animation: museos-hotspot-pulse 2.2s ease-in-out infinite;
}

@keyframes museos-hotspot-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
}

.museos-hotspot-label {
    font-family: var(--font-title);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-light);
    white-space: nowrap;
    background: rgba(10, 8, 5, 0.7);
    padding: 4px 10px;
    border: 0.5px solid var(--gold-dim);
    border-radius: 999px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.museos-hotspot:hover .museos-hotspot-label {
    opacity: 1;
    transform: translateY(0);
}

.museos-hotspot:hover .museos-hotspot-dot {
    box-shadow: 0 0 14px 4px rgba(255, 230, 180, 1), 0 0 30px 10px rgba(200, 169, 110, 0.5);
}

/* --- Mission --- */
.museos-mission {
    padding: 110px 48px;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.museos-eyebrow {
    font-family: var(--font-title);
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 20px;
}

.museos-mission-heading {
    font-family: "Playfair Display", serif;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--gold-light);
    margin-bottom: 24px;
}

.museos-mission-text {
    font-family: var(--font-body);
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-primary);
}

.museos-mission-note {
    margin-top: 20px;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 13px;
    color: var(--text-secondary);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .museos-title-band {
        top: 50px;
        height: clamp(110px, 20vh, 180px);
    }

    .museos-mission {
        padding: 70px 24px;
    }

    .museos-bottom-stack {
        bottom: 6%;
        gap: 12px;
    }

    .museos-hint {
        font-size: 10.5px;
        padding: 5px 14px;
    }

    .museos-scroll-cue {
        width: 52px;
        height: 52px;
    }

    .museos-scroll-cue-circle {
        width: 30px;
        height: 30px;
        top: 11px;
        left: 11px;
    }

    .museos-scroll-cue-circle svg {
        width: 13px;
        height: 13px;
    }

    .museos-hotspot-label {
        font-size: 9px;
        padding: 3px 8px;
    }
}