/* ========================================================================
   mysterious.boo  —  Victorian-séance-parlor as surreal dreamscape
   Palette: #0E0814 #D4A574 #7A1F2E #1A0F1F #E8DDC8 #5A6E7A #3D1A2E #9A7C9D
   Fonts:   Playfair Display, IM Fell DW Pica, Cormorant Garamond,
            UnifrakturMaguntia, Caveat
   ======================================================================== */

:root {
    --midnight-wine:  #1A0F1F;
    --burgundy-velvet:#3D1A2E;
    --oxblood-damask: #7A1F2E;
    --candle-gold:    #D4A574;
    --aged-vellum:    #E8DDC8;
    --spirit-mist:    #5A6E7A;
    --tomb-black:     #0E0814;
    --ectoplasm-lilac:#9A7C9D;

    --candle-flicker: 1;
    --ease-respiratory: cubic-bezier(0.65, 0.05, 0.36, 1);
    --font-display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    --font-spirit:  "IM Fell DW Pica", "Cormorant Garamond", Georgia, serif;
    --font-body:    "Cormorant Garamond", Georgia, serif;
    --font-numeral: "UnifrakturMaguntia", "Playfair Display", serif;
    --font-whisper: "Caveat", "IM Fell DW Pica", cursive;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    background: var(--midnight-wine);
    color: var(--aged-vellum);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.72;
    overflow-x: hidden;
    cursor: none;
}

a { color: inherit; text-decoration: none; }
button { background: transparent; border: 0; color: inherit; font: inherit; cursor: none; }

body::before {
    /* faint vignette of Tomb-Black at the edges */
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
                rgba(14,8,20,0) 30%,
                rgba(14,8,20,0.55) 100%);
    z-index: 80;
}

/* ----------------------------------------------------------------------
   CUSTOM CURSOR
   ---------------------------------------------------------------------- */
.cursor {
    position: fixed;
    top: 0; left: 0;
    width: 22px; height: 22px;
    pointer-events: none;
    z-index: 200;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
}
.cursor-glow {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(154,124,157,0.55) 0%,
        rgba(212,165,116,0.35) 40%,
        rgba(212,165,116,0) 70%);
    filter: blur(4px);
    transform: scale(calc(1 + (var(--candle-flicker) - 1) * 0.3));
}
.cursor-flame {
    position: absolute;
    width: 8px; height: 8px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(var(--candle-flicker));
    border-radius: 50%;
    background: radial-gradient(circle, #F4D49A 0%, #D4A574 60%, rgba(212,165,116,0) 100%);
    box-shadow: 0 0 12px rgba(212,165,116,0.85);
}
.cursor-trail {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 199;
}
.cursor-trail .trail-dot {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,165,116,0.7), rgba(212,165,116,0));
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
}
.cursor-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 201;
    font-family: var(--font-whisper);
    font-size: 1.15rem;
    color: var(--candle-gold);
    text-shadow: 0 0 6px rgba(14,8,20,0.9);
    transform: translate(14px, 14px);
    opacity: 0;
    transition: opacity 0.4s var(--ease-respiratory);
    white-space: nowrap;
}
.cursor-tooltip.visible { opacity: 0.9; }

/* ----------------------------------------------------------------------
   TIMELINE (left margin, Roman numerals)
   ---------------------------------------------------------------------- */
.timeline {
    position: fixed;
    left: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 60;
    font-family: var(--font-numeral);
    color: var(--aged-vellum);
    user-select: none;
}
.timeline .numeral {
    font-size: 1.3rem;
    color: var(--aged-vellum);
    opacity: 0.45;
    letter-spacing: 0.06em;
    transition: color 1.6s var(--ease-respiratory),
                opacity 1.6s var(--ease-respiratory),
                text-shadow 1.6s var(--ease-respiratory);
}
.timeline .numeral.active {
    color: var(--candle-gold);
    opacity: 1;
    text-shadow: 0 0 12px rgba(212,165,116,0.6);
}
.timeline .tick {
    width: 0.8px; height: 18px;
    background: var(--candle-gold);
    opacity: 0.35;
}

/* ----------------------------------------------------------------------
   BRASS-ROD NAVIGATION (right edge)
   ---------------------------------------------------------------------- */
.brass-rod {
    position: fixed;
    right: 28px;
    top: 12vh;
    bottom: 12vh;
    width: 26px;
    z-index: 70;
}
.brass-rod .rod {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(122,31,46,0.0) 0%,
        var(--oxblood-damask) 8%,
        var(--candle-gold) 50%,
        var(--oxblood-damask) 92%,
        rgba(122,31,46,0.0) 100%);
    box-shadow: 0 0 8px rgba(212,165,116,0.25);
}
.brass-rod .bead {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--candle-gold);
    background: radial-gradient(circle, var(--burgundy-velvet) 30%, var(--midnight-wine) 80%);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.6s var(--ease-respiratory),
                box-shadow 0.6s var(--ease-respiratory);
}
.brass-rod .bead:nth-child(2) { top: 0%; }
.brass-rod .bead:nth-child(3) { top: 25%; }
.brass-rod .bead:nth-child(4) { top: 50%; }
.brass-rod .bead:nth-child(5) { top: 75%; }
.brass-rod .bead:nth-child(6) { top: 100%; }
.brass-rod .bead-inner {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--candle-gold);
    opacity: 0.45;
    transition: opacity 0.6s, box-shadow 0.6s;
}
.brass-rod .bead.active .bead-inner {
    opacity: 1;
    box-shadow: 0 0 12px rgba(212,165,116,0.85);
}
.brass-rod .bead:hover {
    transform: translate(-50%, -50%) scale(1.25);
}

.brass-key {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 0%;
    width: 26px;
    transition: top 1.4s var(--ease-respiratory);
    filter: drop-shadow(0 0 6px rgba(212,165,116,0.45));
}

/* ----------------------------------------------------------------------
   CHAMBER LAYOUT (full-viewport, layered z-planes)
   ---------------------------------------------------------------------- */
.parlor { position: relative; }

.chamber {
    position: relative;
    min-height: 108vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

.chamber > [class^="z-"] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.z-wallpaper { z-index: 1; }
.z-moldings  { z-index: 2; }
.z-objects   { z-index: 3; }
.z-content   { z-index: 4; pointer-events: auto; }
.z-particles { z-index: 5; }
.z-motes     { z-index: 6; }

/* z-plane −3 : the breathing damask */
.damask-fill {
    position: absolute; inset: -4%;
    background-color: var(--midnight-wine);
    background-image:
        radial-gradient(ellipse at 50% 40%, rgba(212,165,116,0.06) 0%, rgba(14,8,20,0.0) 60%),
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(122,31,46,0.0) 0deg, rgba(122,31,46,0.0) 60deg);
    /* damask SVG layered via mask */
    background-blend-mode: normal;
    opacity: 0.95;
}
.damask-fill::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%237A1F2E' stroke-width='1.1' opacity='0.92'><path d='M160 32 C 132 76, 124 120, 160 160 C 196 120, 188 76, 160 32 Z'/><path d='M160 60 C 144 92, 140 124, 160 152 C 180 124, 176 92, 160 60 Z'/><ellipse cx='160' cy='160' rx='22' ry='28'/><path d='M148 156 q 12 -10 24 0 M148 164 q 12 -10 24 0 M148 172 q 12 -10 24 0'/><path d='M40 40 q 24 -8 40 12 q -8 -28 -40 -12 Z'/><path d='M280 40 q -24 -8 -40 12 q 8 -28 40 -12 Z'/><path d='M40 280 q 24 8 40 -12 q -8 28 -40 12 Z'/><path d='M280 280 q -24 8 -40 -12 q 8 28 40 12 Z'/><path d='M80 160 q 30 -50 80 -50 q 50 0 80 50'/><path d='M80 160 q 30 50 80 50 q 50 0 80 -50'/><path d='M0 100 q 40 20 80 0'/><path d='M240 100 q 40 -20 80 0'/><path d='M0 220 q 40 -20 80 0'/><path d='M240 220 q 40 20 80 0'/><path d='M52 200 q 18 -22 40 -10 q -8 22 -40 10 Z'/><path d='M268 200 q -18 -22 -40 -10 q 8 22 40 10 Z'/><path d='M160 240 q -22 18 -10 40 q 22 -8 10 -40 Z'/></g></svg>");
    background-repeat: repeat;
    background-size: 320px 320px;
    opacity: 0.38;
    transform-origin: center;
    animation: breathe 22s var(--ease-respiratory) infinite,
               wallSkew 18s ease-in-out infinite alternate;
}
.damask-fill::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 70% 30%,
        rgba(212,165,116,0.08) 0%,
        rgba(14,8,20,0) 50%);
    pointer-events: none;
}

.parlour-fill::before { background-position: 80px 40px; }
.cabinet-fill::before { background-position: 20px 160px; }
.conservatory-fill::before { background-position: 180px 0; }
.landing-fill::before { background-position: 60px 220px; }

@keyframes breathe {
    0%, 100% { transform: scale(1.0); }
    50%      { transform: scale(1.012); }
}
@keyframes wallSkew {
    0%   { transform: skewY(-0.3deg); }
    100% { transform: skewY( 0.3deg); }
}

/* z-plane −2 : moldings */
.moldings {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
}

/* candles */
.candle {
    position: absolute;
    width: 12px; height: 36px;
    background: linear-gradient(180deg, var(--aged-vellum) 0%, #b6a075 80%, #5a4a30 100%);
    border-radius: 2px 2px 1px 1px;
    box-shadow: 0 0 14px rgba(212,165,116,0.35);
}
.candle .flame {
    position: absolute;
    top: -16px; left: 50%;
    transform: translateX(-50%) scale(var(--candle-flicker));
    transform-origin: bottom center;
    width: 12px; height: 22px;
    background: radial-gradient(ellipse at 50% 70%,
                #F4D49A 0%,
                #D4A574 40%,
                rgba(212,165,116,0) 80%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    filter: blur(0.3px);
    pointer-events: auto;
    cursor: none;
}
.candle .flame::after {
    /* halo */
    content: "";
    position: absolute;
    width: 60px; height: 60px;
    top: -22px; left: 50%;
    transform: translateX(-50%) scale(var(--candle-flicker));
    background: radial-gradient(circle,
        rgba(212,165,116,0.35) 0%,
        rgba(212,165,116,0) 70%);
    pointer-events: none;
}

.candle-l           { top: 38%; left:  9%; }
.candle-r           { top: 38%; right: 9%; }
.candle-mantel-l    { top: 56%; left: 35%; }
.candle-mantel-r    { top: 56%; right: 35%; }
.candle-desk        { top: 60%; left: 28%; }
.candle-conservatory{ top: 50%; right: 22%; }
.candle-landing     { top: 48%; left: 14%; }

/* ----------------------------------------------------------------------
   z-plane −1 : OBJECTS — daguerreotypes, vase, mirror, planchette
   ---------------------------------------------------------------------- */
.daguerreotype {
    position: absolute;
    pointer-events: auto;
    cursor: none;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.6));
}
.daguerreotype svg { display: block; }
.daguerreotype .lid { transform-origin: center; transform: scaleY(0); transition: transform 0.32s var(--ease-respiratory); }
.daguerreotype.blink .lid { transform: scaleY(1); }

.dag-1 { top: 22%; left: 14%; transform: rotate(-3deg); }
.dag-2 { top: 18%; left: 12%; transform: rotate(2deg); }
.dag-3 { top: 22%; right: 9%; transform: rotate(-2deg); }
.dag-4 { top: 18%; right: 9%; transform: rotate(3deg); }
.dag-5 { top: 24%; left: 8%;  transform: rotate(-2deg); }
.dag-6 { top: 16%; right: 12%; transform: rotate(3deg); }

.daguerreotype::after {
    /* ectoplasm tendril on hover */
    content: "";
    position: absolute;
    top: 40%;
    left: 50%;
    width: 18px; height: 60px;
    background: radial-gradient(ellipse at 50% 100%,
        rgba(154,124,157,0.6) 0%,
        rgba(154,124,157,0) 70%);
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom;
    transition: transform 1.6s var(--ease-respiratory), opacity 1.6s var(--ease-respiratory);
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
}
.daguerreotype.blink::after { transform: translateX(-50%) translateY(-30px) scaleY(1); opacity: 1; }

/* the vase */
.vase-stage {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55));
}
.vase-stage .rose {
    transition: opacity 1.4s var(--ease-respiratory);
    opacity: 0;
}
.vase-stage[data-visible-rose="1"] .rose-1,
.vase-stage[data-visible-rose="2"] .rose-2,
.vase-stage[data-visible-rose="3"] .rose-3,
.vase-stage[data-visible-rose="4"] .rose-4,
.vase-stage[data-visible-rose="5"] .rose-5,
.vase-stage[data-visible-rose="6"] .rose-6 { opacity: 1; }

/* mirror */
.mirror-frame {
    position: absolute;
    top: 18%;
    right: 18%;
    width: 180px; height: 252px;
    pointer-events: none;
    filter: drop-shadow(0 0 24px rgba(0,0,0,0.7));
}
.mirror-flame {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 12%;
    width: 14px;
    height: 76%;
    pointer-events: none;
}
.mirror-flame .m-flame {
    position: absolute;
    left: 50%;
    width: 12px; height: 18px;
    transform: translate(-50%, 0) scale(var(--candle-flicker));
    background: radial-gradient(ellipse at 50% 70%,
        #F4D49A 0%,
        #D4A574 40%,
        rgba(212,165,116,0) 80%);
    border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    top: 0;
    transition: top 0.6s var(--ease-respiratory);
}
.mirror-frame::after {
    /* one cool breath-shimmer */
    content: "";
    position: absolute;
    top: 40%; left: 50%;
    width: 80%; height: 14%;
    transform: translateX(-50%);
    background: radial-gradient(ellipse,
        rgba(90,110,122,0.0) 0%,
        rgba(90,110,122,0.0) 100%);
    transition: background 1.2s var(--ease-respiratory);
    pointer-events: none;
}
.mirror-frame.shimmer::after {
    background: radial-gradient(ellipse,
        rgba(90,110,122,0.35) 0%,
        rgba(90,110,122,0) 70%);
}

/* planchette */
.planchette-wrap {
    position: absolute;
    left: 22%;
    top: 56%;
    width: 56%; height: 28%;
    pointer-events: none;
}
.planchette-trail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.planchette {
    position: absolute;
    left: 0; top: 0;
    width: 90px; height: 60px;
    transform: translate(0, 0);
    transition: transform 0.06s linear;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

.ouija-band {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    width: 60%;
    justify-content: center;
    color: var(--candle-gold);
    opacity: 0.18;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.14em;
    user-select: none;
}

/* foyer impossible-doorway preview (smaller) */
.foyer-door {
    position: absolute;
    bottom: 16%;
    left: 50%;
    transform: translateX(-50%);
    width: 180px; height: 280px;
    pointer-events: none;
    opacity: 0.4;
    filter: blur(0.3px);
}
.foyer-door .door-frame {
    position: absolute;
    inset: 0;
    border: 1px solid var(--candle-gold);
    background: var(--tomb-black);
}
.foyer-door .door-rect {
    position: absolute;
    inset: 8%;
    background: var(--midnight-wine);
    border: 0.5px solid rgba(212,165,116,0.4);
}
.foyer-door .door-rect.r2 { inset: 16%; }
.foyer-door .door-rect.r3 { inset: 24%; }
.foyer-door .door-mist {
    position: absolute;
    inset: 32%;
    background: radial-gradient(ellipse,
        rgba(90,110,122,0.5) 0%,
        rgba(90,110,122,0.15) 60%,
        rgba(90,110,122,0) 100%);
    animation: mistPulse 5s ease-in-out infinite;
}

/* ouija-style YES / NO toggle */
.ouija-toggle {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 18px 0 24px 0;
    padding: 12px 22px;
    border: 1px solid var(--candle-gold);
    border-radius: 30px;
    background: rgba(61,26,46,0.4);
    width: max-content;
}
.ouija-toggle button {
    font-family: var(--font-display);
    font-size: 1.4rem;
    letter-spacing: 0.2em;
    color: var(--aged-vellum);
    transition: color 0.6s var(--ease-respiratory), text-shadow 0.6s var(--ease-respiratory);
}
.ouija-toggle button:hover {
    color: var(--candle-gold);
    text-shadow: 0 0 8px rgba(212,165,116,0.55);
}
.ouija-toggle .ouija-bar {
    width: 1px; height: 22px;
    background: var(--candle-gold);
    opacity: 0.5;
}

/* ----------------------------------------------------------------------
   z-plane 0 : CONTENT (typography)
   ---------------------------------------------------------------------- */
.z-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12vh 14vw 12vh 12vw;
}

.page-numeral {
    position: absolute;
    bottom: 28px; left: 64px;
    font-family: var(--font-numeral);
    font-size: 2.4rem;
    color: var(--tomb-black);
    text-shadow: 0 0 1px var(--candle-gold);
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.fleuron {
    font-size: 1.5rem;
    color: var(--candle-gold);
    margin-bottom: 14px;
    text-align: center;
    width: max-content;
}

.chamber-label {
    font-family: var(--font-display);
    font-size: 0.78rem;
    color: var(--aged-vellum);
    letter-spacing: 0.32em;
    opacity: 0.7;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.chamber-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.6rem, 8.4vw, 7.2rem);
    color: var(--aged-vellum);
    line-height: 0.96;
    letter-spacing: -0.025em;
    margin: 6px 0 24px 0;
    position: relative;
    cursor: none;
}
.chamber-title .title-italic {
    display: block;
    font-style: italic;
    font-weight: 700;
    font-family: var(--font-spirit);
    color: var(--candle-gold);
    font-size: clamp(1.4rem, 2.4vw, 2.2rem);
    letter-spacing: 0.04em;
    margin-top: 12px;
}
.chamber-title::after {
    /* secondary spirit-mist title on hover */
    content: attr(data-secondary);
    display: block;
    position: absolute;
    left: 0; bottom: -38px;
    font-family: var(--font-spirit);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--spirit-mist);
    letter-spacing: 0.04em;
    opacity: 0;
    transition: opacity 1s var(--ease-respiratory);
    pointer-events: none;
}
.chamber-title.reveal-secondary::after { opacity: 0.85; }

/* cartouche (oval-framed paragraph blocks) */
.cartouche {
    position: relative;
    max-width: 520px;
    padding: 32px 36px;
    background:
        radial-gradient(ellipse at center,
            rgba(232,221,200,0.04) 0%,
            rgba(232,221,200,0) 70%);
    border: 1px solid rgba(212,165,116,0.3);
    border-radius: 50% / 14%;
    color: var(--aged-vellum);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.78;
    margin-top: 6px;
}
.cartouche-narrow { max-width: 420px; }
.cartouche-right  { align-self: flex-end; margin-right: 5vw; }

.dropcap {
    float: left;
    font-family: var(--font-numeral);
    font-size: 4.4rem;
    line-height: 1;
    margin: 4px 10px 0 0;
    color: var(--tomb-black);
    text-shadow: 0 0 1px var(--candle-gold);
}

.narrative { margin-bottom: 12px; }
.narrative em { color: var(--candle-gold); font-style: italic; }

/* spirit-message: typewriter italic, drifts in slowly */
.spirit-msg {
    font-family: var(--font-spirit);
    font-style: italic;
    color: var(--ectoplasm-lilac);
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    min-height: 1.6em;
    opacity: 0.85;
}

/* hand-drawn flourish under each cartouche */
.flourish {
    width: 280px;
    height: 24px;
    margin-top: 18px;
    background:
        radial-gradient(ellipse 2px 2px at 95% 50%, var(--candle-gold) 0%, transparent 100%),
        linear-gradient(90deg,
            transparent 0%,
            var(--candle-gold) 6%,
            transparent 14%,
            var(--candle-gold) 20%,
            transparent 36%,
            var(--candle-gold) 48%,
            transparent 64%,
            var(--candle-gold) 78%,
            transparent 92%);
    mask: radial-gradient(ellipse at center, black 60%, transparent 95%);
    opacity: 0.7;
}

.invitation {
    margin-top: 28px;
    font-family: var(--font-spirit);
    font-style: italic;
    color: var(--aged-vellum);
    font-size: 1.4rem;
    letter-spacing: 0.02em;
    opacity: 0.95;
}

.colophon {
    margin-top: 36px;
    font-family: var(--font-spirit);
    font-style: italic;
    color: var(--aged-vellum);
    opacity: 0.55;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
}

/* bell toggle in the FOYER */
.bell-toggle {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid rgba(212,165,116,0.5);
    border-radius: 24px;
    color: var(--aged-vellum);
    font-family: var(--font-spirit);
    font-style: italic;
    font-size: 1rem;
    transition: background 0.6s var(--ease-respiratory),
                box-shadow 0.6s var(--ease-respiratory);
}
.bell-toggle:hover {
    background: rgba(122,31,46,0.3);
    box-shadow: 0 0 12px rgba(212,165,116,0.35);
}
.bell-toggle[aria-pressed="true"] {
    background: rgba(212,165,116,0.15);
    box-shadow: 0 0 14px rgba(212,165,116,0.5);
}
.bell-toggle .bell-label { letter-spacing: 0.12em; font-size: 0.85rem; }

/* wax seal mailto */
.wax-seal {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    transition: transform 0.6s var(--ease-respiratory);
}
.wax-seal:hover { transform: rotate(-3deg) scale(1.04); }
.wax-caption {
    font-family: var(--font-whisper);
    font-size: 1.15rem;
    color: var(--aged-vellum);
    opacity: 0.85;
}

/* ----------------------------------------------------------------------
   z-plane +1: CANDLE-SMOKE PARTICLES
   ---------------------------------------------------------------------- */
.z-particles {
    pointer-events: none;
}
.z-particles .smoke {
    position: absolute;
    bottom: -10%;
    width: 28px; height: 28px;
    border-radius: 50%;
    filter: blur(var(--blur, 22px));
    opacity: var(--op, 0.14);
    background: radial-gradient(circle,
        var(--col, var(--candle-gold)) 0%,
        rgba(212,165,116,0) 70%);
    transform: translate(0, 0);
    animation: smokeRise var(--dur, 8s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
    --xstart: 0px;
    --xmid:   24px;
    --xend:  -14px;
    --ymax:  -120vh;
}
@keyframes smokeRise {
    0%   { transform: translate(var(--xstart, 0), 0) scale(0.7); opacity: 0; }
    10%  { opacity: var(--op, 0.14); }
    50%  { transform: translate(var(--xmid, 20px), -55vh) scale(1.1); }
    90%  { opacity: 0.04; }
    100% { transform: translate(var(--xend, -10px), var(--ymax, -110vh)) scale(1.6); opacity: 0; }
}
.z-particles .smoke.nudge {
    animation-duration: calc(var(--dur, 8s) / 1.6);
    --xmid: calc(var(--xmid) + 60px);
}

/* ----------------------------------------------------------------------
   z-plane +2: motes & raindrop
   ---------------------------------------------------------------------- */
.z-motes .dust {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: var(--candle-gold);
    opacity: 0.35;
    box-shadow: 0 0 4px rgba(212,165,116,0.6);
    animation: drift 16s linear infinite;
}
.z-motes .d1 { top: 22%; left: 30%; animation-delay: -2s; }
.z-motes .d2 { top: 38%; left: 70%; animation-delay: -7s; }
.z-motes .d3 { top: 60%; left: 18%; animation-delay: -11s; }
.z-motes .d4 { top: 76%; left: 80%; animation-delay: -4s; }
@keyframes drift {
    0%   { transform: translate(0, 0); opacity: 0.1; }
    25%  { transform: translate(20px, -40px); opacity: 0.6; }
    50%  { transform: translate(-10px, -80px); opacity: 0.45; }
    75%  { transform: translate(30px, -120px); opacity: 0.55; }
    100% { transform: translate(0, -160px); opacity: 0; }
}

.z-motes .raindrop {
    position: absolute;
    top: -10%;
    left: 80%;
    width: 1.5px; height: 80px;
    background: linear-gradient(180deg,
        rgba(232,221,200,0) 0%,
        rgba(232,221,200,0.7) 80%,
        rgba(232,221,200,0) 100%);
    animation: rain 5.6s linear infinite;
    opacity: 0.55;
}
@keyframes rain {
    0%   { transform: translate(0, 0); opacity: 0; }
    20%  { opacity: 0.55; }
    100% { transform: translate(-20px, 120vh); opacity: 0; }
}

/* ----------------------------------------------------------------------
   DIAGONAL DIVIDERS  —  the cracked-perspective floor lines
   ---------------------------------------------------------------------- */
.diagonal-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 14vh;
    z-index: 7;
    pointer-events: none;
}

/* ----------------------------------------------------------------------
   PER-CHAMBER DIAGONAL ROTATIONS
   ---------------------------------------------------------------------- */
.chamber-foyer       { --tilt: -7deg; }
.chamber-parlour     { --tilt: 13deg; background: linear-gradient(to bottom right, rgba(61,26,46,0.0), rgba(122,31,46,0.06)); }
.chamber-cabinet     { --tilt: -23deg; }
.chamber-conservatory{ --tilt: 7deg; }
.chamber-landing     { --tilt: -13deg; }

.chamber > .z-moldings .moldings { transform: skewY(0deg); }
.chamber-foyer       .z-moldings .moldings { transform: skewY(0.3deg); }
.chamber-parlour     .z-moldings .moldings { transform: skewY(-0.4deg); }
.chamber-cabinet     .z-moldings .moldings { transform: skewY(0.6deg); }
.chamber-conservatory.z-moldings .moldings { transform: skewY(-0.2deg); }
.chamber-landing     .z-moldings .moldings { transform: skewY(0.4deg); }

/* ----------------------------------------------------------------------
   THE IMPOSSIBLE DOORWAY (LANDING)
   ---------------------------------------------------------------------- */
.impossible-door {
    position: absolute;
    top: 22%;
    right: 8%;
    width: 320px; height: 460px;
    pointer-events: none;
    perspective: 800px;
}
.impossible-door .door-rect {
    position: absolute;
    inset: 0;
    background: var(--tomb-black);
    border: 1px solid var(--candle-gold);
    box-shadow: inset 0 0 24px rgba(0,0,0,0.85);
    transition: filter 1.2s var(--ease-respiratory);
}
.impossible-door .door-rect.r1 {
    border-color: rgba(212,165,116,0.85);
}
.impossible-door .door-rect.r2 { transform: scale(0.92); border-color: rgba(212,165,116,0.7); }
.impossible-door .door-rect.r3 { transform: scale(0.92); border-color: rgba(212,165,116,0.55); }
.impossible-door .door-rect.r4 { transform: scale(0.92); border-color: rgba(212,165,116,0.4); }
.impossible-door .door-rect.r5 { transform: scale(0.92); border-color: rgba(212,165,116,0.25); }
.impossible-door .door-rect.r6 {
    transform: scale(0.92);
    border-color: rgba(212,165,116,0.15);
    background: var(--tomb-black);
    overflow: hidden;
}
.impossible-door .door-mist {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 60%,
        rgba(90,110,122,0.85) 0%,
        rgba(90,110,122,0.55) 30%,
        rgba(90,110,122,0.2) 60%,
        rgba(90,110,122,0) 100%);
    animation: mistPulse 2.5s ease-in-out infinite;
    transition: opacity 2s var(--ease-respiratory);
    opacity: 0.6;
}
.impossible-door.bright .door-mist { opacity: 1; }
.impossible-door.bright .door-rect.r1 { box-shadow: 0 0 36px rgba(90,110,122,0.4) inset, 0 0 24px rgba(90,110,122,0.25); }

@keyframes mistPulse {
    0%, 100% { transform: scale(1.0); opacity: 0.6; }
    50%      { transform: scale(1.08); opacity: 0.9; }
}

/* ----------------------------------------------------------------------
   CONSERVATORY OBJECTS
   ---------------------------------------------------------------------- */
.ewer {
    position: absolute;
    bottom: 22%;
    left: 24%;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.5));
}
.saucer {
    position: absolute;
    bottom: 18%;
    right: 26%;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

/* ----------------------------------------------------------------------
   HIDDEN SKULL TILE (Easter egg) + cartouche popup
   ---------------------------------------------------------------------- */
.skull-tile {
    position: absolute;
    top: 42%;
    left: 6%;
    width: 28px; height: 28px;
    pointer-events: auto;
    cursor: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g stroke='%237A1F2E' stroke-width='0.8' fill='none' opacity='0.95'><ellipse cx='14' cy='14' rx='10' ry='12'/><circle cx='10' cy='13' r='1.6' fill='%230E0814'/><circle cx='18' cy='13' r='1.6' fill='%230E0814'/></g></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.45;
    transition: opacity 0.6s, transform 0.6s;
}
.skull-tile:hover {
    opacity: 0.95;
    transform: scale(1.18);
}
.cartouche-popup {
    position: fixed;
    inset: 0;
    background: rgba(14,8,20,0.85);
    display: flex;
    align-items: center; justify-content: center;
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s var(--ease-respiratory);
}
.cartouche-popup.open {
    opacity: 1;
    pointer-events: auto;
}
.cartouche-popup-inner {
    position: relative;
    max-width: 480px;
    padding: 40px 48px;
    background: var(--midnight-wine);
    border: 1px solid var(--candle-gold);
    border-radius: 50% / 22%;
    color: var(--aged-vellum);
    text-align: center;
    box-shadow: 0 0 40px rgba(212,165,116,0.25), inset 0 0 30px rgba(122,31,46,0.4);
}
.cartouche-mark {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: 0.32em;
    color: var(--candle-gold);
    margin-bottom: 18px;
    text-transform: uppercase;
}
.cartouche-quote {
    font-family: var(--font-spirit);
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 14px;
}
.cartouche-attr {
    font-family: var(--font-whisper);
    font-size: 1.05rem;
    color: var(--aged-vellum);
    opacity: 0.7;
}
.cartouche-close {
    position: absolute;
    top: 12px; right: 22px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--candle-gold);
    cursor: none;
}

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 880px) {
    .timeline { left: 10px; gap: 10px; }
    .timeline .numeral { font-size: 1rem; }
    .brass-rod { right: 10px; }
    .z-content { padding: 14vh 7vw; }
    .cartouche { padding: 22px 24px; }
    .impossible-door { width: 200px; height: 300px; right: 4%; top: 10%; }
    .mirror-frame { right: 4%; width: 120px; height: 168px; top: 6%; }
    .vase-stage { transform: translateX(-50%) scale(0.78); }
    .ouija-band { display: none; }
    .dag-2, .dag-3, .dag-5 { display: none; }
}

/* ----------------------------------------------------------------------
   REDUCED MOTION
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .damask-fill::before { animation: none; }
    .z-particles .smoke { animation: none; opacity: 0.1; }
    .z-motes .dust, .z-motes .raindrop { animation: none; opacity: 0.2; }
    .candle .flame { animation: none; }
    .planchette { transition: none; }
    .vase-stage .rose { transition: none; }
}