/* ==========================================================================
   Museum Frame — persistent decorative overlay system.

   THREE-LAYER FIXED ARCHITECTURE (see museum-frame.php for full explanation):
     z-index auto  → .museum-frame          (fog, floor, dust — behind halls)
     z-index 22    → .museum-frame__pediment (arch rail — above halls, below cols)
     z-index 25    → .museum-frame__colonnade (3D columns — above halls, below header)
     z-index 40    → site-header / entablature

   SAFARI 3D SAFETY — NEVER apply to .museum-frame__colonnade or any ancestor
   of .colonnade-rail:
     ✗  opacity           — flattens preserve-3d context
     ✗  filter            — flattens preserve-3d context
     ✗  overflow: hidden  — flattens preserve-3d context
     ✗  backdrop-filter   — flattens preserve-3d context
   ✓  mask-image on .museum-column__shaft is SAFE (shaft is not a preserve-3d child)
   ✓  opacity / will-change on .museum-column itself is SAFE
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* LAYER 1 — Background ambience (.museum-frame)                               */
/* position:fixed, no z-index → stacking context at auto behind halls (z:20)  */
/* -------------------------------------------------------------------------- */
.museum-frame {
    position: fixed;
    inset: 0;
    pointer-events: none;
    /*
     * NO z-index intentionally. This layer (fog, floor, dust) should sit
     * behind hall content. Pediment and colonnades are separate fixed elements
     * with their own root z-index — see museum-frame.php.
     */
}

/* Interior pages (all non-home): reduce ambient frame to a subtle hint.
 * Floor plane and dust motes are homepage-corridor effects — hide them everywhere
 * else. Fog stays as a faint vignette at reduced opacity.
 * Safe to use opacity on .museum-frame — it has no 3D children (colonnades are siblings). */
body:not(.home) .museum-frame {
    opacity: 0.25;
}

body:not(.home) .museum-frame__floor,
body:not(.home) .museum-frame__dust {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* LAYER 2 — Pediment (.museum-frame__pediment)                                */
/* Separate fixed element: z-index 22 in root stacking context.                */
/* Above halls (20), below colonnades (25), below header (40).                 */
/* GSAP drives: y (intro drop) and rotateX (parallax tilt on scroll).          */
/* -------------------------------------------------------------------------- */
.museum-frame__pediment {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 22;
    pointer-events: none;
}

/* Unused apex placeholder — triangle lives on the rail ::before */
.museum-frame__pediment-apex {
    position: relative;
    height: 0;
    width: 0;
}

/* Announcement strip — slim dark band immediately below the header.
 * Replaces the old stone-gradient rail. No triangle.
 * Reads as a museum entrance notice: minimal, dark, fine lettering. */
.museum-frame__pediment-rail {
    position: absolute;
    top: var(--entablature-height); /* flush below the fixed header */
    left: 0;
    right: 0;
    height: 26px;
    background: rgba(14, 13, 12, 0.88);
    border-bottom: 1px solid rgba(201,168,76,0.10);
    opacity: 1;
    box-shadow: none;
}

/* No triangle — removed */
.museum-frame__pediment-rail::before { display: none; }

/* -------------------------------------------------------------------------- */
/* Pediment inscription — engraved message on the rail                         */
/* -------------------------------------------------------------------------- */
.museum-frame__inscription {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-heading);
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-stone-dark);
    opacity: 0.75;
    white-space: nowrap;
    pointer-events: none;
    text-shadow: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Flanking diamond ornaments */
.museum-frame__inscription::before,
.museum-frame__inscription::after {
    content: '◆';
    font-size: 5px;
    color: var(--color-gold-deep);
    opacity: 0.6;
    letter-spacing: 0;
}

.museum-frame__inscription strong {
    font-weight: 400;
    color: var(--color-gold-deep);
    opacity: 1;
}

/* Inscription message cycling (data attr toggled by GSAP) */
.museum-frame__inscription[data-msg="2"] .msg-1,
.museum-frame__inscription[data-msg="3"] .msg-1,
.museum-frame__inscription[data-msg="3"] .msg-2 { display: none; }
.museum-frame__inscription[data-msg="2"] .msg-2,
.museum-frame__inscription[data-msg="3"] .msg-3  { display: inline; }
.msg-2, .msg-3 { display: none; }

/* -------------------------------------------------------------------------- */
/* LAYER 3 — Colonnades (.museum-frame__colonnade)                             */
/* Separate fixed elements: z-index 25 in root stacking context.               */
/* Above halls (20), below header (40).                                        */
/*                                                                              */
/* SAFARI 3D CHAIN (must stay clean all the way down):                         */
/*   .museum-frame__colonnade  ← no opacity/filter/overflow                    */
/*     .colonnade-stage        ← no opacity/filter/overflow                    */
/*       .colonnade-rail       ← transform-style: preserve-3d MUST stay        */
/*         .museum-column      ← opacity/will-change here are SAFE             */
/*           .museum-column__shaft ← mask-image here is SAFE (no 3d children)  */
/* -------------------------------------------------------------------------- */
.museum-frame__colonnade {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 260px;       /* mirrors .hall padding-inline at ≥1400px */
    z-index: 25;
    pointer-events: none; /* clicks pass through the gutter to page links */
    /* SAFARI: no opacity, no filter, no overflow here */
}

.museum-frame__colonnade--left  { left: 0; }
.museum-frame__colonnade--right { right: 0; }

/*
 * Perspective stage — establishes the 3D viewpoint.
 * perspective-origin pushed to the inner edge so columns
 * converge toward the page centre (corridor vanishing-point illusion).
 * SAFARI: must NOT have overflow:hidden, opacity, or filter.
 */
.colonnade-stage {
    position: absolute;
    inset: 0;
    /*
     * 800px perspective — tighter than 1200px for more aggressive foreshortening.
     * At 800px, distant columns (z = -750px) appear at ~52% scale vs ~62% before;
     * the horizontal spread between near and far columns increases ~33%.
     * Narrower = more dramatic tunnel; wider = flatter corridor.
     */
    perspective: 800px;
}

.museum-frame__colonnade--left  .colonnade-stage { perspective-origin: 100% 45%; }
.museum-frame__colonnade--right .colonnade-stage { perspective-origin:   0% 45%; }

/*
 * The 3D rail — contains all 6 columns in preserve-3d space.
 * GSAP animates each .museum-column's translateZ independently.
 * NEVER apply opacity/filter here — collapses 3D in Safari.
 */
.colonnade-rail {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

/* -------------------------------------------------------------------------- */
/* Museum columns — individual fluted stone pillars                             */
/* -------------------------------------------------------------------------- */
.museum-column {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--museum-column-width); /* 60px from tokens */
    display: flex;
    flex-direction: column;
    transform: translateZ(var(--z-base, 0px));
    will-change: transform, opacity; /* both are animated by GSAP */
    /* opacity and transform are safe here — column is not a preserve-3d ancestor */
}

/*
 * Anchor columns AWAY from the perspective vanishing point.
 * With perspective-origin at the inner edge (100%/0%), placing columns at
 * right:8px puts them AT the vanishing point — all Z depths project to the
 * same X, so columns stack invisibly behind each other.
 * right:220px + perspective:800px: near columns sit at the outer viewport edge,
 * far columns project ~135px inward — ~135px of horizontal spread (vs ~77px
 * at the original settings). Several columns are now clearly visible at distinct
 * horizontal positions simultaneously, with more aggressive depth separation.
 */
.museum-frame__colonnade--left  .museum-column { right: 220px; }
.museum-frame__colonnade--right .museum-column { left:  220px; }

/* Capital — flat slab top, wider than shaft for overhang */
.museum-column__capital {
    flex-shrink: 0;
    height: 16px;
    background: linear-gradient(
        to bottom,
        #BEBCBA,   /* cool off-white grey */
        #969492    /* mid grey */
    );
    border-radius: 2px 2px 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.5);
    margin-top: calc(var(--entablature-height) - 2px); /* align with architrave */
    width: calc(100% + 10px);
    margin-left: -5px;
}

/* Shaft — fluted cylinder body. flex:1 fills remaining height.
 * Marble grey palette — cool, muted, not bright. Fluting kept at same rhythm.
 * mask-image is SAFE here: shaft has no 3D children, so no context collapse. */
.museum-column__shaft {
    flex: 1;
    background-image:
        repeating-linear-gradient(
            to right,
            rgba(0,0,0,0.20)       0px,
            rgba(0,0,0,0.05)       3px,
            rgba(255,255,255,0.05) 5px,
            rgba(255,255,255,0.05) 7px,
            rgba(0,0,0,0.05)       9px,
            rgba(0,0,0,0.20)       12px
        ),
        linear-gradient(
            105deg,
            #C0BEBB   0%,   /* cool off-white — light side */
            #9E9C9A  30%,   /* medium grey */
            #747270  65%,   /* darker grey — shadow side */
            #525050  100%   /* deep grey — far edge */
        );
    background-size: 12px 100%, 100% 100%;
    box-shadow:
        inset -4px 0 8px rgba(0,0,0,0.35),
        inset  4px 0 8px rgba(255,255,255,0.05);
}

/* Outer-edge fade — column dissolves toward the viewport edge */
.museum-frame__colonnade--left  .museum-column__shaft {
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
}
.museum-frame__colonnade--right .museum-column__shaft {
    mask-image: linear-gradient(to left, transparent 0%, black 30%);
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 30%);
}

/* Base — stepped plinth, slightly wider than shaft */
.museum-column__base {
    flex-shrink: 0;
    height: 12px;
    background: #646260;
    border-radius: 0 0 2px 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    width: calc(100% + 8px);
    margin-left: -4px;
}

/* -------------------------------------------------------------------------- */
/* Floor plane — perspective-tilted marble grid at viewport bottom             */
/* -------------------------------------------------------------------------- */
.museum-frame__floor {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35vh;
    z-index: var(--z-floor);
    pointer-events: none;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 0px,
            transparent 1px,
            transparent 80px,
            rgba(255,255,255,0.02) 81px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.02) 0px,
            transparent 1px,
            transparent 80px,
            rgba(255,255,255,0.02) 81px
        ),
        linear-gradient(to bottom, transparent 0%, var(--color-obsidian) 100%);
    transform: perspective(600px) rotateX(55deg);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, black 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
    opacity: 0.6;
}

/* -------------------------------------------------------------------------- */
/* Depth fog — ambient vignette that thickens toward the middle-distance       */
/* -------------------------------------------------------------------------- */
.museum-frame__fog {
    position: fixed;
    inset: 0;
    z-index: var(--z-colonnade);
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 60% 60% at 50% 55%,
            transparent 0%,
            rgba(28,28,24,0.3) 60%,
            rgba(28,28,24,0.65) 100%
        );
    opacity: 0.4; /* GSAP drives this from 0.4 → 0.65 on scroll */
}

/* -------------------------------------------------------------------------- */
/* Dust motes — floating gold specks, desktop only                             */
/* Own root-level fixed element (see museum-frame.php) so z-index:27 applies  */
/* in the ROOT stacking context: above halls (20), below header (40).          */
/* -------------------------------------------------------------------------- */
.museum-frame__dust {
    /* Own root-level fixed element — outside .museum-frame so this z-index
     * applies in the ROOT stacking context, not inside museum-frame's auto context.
     * z-content (halls) = 20 → dust at 27 → z-pediment = 30 → z-header = 40 */
    position: fixed;
    inset: 0;
    z-index: 27;
    pointer-events: none;
}

.dust-mote {
    position: absolute;
    top: var(--mote-y, 50%);         /* spread top→bottom across full viewport */
    left: var(--mote-x, 50%);
    width: var(--mote-size, 2px);
    height: var(--mote-size, 2px);
    border-radius: 50%;
    background: var(--mote-color, var(--color-gold));
    opacity: 0;
    animation:
        dust-drift   var(--mote-dur, 10s) ease-in-out infinite var(--mote-delay, 0s),
        dust-fade    var(--mote-dur, 10s) ease-in-out infinite var(--mote-delay, 0s);
    will-change: transform, opacity;
}

/* -------------------------------------------------------------------------- */
/* Responsive — colonnades and pediment adapt at breakpoints.                   */
/* These breakpoints mirror .hall padding-inline in museum-halls.css.           */
/* If you change one, change both.                                              */
/* -------------------------------------------------------------------------- */

/* 1400px–1024px: narrow colonnade to match hall gutter shrink */
@media (max-width: 1399px) {
    .museum-frame__colonnade {
        width: 180px; /* mirrors max(180px, 14vw) in museum-halls.css */
    }
}

/* Below 1024px: hide decorative 3D elements, keep pediment slim */
@media (max-width: 1023px) {
    .museum-frame__colonnade { display: none; }
    .museum-frame__dust      { display: none; }
    .museum-frame__floor     { display: none; }
}

/* Below 768px: hide announcement strip entirely — too cramped */
@media (max-width: 767px) {
    .museum-frame__pediment { display: none; }
}

/* Interior pages: no announcement strip, no floor, no dust.
 * Colonnades already excluded via PHP is_front_page() check. */
body:not(.home) .museum-frame__pediment {
    display: none;
}

/* -------------------------------------------------------------------------- */
/* WordPress admin bar offsets                                                   */
/* Admin bar: 32px on desktop (≥783px), 46px on mobile (≤782px)               */
/* -------------------------------------------------------------------------- */
.admin-bar .museum-frame__pediment-rail {
    top: calc(var(--entablature-height) + 32px);
}

.admin-bar .museum-column__capital {
    margin-top: calc(var(--entablature-height) + 32px - 2px);
}

@media screen and (max-width: 782px) {
    .admin-bar .museum-frame__pediment-rail {
        top: calc(var(--entablature-height) + 46px);
    }
    .admin-bar .museum-column__capital {
        margin-top: calc(var(--entablature-height) + 46px - 2px);
    }
}

/* -------------------------------------------------------------------------- */
/* Static / reduced-motion mode                                                 */
/*                                                                              */
/* Applied by museum-choreography.js when:                                      */
/*   a) prefers-reduced-motion: reduce, OR                                      */
/*   b) GSAP / ScrollTrigger failed to load                                     */
/*                                                                              */
/* The class is added to .museum-frame. Because colonnades are now SIBLINGS     */
/* (not descendants) of .museum-frame, we use the general sibling combinator   */
/* (~) to reach .museum-column from .museum-frame--static.                     */
/* -------------------------------------------------------------------------- */
.museum-frame--static ~ .museum-frame__colonnade .museum-column {
    transform: translateZ(var(--z-base, 0px)) !important;
}

/* Pediment is a sibling too — freeze its intro transform */
.museum-frame--static ~ .museum-frame__pediment {
    transform: none !important;
    opacity: 1 !important;
}

.museum-frame--static .museum-frame__fog {
    opacity: 0.3;
}