/* =========================================================================
   localcop.dev — the hush-room of a private members' club for processes
   Palette: translucent-frost. Layout: F-pattern. Aesthetic: isometric.
   ========================================================================= */

/* ---------- Reset / base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
    background: #0d1116;
    color: #e8eef2;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-weight: 400;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---------- Custom properties — the seven z-planes ---------- */
:root {
    --col-charcoal: #0d1116;
    --col-bone-frost: #e8eef2;
    --col-pearl-smoke: #c9d4dc;
    --col-tarnished: #a4b4be;
    --col-inkwell: #2c3a44;
    --col-brass: #7d6f5a;
    --col-candlelight: #f5d9b0;
    --col-glacier: #5a8fa3;

    --z-foundation: 0px;
    --z-atrium-floor: 8px;
    --z-salon: 24px;
    --z-gallery: 36px;
    --z-vestibule: 60px;
    --z-rotunda: 72px;
    --z-bell: 96px;

    --iso-tilt: 18deg;
    --iso-rot: -28deg;

    --gallery-w: clamp(220px, 26vw, 320px);
    --vestibule-h: clamp(64px, 8vh, 92px);
    --salon-h: clamp(58px, 8vh, 76px);

    --hairline: rgba(164, 180, 190, 0.7);
    --hairline-soft: rgba(164, 180, 190, 0.32);

    --ease-glass: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- The Foundation — Charcoal Vellum canvas ---------- */
body {
    background:
        radial-gradient(ellipse at 70% 20%, rgba(90, 143, 163, 0.06) 0%, rgba(13, 17, 22, 0) 60%),
        radial-gradient(ellipse at 20% 80%, rgba(245, 217, 176, 0.025) 0%, rgba(13, 17, 22, 0) 55%),
        var(--col-charcoal);
}

.atrium {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    perspective: 2400px;
    perspective-origin: 50% 36%;
}

/* ---------- Frost substrate — animated noise covers the whole canvas ---------- */
.frost-substrate {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}
.frost-noise-canvas {
    width: 100%;
    height: 100%;
    animation: frost-drift 90s linear infinite alternate;
}
@keyframes frost-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1.02); }
    50%  { transform: translate3d(-1.2%, 0.8%, 0) scale(1.04); }
    100% { transform: translate3d(0.6%, -0.4%, 0) scale(1.02); }
}

/* ---------- The seven planes container ---------- */
.planes {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 100vh;
    transform-style: preserve-3d;
    transform: rotateX(var(--iso-tilt)) rotateZ(var(--iso-rot));
    transform-origin: 50% 50%;
    transition: transform 1.8s var(--ease-glass);
}

/* On smaller screens we abandon the 3D tilt for legibility */
@media (max-width: 900px) {
    .planes {
        transform: none;
    }
}

.plane {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 0.8s var(--ease-glass), opacity 0.8s var(--ease-glass);
}

/* =========================================================================
   PLANE 5 — VESTIBULE (top bar of the F)
   ========================================================================= */
.plane--vestibule {
    top: 0;
    left: 0;
    right: 0;
    height: var(--vestibule-h);
    transform: translateZ(var(--z-vestibule));
    z-index: 5;
}

.vestibule__inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 clamp(20px, 4vw, 56px);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 36px);

    /* Stacked translucents — the "color rule of three" */
    background:
        linear-gradient(180deg, rgba(232, 238, 242, 0.06) 0%, rgba(232, 238, 242, 0.03) 100%),
        linear-gradient(180deg, rgba(201, 212, 220, 0.04) 0%, rgba(13, 17, 22, 0) 100%);
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
}

.wordmark {
    font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1;
    font-weight: 300;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    letter-spacing: -0.035em;
    line-height: 0.92;
    color: var(--col-bone-frost);
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    padding: 0.05em 0;
    transition: color 0.6s var(--ease-glass), letter-spacing 0.6s var(--ease-glass);
}
.wordmark__main { color: var(--col-bone-frost); }
.wordmark__dot {
    color: var(--col-brass);
    margin: 0 0.02em;
    transform: translateY(-0.04em);
}
.wordmark__tld {
    color: var(--col-tarnished);
    font-style: italic;
    font-weight: 300;
}
.wordmark:hover { letter-spacing: -0.025em; }

.vestibule__epigraph {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: clamp(0.72rem, 1.05vw, 0.86rem);
    color: var(--col-pearl-smoke);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-feature-settings: 'smcp' on, 'c2sc' on;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vw, 18px);
    flex-wrap: wrap;
    overflow: hidden;
    white-space: nowrap;
}
.epigraph__sep { color: var(--col-tarnished); opacity: 0.6; }
.epigraph__time, .epigraph__count-num {
    font-family: 'DM Mono', 'Courier New', monospace;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--col-bone-frost);
    text-transform: none;
    font-feature-settings: 'tnum' on;
}
.epigraph__count-label {
    font-style: italic;
    font-family: 'Cormorant Garamond', Georgia, serif;
    text-transform: lowercase;
    letter-spacing: 0.06em;
    color: var(--col-pearl-smoke);
    margin-right: 0.4em;
}
.epigraph__line {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    text-transform: none;
    letter-spacing: 0.01em;
    color: #d8e2e8;
    transition: opacity 0.7s var(--ease-glass);
}

.nav__list {
    display: flex;
    gap: clamp(6px, 0.9vw, 12px);
    align-items: center;
}
.nav__placard {
    display: inline-block;
    padding: 0.55em 1.05em;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--col-bone-frost);
    text-transform: uppercase;
    background:
        linear-gradient(180deg, rgba(232, 238, 242, 0.18) 0%, rgba(232, 238, 242, 0.08) 100%),
        linear-gradient(180deg, rgba(201, 212, 220, 0.06) 0%, rgba(13, 17, 22, 0.02) 100%);
    border: 0.5px solid rgba(164, 180, 190, 0.45);
    border-radius: 1px;
    box-shadow:
        inset 0 0.5px 0 rgba(232, 238, 242, 0.22),
        0 1px 0 rgba(13, 17, 22, 0.4),
        0 6px 18px -10px rgba(13, 17, 22, 0.7);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: transform 0.6s var(--ease-glass), background 0.6s var(--ease-glass);
    transform: translateZ(0);
}
.nav__placard:hover {
    transform: translateZ(8px) translateY(-1px);
    background:
        linear-gradient(180deg, rgba(232, 238, 242, 0.26) 0%, rgba(232, 238, 242, 0.12) 100%),
        linear-gradient(180deg, rgba(245, 217, 176, 0.05) 0%, rgba(13, 17, 22, 0.02) 100%);
}

.vestibule__rule {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--hairline) 8%,
        var(--hairline) 92%,
        transparent 100%);
    opacity: 0.55;
}

/* =========================================================================
   PLANE 4 — LONG GALLERY (vertical stem of the F)
   ========================================================================= */
.plane--gallery {
    top: var(--vestibule-h);
    left: 0;
    width: var(--gallery-w);
    bottom: 0;
    transform: translateZ(var(--z-gallery));
    z-index: 4;
    padding: clamp(20px, 3vw, 36px) clamp(18px, 2.5vw, 28px) clamp(20px, 3vw, 36px);
    display: flex;
    align-items: stretch;
}

.gallery__list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.4vh, 18px);
    width: 100%;
    align-self: center;
}

.placard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.18em;
    padding: 0.95em 1.1em 1em;
    background:
        linear-gradient(180deg, rgba(232, 238, 242, 0.20) 0%, rgba(232, 238, 242, 0.10) 100%),
        linear-gradient(135deg, rgba(201, 212, 220, 0.08) 0%, rgba(13, 17, 22, 0.04) 100%),
        rgba(13, 17, 22, 0.22);
    border: 0.5px solid rgba(164, 180, 190, 0.55);
    border-radius: 1px;
    box-shadow:
        inset 0 0.5px 0 rgba(232, 238, 242, 0.30),
        inset 0 -0.5px 0 rgba(13, 17, 22, 0.4),
        0 2px 0 rgba(13, 17, 22, 0.45),
        0 14px 28px -18px rgba(13, 17, 22, 0.85);
    backdrop-filter: blur(5px) saturate(1.05);
    -webkit-backdrop-filter: blur(5px) saturate(1.05);
    transform: translateZ(0);
    transition:
        transform 0.7s var(--ease-glass),
        box-shadow 0.7s var(--ease-glass),
        background 0.7s var(--ease-glass);
    cursor: default;
    /* Open-curtain stagger entry */
    opacity: 0;
    animation: placard-rise 1.1s var(--ease-glass) forwards;
    animation-delay: calc(0.18s * var(--placard-delay) + 0.4s);
}
@keyframes placard-rise {
    from { opacity: 0; transform: translateZ(-12px) translateY(8px); }
    to   { opacity: 1; transform: translateZ(0) translateY(0); }
}

.placard:hover {
    transform: translateZ(18px) translateY(-2px);
    background:
        linear-gradient(180deg, rgba(232, 238, 242, 0.28) 0%, rgba(232, 238, 242, 0.14) 100%),
        linear-gradient(135deg, rgba(245, 217, 176, 0.04) 0%, rgba(13, 17, 22, 0.04) 100%),
        rgba(13, 17, 22, 0.18);
    box-shadow:
        inset 0 0.5px 0 rgba(232, 238, 242, 0.42),
        inset 0 -0.5px 0 rgba(13, 17, 22, 0.4),
        0 3px 0 rgba(13, 17, 22, 0.5),
        0 22px 40px -18px rgba(13, 17, 22, 0.95);
}

.placard__index {
    font-family: 'DM Mono', monospace;
    font-size: 0.62rem;
    color: var(--col-tarnished);
    letter-spacing: 0.18em;
    opacity: 0.75;
    margin-bottom: 0.18em;
}
.placard__title {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--col-inkwell);
    letter-spacing: 0.01em;
    /* Engraved feel */
    text-shadow: 0 0.5px 0 rgba(232, 238, 242, 0.55);
}
.placard__sub {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.78rem;
    color: var(--col-inkwell);
    line-height: 1.32;
    opacity: 0.78;
}

/* =========================================================================
   PLANE 6 — ROTUNDA DOME (central architectural anchor)
   ========================================================================= */
.plane--rotunda {
    top: var(--vestibule-h);
    left: var(--gallery-w);
    right: 0;
    bottom: calc(var(--salon-h) + clamp(120px, 16vh, 180px));
    transform: translateZ(var(--z-rotunda));
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.diorama {
    width: min(86%, 720px);
    height: 100%;
    max-height: 88%;
    overflow: visible;
}

.key-numeral {
    font-family: 'DM Mono', monospace;
    font-size: 0.55rem;
    fill: var(--col-tarnished);
    fill-opacity: 0.4;
    letter-spacing: 0.06em;
}

.rotunda {
    transform-origin: center;
    transform-box: fill-box;
}
.rotunda__meridians {
    transform-origin: 0px -155px;
    transform-box: view-box;
    animation: rotunda-spin 1200s linear infinite;
}
@keyframes rotunda-spin {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}

.velvet-rope path {
    transform-origin: center;
    animation: rope-sway 6s ease-in-out infinite alternate;
}
@keyframes rope-sway {
    from { d: path('M -220 -42 Q -190 -22 -160 -42'); }
    to   { d: path('M -220 -42 Q -190 -18 -160 -42'); }
}

.brass-bell {
    transform-origin: center top;
}
#bellClapper {
    transform-origin: 0 -2px;
    transform-box: fill-box;
    transition: transform 0.4s var(--ease-glass);
}
.brass-bell.swinging #bellClapper {
    animation: clapper-swing 1.2s ease-out;
}
@keyframes clapper-swing {
    0%   { transform: rotate(0deg); }
    20%  { transform: rotate(22deg); }
    50%  { transform: rotate(-18deg); }
    75%  { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}

.hanger {
    transform-box: fill-box;
    transform-origin: center;
}
#hangerA { animation: hanger-drift-a 90s ease-in-out infinite alternate; }
#hangerB { animation: hanger-drift-b 110s ease-in-out infinite alternate; }
#hangerC { animation: hanger-drift-c 102s ease-in-out infinite alternate; }
@keyframes hanger-drift-a {
    0%   { transform: translate(0,0) rotate(-2deg); }
    50%  { transform: translate(8px, -6px) rotate(1deg); }
    100% { transform: translate(-6px, 4px) rotate(-3deg); }
}
@keyframes hanger-drift-b {
    0%   { transform: translate(0,0) rotate(1deg); }
    50%  { transform: translate(-10px, 6px) rotate(-2deg); }
    100% { transform: translate(6px, -4px) rotate(2deg); }
}
@keyframes hanger-drift-c {
    0%   { transform: translate(0,0) rotate(0deg); }
    50%  { transform: translate(6px, -8px) rotate(2deg); }
    100% { transform: translate(-8px, 6px) rotate(-1deg); }
}

/* =========================================================================
   PLANE 3 — SALON (second F-bar, ticker)
   ========================================================================= */
.plane--salon {
    left: var(--gallery-w);
    right: 0;
    bottom: clamp(120px, 16vh, 180px);
    height: var(--salon-h);
    transform: translateZ(var(--z-salon));
    z-index: 2;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(232, 238, 242, 0.08) 0%, rgba(232, 238, 242, 0.04) 100%),
        linear-gradient(180deg, rgba(201, 212, 220, 0.04) 0%, rgba(13, 17, 22, 0.03) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.salon__rule {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 0.5px;
    background: linear-gradient(90deg, transparent 0%, var(--hairline-soft) 6%, var(--hairline-soft) 94%, transparent 100%);
}
.salon__rule--bottom { top: auto; bottom: 0; }

.salon__label {
    position: absolute;
    left: clamp(14px, 2vw, 28px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: baseline;
    gap: 0.7em;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--col-tarnished);
    z-index: 2;
    background: linear-gradient(90deg, rgba(13,17,22,0.75) 0%, rgba(13,17,22,0.75) 80%, rgba(13,17,22,0) 100%);
    padding: 0 1.2em 0 0;
}
.salon__label-roman {
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-variation-settings: 'opsz' 144, 'WONK' 1;
    font-style: italic;
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--col-bone-frost);
    letter-spacing: 0;
}

.salon__ticker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 clamp(160px, 18vw, 240px) 0 clamp(160px, 18vw, 240px);
    /* Mask edges so the ticker fades softly into the frost */
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.salon__track {
    display: inline-flex;
    align-items: center;
    gap: 1.2em;
    white-space: nowrap;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.15rem;
    letter-spacing: 0;
    color: #efe5d2; /* a half-step warmer than body text */
    will-change: transform;
}
.salon__entry { padding: 0 0.4em; }
.salon__sep   { color: var(--col-brass); opacity: 0.7; }

/* =========================================================================
   PLANE 7 — BELL-PULL (the only interactive element)
   ========================================================================= */
.plane--bell {
    right: clamp(40px, 6vw, 96px);
    bottom: clamp(120px, 16vh, 180px);
    width: clamp(160px, 18vw, 220px);
    height: clamp(220px, 28vh, 280px);
    transform: translateZ(var(--z-bell));
    z-index: 6;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 4px;
}

.bell-pull {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8em;
    color: var(--col-bone-frost);
    transition: filter 0.5s var(--ease-glass);
    will-change: transform, filter;
}

.bell-pull__rope {
    display: block;
    width: 28px;
    height: 120px;
    transform-origin: 50% 0%;
    transition: transform 0.6s var(--ease-glass);
}
#bellRopePath {
    transition: d 0.4s var(--ease-glass);
}
#bellRopeTassel {
    transition: cy 0.4s var(--ease-glass), r 0.4s var(--ease-glass);
}
.bell-pull:hover #bellRopeGlow {
    fill-opacity: 0.45 !important;
    r: 14 !important;
}
.bell-pull:hover #bellRopePath {
    d: path('M14 0 Q11 32 14 60 Q17 90 14 120') !important;
}
.bell-pull:hover .bell-pull__rope {
    transform: translateY(2px);
}
.bell-pull.pulling .bell-pull__rope {
    transform: translateY(14px);
}
.bell-pull.pulling #bellRopeTassel {
    cy: 134 !important;
}

.bell-pull__label {
    font-family: 'Cormorant Infant', Georgia, serif;
    font-weight: 600;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.32em;
    color: var(--col-tarnished);
    transition: color 0.5s var(--ease-glass);
}
.bell-pull:hover .bell-pull__label {
    color: var(--col-candlelight);
}

.bell-pull__payoff {
    margin-top: 0.7em;
    min-height: 2.4em;
    max-width: 18em;
    text-align: center;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--col-candlelight);
    line-height: 1.32;
    letter-spacing: 0.005em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.7s var(--ease-glass), transform 0.7s var(--ease-glass);
}
.bell-pull__payoff.visible {
    opacity: 0.96;
    transform: translateY(0);
}

/* =========================================================================
   CONCIERGE — the hush footer-room
   ========================================================================= */
.plane--concierge {
    left: var(--gallery-w);
    right: 0;
    bottom: 0;
    height: clamp(94px, 14vh, 140px);
    transform: translateZ(var(--z-atrium-floor));
    z-index: 1;
    padding: clamp(14px, 2vh, 22px) clamp(28px, 5vw, 64px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.4em;
    background:
        linear-gradient(180deg, rgba(13, 17, 22, 0) 0%, rgba(232, 238, 242, 0.04) 60%, rgba(232, 238, 242, 0.06) 100%),
        linear-gradient(180deg, rgba(201, 212, 220, 0.02) 0%, rgba(13, 17, 22, 0.04) 100%);
}

.concierge__note {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 1em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.96rem;
    line-height: 1.4;
    color: #d8e2e8;
    max-width: 56em;
}
.concierge__roman {
    font-family: 'Fraunces', 'Cormorant Garamond', serif;
    font-variation-settings: 'opsz' 144, 'WONK' 1;
    font-weight: 300;
    font-style: italic;
    font-size: 1.4rem;
    color: var(--col-brass);
    letter-spacing: 0;
}
.concierge__copy em {
    font-style: italic;
    color: var(--col-bone-frost);
}
.concierge__address {
    margin: 0;
    font-family: 'Cormorant Infant', Georgia, serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--col-tarnished);
    opacity: 0.75;
}
.concierge__num {
    font-family: 'DM Mono', monospace;
    color: var(--col-bone-frost);
    letter-spacing: 0.06em;
}

/* =========================================================================
   CURSOR-tracked "candle" glow — only present when the cursor is in motion
   ========================================================================= */
.cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(245, 217, 176, 0.18) 0%,
        rgba(245, 217, 176, 0.06) 30%,
        rgba(13, 17, 22, 0) 70%);
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 0.8s var(--ease-glass);
    mix-blend-mode: screen;
}
.cursor-glow.visible { opacity: 0.75; }

/* =========================================================================
   Open-curtain entry sequence — the staggered placard rise was above;
   the rotunda fades and rises slightly to its plane, the wordmark settles.
   ========================================================================= */
.wordmark { animation: wordmark-settle 1.6s var(--ease-glass) 0.1s both; }
@keyframes wordmark-settle {
    from { opacity: 0; transform: translateY(-8px); letter-spacing: -0.08em; }
    to   { opacity: 1; transform: translateY(0);    letter-spacing: -0.035em; }
}

.plane--rotunda { animation: rotunda-rise 2s var(--ease-glass) 0.45s both; }
@keyframes rotunda-rise {
    from { opacity: 0; transform: translateZ(40px) translateY(20px); }
    to   { opacity: 1; transform: translateZ(var(--z-rotunda)) translateY(0); }
}

.plane--salon { animation: salon-fade 1.4s var(--ease-glass) 0.9s both; }
@keyframes salon-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.plane--bell { animation: bell-fade 1.6s var(--ease-glass) 1.2s both; }
@keyframes bell-fade {
    from { opacity: 0; transform: translateZ(var(--z-bell)) translateY(8px); }
    to   { opacity: 1; transform: translateZ(var(--z-bell)) translateY(0); }
}

.plane--concierge { animation: concierge-fade 1.4s var(--ease-glass) 1.0s both; }
@keyframes concierge-fade {
    from { opacity: 0; transform: translateZ(var(--z-atrium-floor)) translateY(6px); }
    to   { opacity: 1; transform: translateZ(var(--z-atrium-floor)) translateY(0); }
}

/* =========================================================================
   Hover-disturbance ripple under placards (added by JS)
   ========================================================================= */
.placard__disturb {
    position: absolute;
    inset: -2px;
    border-radius: 1px;
    pointer-events: none;
    background: radial-gradient(ellipse at var(--mx, 50%) var(--my, 50%),
        rgba(232, 238, 242, 0.20) 0%,
        rgba(232, 238, 242, 0) 60%);
    opacity: 0;
    transition: opacity 0.5s var(--ease-glass);
}
.placard:hover .placard__disturb { opacity: 1; }

/* =========================================================================
   Responsive — at narrow widths, the F-pattern unfolds vertically
   ========================================================================= */
@media (max-width: 900px) {
    :root {
        --vestibule-h: auto;
        --gallery-w: 100%;
    }
    .planes { min-height: 100vh; }
    .plane { position: relative; transform: none !important; }
    .plane--vestibule {
        position: relative;
        height: auto;
        padding: 18px 18px 22px;
    }
    .vestibule__inner {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0;
        text-align: center;
        justify-items: center;
    }
    .vestibule__epigraph { justify-content: center; }
    .nav__list { flex-wrap: wrap; justify-content: center; }
    .plane--gallery {
        position: relative;
        width: 100%;
        padding: 18px;
        top: auto;
        bottom: auto;
    }
    .gallery__list { flex-direction: column; }
    .plane--rotunda {
        position: relative;
        left: 0; right: 0; top: auto; bottom: auto;
        height: 56vh;
        min-height: 320px;
        padding: 8px;
    }
    .plane--salon {
        position: relative;
        left: 0; right: 0; bottom: auto;
        margin-top: 4px;
    }
    .salon__label { font-size: 0.58rem; }
    .salon__track { font-size: 1.0rem; }
    .plane--bell {
        position: relative;
        right: auto; bottom: auto;
        width: 100%;
        height: auto;
        align-items: center;
        padding: 30px 0 26px;
    }
    .plane--concierge {
        position: relative;
        left: 0; right: 0; bottom: auto;
        height: auto;
        padding: 20px 24px 36px;
    }
    .cursor-glow { display: none; }
}

@media (max-width: 540px) {
    .nav__placard { font-size: 0.74rem; padding: 0.5em 0.85em; }
    .wordmark { font-size: 2.2rem; }
}

/* =========================================================================
   Print — keep it solemn
   ========================================================================= */
@media print {
    body { background: #fff; color: #0d1116; }
    .frost-substrate, .cursor-glow, .salon__ticker { display: none; }
}