/* ============================================================
   mysterious.boo -- playful haunted/mysterious experience
   Chrome-metallic palette, Libre Baskerville, room-based scroll
   ============================================================ */

:root {
    --chrome-dark: #2A2A30;
    --chrome-light: #8A8A95;
    --chrome-white: #D0D0D8;
    --ghost-glow: #A8D0F0;
    --candle-warm: #F0C878;
    --shadow-deep: #14141A;
    --noise-gray: #4A4A55;

    --gx: 50vw;
    --gy: 50vh;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-weight: 400;
    background: var(--shadow-deep);
    color: var(--chrome-white);
    line-height: 1.85;
    overflow-x: hidden;
    cursor: none;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* Hide native cursor on the page; keep on inputs (none here) */
a, button { cursor: none; }

.svg-defs { position: absolute; left: -9999px; }

/* ============================================================
   Atmospheric noise overlay (TV static across all sections)
   ============================================================ */
.noise-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.12;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.32  0 0 0 0 0.34  0 0 0 0 0.40  0 0 0 0.6 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
    animation: noiseShift 1.2s steps(6) infinite;
    mix-blend-mode: screen;
}

@keyframes noiseShift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-6px, 4px); }
    40%  { transform: translate(4px, -6px); }
    60%  { transform: translate(-2px, 8px); }
    80%  { transform: translate(8px, -2px); }
    100% { transform: translate(0, 0); }
}

/* Page-load fade in */
body.is-loading .noise-overlay { opacity: 0; }
.noise-overlay { transition: opacity 500ms ease; }

/* ============================================================
   Ghost cursor follower (with elastic lag)
   ============================================================ */
.ghost-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 28px;
    height: 34px;
    transform: translate3d(var(--gx), var(--gy), 0) translate(-50%, -60%) scale(1);
    transition: transform 200ms cubic-bezier(0.18, 0.84, 0.34, 1.06);
    pointer-events: none;
    z-index: 1100;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(168, 208, 240, 0.4));
}

.ghost-cursor.is-visible { opacity: 1; }

.ghost-cursor.is-hover {
    transform: translate3d(var(--gx), var(--gy), 0) translate(-50%, -60%) scale(1.2);
}

.ghost-cursor svg { display: block; }

.ghost-eye { animation: ghostBlink 4.5s infinite; }
.ghost-eye:last-child { animation-delay: 0.05s; }

@keyframes ghostBlink {
    0%, 92%, 100% { transform: scaleY(1); transform-origin: center; }
    95%           { transform: scaleY(0.1); }
}

/* ============================================================
   Hidden ghost-icon navigation
   ============================================================ */
.ghost-nav {
    position: fixed;
    top: 28px;
    right: 32px;
    width: 48px;
    height: 56px;
    background: transparent;
    border: none;
    padding: 0;
    z-index: 900;
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 0 6px rgba(168, 208, 240, 0.2));
}

.ghost-nav svg { width: 100%; height: 100%; }

.ghost-nav:hover {
    animation: ghostWobble 0.7s ease-in-out;
}

.ghost-nav.is-active {
    transform: rotate(-12deg) scale(0.92);
}

@keyframes ghostWobble {
    0%, 100% { transform: rotate(0deg); }
    20%      { transform: rotate(-8deg) translateY(-2px); }
    40%      { transform: rotate(7deg) translateY(2px); }
    60%      { transform: rotate(-5deg) translateY(-1px); }
    80%      { transform: rotate(3deg); }
}

/* Nav panel */
.nav-panel {
    position: fixed;
    top: 96px;
    right: 32px;
    background: linear-gradient(135deg, rgba(42, 42, 48, 0.96), rgba(74, 74, 85, 0.92));
    border: 1px solid rgba(208, 208, 216, 0.18);
    border-radius: 4px;
    padding: 18px 22px;
    z-index: 850;
    min-width: 220px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 12px rgba(168, 208, 240, 0.08);
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(6px);
}

.nav-panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.nav-panel ul { list-style: none; }
.nav-panel li { margin: 6px 0; }
.nav-panel a {
    display: block;
    color: var(--chrome-white);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.02em;
    padding: 6px 8px;
    border-left: 2px solid transparent;
    transition: border-color 200ms ease, color 200ms ease, padding-left 200ms ease;
}
.nav-panel a:hover {
    color: var(--ghost-glow);
    border-left-color: var(--ghost-glow);
    padding-left: 14px;
}

/* ============================================================
   Rooms (sections)
   ============================================================ */
.room {
    position: relative;
    min-height: 100vh;
    padding: 96px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: background 600ms ease;
}

.room-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 0;
}

.room-header {
    text-align: center;
    margin-bottom: 56px;
}

.room-numeral {
    display: inline-block;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: var(--ghost-glow);
    opacity: 0.7;
    margin-bottom: 12px;
    font-style: italic;
}

.room-header h2 {
    font-weight: 700;
    font-size: clamp(28px, 3.2vw, 44px);
    letter-spacing: 0.01em;
    color: var(--chrome-white);
    margin-bottom: 10px;
}

.room-subtitle {
    font-size: clamp(13px, 1vw, 15px);
    opacity: 0.6;
    letter-spacing: 0.03em;
}

/* ============================================================
   Foyer (chrome-metallic)
   ============================================================ */
.foyer {
    background:
        linear-gradient(135deg, #1c1c22 0%, #2A2A30 30%, #4A4A55 55%, #6A6A75 70%, #4A4A55 85%, #2A2A30 100%);
    background-size: 200% 200%;
    background-position: 50% 50%;
    transition: background-position 800ms ease, background 800ms ease;
}

.chrome-bloom {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120vw;
    height: 120vh;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle at center,
        rgba(208, 208, 216, 0.32) 0%,
        rgba(138, 138, 149, 0.18) 25%,
        rgba(74, 74, 85, 0.05) 55%,
        transparent 75%);
    animation: chromeBloom 1400ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
    pointer-events: none;
    z-index: 1;
}

@keyframes chromeBloom {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.candle-distant {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 380px;
    height: 380px;
    transform: translateX(-50%);
    background: radial-gradient(circle at center,
        rgba(240, 200, 120, 0.38) 0%,
        rgba(240, 200, 120, 0.12) 30%,
        transparent 65%);
    opacity: 0;
    animation: candlePulse 2400ms ease 1600ms forwards;
    pointer-events: none;
    z-index: 2;
    filter: blur(6px);
}

@keyframes candlePulse {
    0%   { opacity: 0; transform: translateX(-50%) scale(0.6); }
    50%  { opacity: 1; transform: translateX(-50%) scale(1); }
    100% { opacity: 0.42; transform: translateX(-50%) scale(0.95); }
}

.foyer-content {
    position: relative;
    z-index: 5;
    text-align: center;
    width: 100%;
    max-width: 760px;
}

.domain-title {
    font-weight: 700;
    font-size: clamp(40px, 7vw, 92px);
    letter-spacing: 0.01em;
    color: var(--chrome-white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6), 0 0 24px rgba(168, 208, 240, 0.06);
    line-height: 1.1;
    margin-bottom: 18px;
}

.word-mysterious {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 700ms ease 600ms forwards;
}

.domain-dot {
    display: inline-block;
    color: var(--ghost-glow);
    opacity: 0;
    animation: fadeIn 600ms ease 800ms forwards;
}

.word-boo {
    display: inline-block;
    opacity: 0;
    animation: fadeIn 500ms ease 1000ms forwards;
}

.boo-letter {
    display: inline-block;
    transform-origin: center bottom;
    animation: booBreath 2200ms ease-in-out infinite;
    color: var(--chrome-white);
}
.boo-letter:nth-child(1) { animation-delay: 0ms; }
.boo-letter:nth-child(2) { animation-delay: 120ms; }
.boo-letter:nth-child(3) { animation-delay: 240ms; }

.word-boo.is-hover .boo-letter {
    animation: booBreathStrong 1400ms ease-in-out infinite;
}

@keyframes booBreath {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.1); }
}
@keyframes booBreathStrong {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.2); }
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ghost-whisper {
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 17px);
    letter-spacing: 0.04em;
    color: var(--chrome-white);
    opacity: 0;
    animation: fadeIn 800ms ease 1300ms forwards;
    margin-bottom: 36px;
}

.assembled-ghost {
    display: inline-block;
    opacity: 0;
    transform: scale(0.6);
    animation: ghostPopIn 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 1200ms forwards;
    margin-top: 24px;
    filter: drop-shadow(0 0 18px rgba(168, 208, 240, 0.18));
}

@keyframes ghostPopIn {
    0%   { opacity: 0; transform: scale(0.6); }
    60%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

.ag-outline {
    stroke-dasharray: 360;
    stroke-dashoffset: 360;
    animation: ghostDraw 1200ms ease 1300ms forwards;
}
.ag-fill { opacity: 0; animation: fadeIn 600ms ease 2300ms forwards; }
.ag-eye, .ag-mouth { opacity: 0; animation: ghostBlinkIn 600ms ease 2700ms forwards; }
.ag-eye-l { animation-delay: 2700ms; }
.ag-eye-r { animation-delay: 2800ms; }
.ag-mouth { animation-delay: 2900ms; }

@keyframes ghostDraw {
    to { stroke-dashoffset: 0; }
}
@keyframes ghostBlinkIn {
    0%   { opacity: 0; transform: scaleY(0.1); }
    60%  { opacity: 1; transform: scaleY(1.1); }
    100% { opacity: 1; transform: scaleY(1); }
}

.scroll-hint {
    position: absolute;
    left: 50%;
    bottom: -60px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--chrome-white);
    opacity: 0;
    animation: fadeIn 800ms ease 2400ms forwards, scrollHint 2.4s ease-in-out 2400ms infinite;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-style: italic;
    font-variant: small-caps;
}

@keyframes scrollHint {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 6px); }
}

/* ============================================================
   Fog Room
   ============================================================ */
.fog-room {
    background: linear-gradient(180deg, #1F1F25 0%, #2A2A30 50%, #1A1A22 100%);
}

.fog-layer {
    position: absolute;
    left: -10%;
    width: 120%;
    height: 60vh;
    pointer-events: none;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(208, 208, 216, 0.18) 0%,
        rgba(138, 138, 149, 0.10) 30%,
        rgba(42, 42, 48, 0) 65%);
    filter: blur(30px);
    z-index: 2;
}

.fog-1 { top: 10%;  animation: fogDrift 22s ease-in-out infinite; }
.fog-2 { top: 50%;  animation: fogDrift 28s ease-in-out infinite reverse; opacity: 0.7; }
.fog-3 { top: 75%;  animation: fogDrift 18s ease-in-out infinite;  opacity: 0.5; height: 40vh; }

.fog-room.is-active .fog-layer { opacity: 1; }

@keyframes fogDrift {
    0%, 100% { transform: translateX(-6%) scale(1); }
    50%      { transform: translateX(8%) scale(1.06); }
}

/* ============================================================
   Candle Room
   ============================================================ */
.candle-room {
    background: linear-gradient(180deg, #1A1A22 0%, #221C18 50%, #1A1A22 100%);
}

.candle-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(240, 200, 120, 0.45) 0%,
        rgba(240, 200, 120, 0.12) 35%,
        rgba(240, 200, 120, 0) 65%);
    filter: blur(8px);
    opacity: 0;
    z-index: 2;
}

.candle-glow-1 { left: 12%; top: 18%; }
.candle-glow-2 { right: 15%; top: 38%; width: 320px; height: 320px; }
.candle-glow-3 { left: 30%; bottom: 12%; width: 260px; height: 260px; }

.candle-room.is-active .candle-glow-1 { animation: candleFlicker 3.1s infinite; }
.candle-room.is-active .candle-glow-2 { animation: candleFlicker 2.6s infinite 0.4s; }
.candle-room.is-active .candle-glow-3 { animation: candleFlicker 3.7s infinite 0.8s; }

/* Irregular keyframe percentages for natural flicker */
@keyframes candleFlicker {
    0%   { opacity: 0.5;  transform: scale(1)    translateX(0); }
    8%   { opacity: 0.85; transform: scale(1.04) translateX(-1px); }
    14%  { opacity: 0.62; transform: scale(0.98); }
    27%  { opacity: 0.92; transform: scale(1.05) translateX(2px); }
    33%  { opacity: 0.58; transform: scale(0.96); }
    49%  { opacity: 0.88; transform: scale(1.03); }
    61%  { opacity: 0.65; transform: scale(0.99) translateX(-1px); }
    74%  { opacity: 0.94; transform: scale(1.06); }
    81%  { opacity: 0.6;  transform: scale(0.97); }
    93%  { opacity: 0.83; transform: scale(1.02); }
    100% { opacity: 0.5;  transform: scale(1)    translateX(0); }
}

/* ============================================================
   Shadow Room
   ============================================================ */
.shadow-room {
    background: linear-gradient(180deg, #14141A 0%, #1F1F25 50%, #14141A 100%);
}

.shadow-puppet {
    position: absolute;
    pointer-events: none;
    z-index: 2;
    background: var(--shadow-deep);
    opacity: 0.9;
    filter: blur(0.5px);
}

.shadow-1 {
    left: 6%;
    bottom: 0;
    width: 220px;
    height: 380px;
    clip-path: polygon(50% 0%, 70% 18%, 65% 30%, 80% 30%, 80% 80%, 70% 80%, 70% 100%, 30% 100%, 30% 80%, 20% 80%, 20% 30%, 35% 30%, 30% 18%);
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.95), rgba(20, 20, 26, 0.6));
    transform: translateX(-12%);
    animation: shadowSway 9s ease-in-out infinite;
}

.shadow-2 {
    right: 8%;
    bottom: 0;
    width: 180px;
    height: 320px;
    clip-path: polygon(40% 0%, 60% 8%, 55% 25%, 75% 40%, 70% 55%, 85% 70%, 80% 100%, 20% 100%, 15% 70%, 30% 55%, 25% 40%, 45% 25%);
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.92), rgba(20, 20, 26, 0.55));
    transform: translateX(10%);
    animation: shadowSway 11s ease-in-out infinite reverse;
}

.shadow-3 {
    left: 50%;
    bottom: 0;
    width: 100px;
    height: 200px;
    transform: translateX(-50%);
    clip-path: polygon(50% 0%, 70% 18%, 60% 35%, 80% 50%, 65% 100%, 35% 100%, 20% 50%, 40% 35%, 30% 18%);
    background: linear-gradient(180deg, rgba(20, 20, 26, 0.85), rgba(20, 20, 26, 0.45));
    opacity: 0.6;
    animation: shadowSway 13s ease-in-out infinite;
}

@keyframes shadowSway {
    0%, 100% { transform: translateX(-12%) skewX(-2deg); }
    50%      { transform: translateX(-6%)  skewX(3deg); }
}

/* ============================================================
   Archive Room
   ============================================================ */
.archive-room {
    background: linear-gradient(180deg, #14141A 0%, #1A1A22 100%);
    padding-bottom: 120px;
}

.archive-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%,
        rgba(168, 208, 240, 0.06) 0%,
        rgba(20, 20, 26, 0) 50%);
    pointer-events: none;
    z-index: 1;
}

.archive-card {
    background: linear-gradient(135deg, rgba(42, 42, 48, 0.6), rgba(74, 74, 85, 0.4));
    border: 1px solid rgba(208, 208, 216, 0.12);
    border-radius: 4px;
    padding: 36px 40px;
    margin-bottom: 60px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.archive-meta {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px dashed rgba(208, 208, 216, 0.18);
}

.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-size: 13px;
}

.meta-key {
    font-variant: small-caps;
    letter-spacing: 0.15em;
    color: var(--ghost-glow);
    opacity: 0.85;
    font-style: italic;
    font-size: 12px;
}

.meta-val {
    color: var(--chrome-white);
    text-align: right;
}

.archive-prose {
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.85;
    color: var(--chrome-white);
    opacity: 0.85;
    margin-bottom: 14px;
}

.archive-sign {
    text-align: right;
    font-style: italic;
    font-size: 13px;
    color: var(--candle-warm);
    opacity: 0.8;
}

.site-footer {
    text-align: center;
    color: var(--chrome-white);
    opacity: 0.5;
    font-size: 12px;
    letter-spacing: 0.15em;
    font-variant: small-caps;
}

.footer-sep { margin: 0 10px; }

/* ============================================================
   Clue panels (book-scholarly)
   ============================================================ */
.clue-panel {
    position: relative;
    background: linear-gradient(135deg,
        rgba(42, 42, 48, 0.78) 0%,
        rgba(74, 74, 85, 0.55) 50%,
        rgba(42, 42, 48, 0.78) 100%);
    border: 1px solid rgba(208, 208, 216, 0.15);
    border-left: 2px solid rgba(168, 208, 240, 0.45);
    border-radius: 2px;
    padding: 30px 36px;
    margin-bottom: 28px;
    transform: translateX(40px);
    opacity: 0;
    transition:
        transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 450ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

.clue-panel.is-revealed {
    transform: translateX(0);
    opacity: 1;
}

.clue-panel:hover {
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(168, 208, 240, 0.3);
    border-left-color: var(--ghost-glow);
}

.candle-panel:hover {
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.4),
        0 0 12px rgba(240, 200, 120, 0.32);
    border-left-color: var(--candle-warm);
}

.shadow-panel {
    border-left-color: rgba(74, 74, 85, 0.7);
}
.shadow-panel:hover {
    border-left-color: var(--chrome-white);
}

.clue-ornament {
    position: absolute;
    top: -12px;
    left: 28px;
    background: var(--shadow-deep);
    padding: 2px 8px;
    border: 1px solid rgba(208, 208, 216, 0.12);
    border-radius: 2px;
}

.clue-ornament svg { display: block; }

.clue-label {
    font-size: 12px;
    font-style: italic;
    font-variant: small-caps;
    letter-spacing: 0.18em;
    color: var(--ghost-glow);
    opacity: 0.75;
    margin-bottom: 8px;
    margin-top: 6px;
}

.clue-title {
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    color: var(--chrome-white);
    margin-bottom: 14px;
    letter-spacing: 0.005em;
}

.clue-body {
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.85;
    color: var(--chrome-white);
    opacity: 0.86;
    margin-bottom: 14px;
}

.clue-citation {
    font-style: italic;
    font-size: clamp(13px, 1vw, 15px);
    opacity: 0.6;
    text-align: right;
    letter-spacing: 0.03em;
    border-top: 1px dotted rgba(208, 208, 216, 0.18);
    padding-top: 12px;
    margin-top: 18px;
}

/* ============================================================
   Active room highlight
   ============================================================ */
.room.is-active .room-header h2 {
    text-shadow: 0 0 18px rgba(168, 208, 240, 0.18);
}

/* ============================================================
   Reduced motion fallback
   ============================================================ */
@media (max-width: 720px) {
    .room { padding: 64px 18px; }
    .room-content { padding: 24px 0; }
    .clue-panel { padding: 24px 22px; }
    .ghost-nav { top: 18px; right: 18px; width: 40px; height: 48px; }
    .nav-panel { right: 18px; top: 76px; min-width: 180px; }
    .candle-glow { width: 260px; height: 260px; }
    .shadow-1 { width: 140px; height: 240px; }
    .shadow-2 { width: 110px; height: 200px; }
    .shadow-3 { width: 70px; height: 140px; }
}