/* muhan.dev — surreal hand-drawn infinity corridor
   Palette: cool-grays + Viewport Blue (single chromatic note)
   Typography: Caveat / Shadows Into Light Two / Space Mono
*/

:root {
    --ink-deep:        #0F1419;
    --slate-stroke:    #3A4450;
    --pencil-gray:     #6E7A88;
    --fog:             #9AA6B2;
    --drafting-silver: #C7CFD6;
    --paper-cool:      #E8ECEF;
    --highlight-vellum:#F4F6F7;
    --viewport-blue:   #A8C3D6;

    --font-caveat: 'Caveat', cursive;
    --font-shadows: 'Shadows Into Light Two', cursive;
    --font-mono: 'Space Mono', monospace;

    --grid-cell: 32px;
    --rooms-count: 7;
    --room-width: 100vw;
    --track-width: calc(var(--room-width) * var(--rooms-count));
}

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

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--paper-cool);
    color: var(--slate-stroke);
    font-family: var(--font-caveat);
    cursor: none;
}

body {
    position: relative;
}

/* ===== Backgrounds ===== */
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(110, 122, 136, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(110, 122, 136, 0.06) 1px, transparent 1px);
    background-size: var(--grid-cell) var(--grid-cell);
    pointer-events: none;
    /* very subtle wobble via transform */
    will-change: transform;
}

.bg-dawn {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at 30% 20%,
        rgba(168, 195, 214, 0.18) 0%,
        rgba(244, 246, 247, 0.10) 35%,
        transparent 70%);
    animation: dawn-drift 24s ease-in-out infinite alternate;
}

@keyframes dawn-drift {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(8vw, 4vh); }
}

/* ===== Cursor ===== */
.cursor-glow {
    position: fixed;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(168, 195, 214, 0.35) 0%,
        rgba(168, 195, 214, 0.10) 40%,
        transparent 70%);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
    mix-blend-mode: multiply;
}

.cursor-glow.tight {
    width: 140px;
    height: 140px;
}

.cursor-dot {
    position: fixed;
    width: 16px;
    height: 16px;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    border: 1.4px solid var(--slate-stroke);
    border-radius: 50%;
    /* open-circle gap */
    clip-path: polygon(0 0, 100% 0, 100% 40%, 80% 40%, 80% 60%, 100% 60%, 100% 100%, 0 100%);
}

/* ===== Tape Measure ===== */
.tape-measure {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 38px;
    z-index: 100;
    pointer-events: none;
    display: flex;
    align-items: center;
    padding: 0 24px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--fog);
    letter-spacing: 0.04em;
}

.tape-track {
    position: relative;
    flex: 1;
    height: 18px;
    margin-right: 16px;
}

.tape-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--pencil-gray);
    opacity: 0.4;
}

.tape-fill {
    position: absolute;
    left: 0;
    top: 50%;
    height: 1.4px;
    background: var(--viewport-blue);
    transform: translateY(-50%);
    width: 0;
    transition: width 0.08s linear;
    box-shadow: 0 0 6px rgba(168, 195, 214, 0.6);
}

.tape-ticks {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to right,
        var(--pencil-gray) 0 1px,
        transparent 1px calc(100% / 14)
    );
    opacity: 0.3;
    background-size: 100% 8px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 8px;
    top: calc(50% - 4px);
}

.tape-label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fog);
    white-space: nowrap;
    min-width: 60px;
}

/* ===== Compass Rose ===== */
.compass-rose {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 200;
    width: 96px;
    height: 96px;
    pointer-events: auto;
    cursor: none;
}

.compass-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.compass-ring,
.compass-line,
.compass-needle {
    stroke: var(--slate-stroke);
    stroke-width: 1.2;
    stroke-linecap: round;
    fill: none;
}

.compass-needle {
    stroke: var(--viewport-blue);
    stroke-width: 1.6;
    transform-origin: 60px 60px;
    animation: needle-sway 8s ease-in-out infinite alternate;
}

@keyframes needle-sway {
    0%   { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }
}

.compass-text {
    fill: var(--fog);
    font-family: var(--font-mono);
    font-size: 8px;
    text-anchor: middle;
}

.compass-list {
    position: absolute;
    bottom: 100%;
    right: 0;
    list-style: none;
    margin-bottom: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    text-align: right;
}

.compass-rose:hover .compass-list,
.compass-rose:focus-within .compass-list {
    opacity: 1;
    pointer-events: auto;
}

.compass-list li {
    margin: 2px 0;
}

.room-btn {
    background: transparent;
    border: none;
    font-family: var(--font-caveat);
    font-size: 1.05rem;
    color: var(--pencil-gray);
    padding: 2px 8px;
    cursor: none;
    letter-spacing: 0.01em;
    transition: color 0.2s ease, transform 0.2s ease;
}

.room-btn:hover {
    color: var(--ink-deep);
    transform: translateX(-3px) rotate(-1deg);
}

/* ===== Corridor & Track ===== */
.corridor {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: 1;
}

.track {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--track-width);
    display: flex;
    will-change: transform;
}

.room {
    flex: 0 0 var(--room-width);
    width: var(--room-width);
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.room-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 8vh 6vw;
}

/* ===== Title (room 1) ===== */
.title {
    position: absolute;
    left: 8%;
    top: 32%;
    font-family: var(--font-caveat);
    font-weight: 600;
    font-size: clamp(4.5rem, 11vw, 9rem);
    color: var(--ink-deep);
    letter-spacing: 0.01em;
    transform: rotate(-1.5deg);
    line-height: 0.95;
    display: inline-flex;
    align-items: baseline;
    z-index: 5;
}

.title-dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    margin: 0 0.04em;
    position: relative;
    transform: translateY(-0.05em);
}

.title-dot-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.title-dot-svg .open-circle {
    stroke: var(--ink-deep);
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 90;
    stroke-dashoffset: 0;
    animation: rotate-circle 22s linear infinite;
    transform-origin: 50% 50%;
}

@keyframes rotate-circle {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== Room titles ===== */
.room-title {
    position: absolute;
    top: 7%;
    left: 6%;
    font-family: var(--font-caveat);
    font-weight: 500;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--slate-stroke);
    transform: rotate(-1deg);
    z-index: 5;
}

/* ===== Annotations ===== */
.annotation {
    position: absolute;
    font-family: var(--font-caveat);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.4vw, 1.4rem);
    color: var(--fog);
    transform: rotate(var(--rot, 0deg));
    left: var(--left, 6%);
    top: var(--top, 60%);
    pointer-events: auto;
    transition: transform 0.4s ease, color 0.3s ease;
    cursor: none;
    z-index: 6;
    line-height: 1.2;
    max-width: 22vw;
}

.annotation:hover {
    color: var(--slate-stroke);
    transform: rotate(calc(var(--rot, 0deg) + 3deg));
}

.annotation::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: var(--viewport-blue);
    margin-top: 2px;
    transition: width 0.4s ease;
}

.annotation:hover::after {
    width: 80%;
}

.annotation--small {
    font-family: var(--font-shadows);
    font-size: clamp(0.85rem, 1.05vw, 1rem);
    color: var(--fog);
}

.annotation--mono {
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.85vw, 0.9rem);
    letter-spacing: 0.04em;
    color: var(--pencil-gray);
}

.annotation--1 {
    left: 10%;
    top: 24%;
    font-size: 1.5rem;
    color: var(--pencil-gray);
}

.annotation--fade1 { opacity: 0.55; }
.annotation--fade2 { opacity: 0.28; }

/* ===== SVG Art (line illustrations) ===== */
.art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

.line-stroke {
    stroke: var(--slate-stroke);
    stroke-width: 0.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    vector-effect: non-scaling-stroke;
}

.line-faint {
    stroke: var(--pencil-gray);
    stroke-width: 0.6;
    opacity: 0.7;
}

.line-erased {
    stroke: var(--fog);
    stroke-width: 0.5;
    opacity: 0.5;
    stroke-dasharray: 4 6;
}

/* path-draw: stroke-dashoffset animation triggered when room is active */
.draw {
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.room.active .draw {
    stroke-dashoffset: 18; /* stops short of closing */
}

/* Stagger draw using nth-of-type-ish via JS-applied delay var */
.room.active .draw:nth-child(1) { transition-delay: 0ms; }
.room.active .draw:nth-child(2) { transition-delay: 60ms; }
.room.active .draw:nth-child(3) { transition-delay: 120ms; }
.room.active .draw:nth-child(4) { transition-delay: 180ms; }
.room.active .draw:nth-child(5) { transition-delay: 240ms; }
.room.active .draw:nth-child(6) { transition-delay: 300ms; }
.room.active .draw:nth-child(7) { transition-delay: 360ms; }
.room.active .draw:nth-child(8) { transition-delay: 420ms; }
.room.active .draw:nth-child(9) { transition-delay: 480ms; }
.room.active .draw:nth-child(10) { transition-delay: 540ms; }

/* ===== Floating objects ===== */
.floating {
    transform-origin: center;
    animation: float 7s ease-in-out infinite alternate;
    animation-delay: var(--float-delay, 0s);
}

@keyframes float {
    0%   { transform: translateY(0) rotate(0); }
    100% { transform: translateY(-8px) rotate(0.6deg); }
}

/* Steam loop */
.steam {
    stroke-dasharray: 8 4;
    animation: steam-loop 6s linear infinite;
}

@keyframes steam-loop {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -120; }
}

/* ===== Sun (room 4) ===== */
.sun-ring {
    stroke: var(--viewport-blue);
    stroke-width: 1.6;
    transform-origin: 928px 230px;
    animation: rotate-circle 36s linear infinite;
}

.sun-glow {
    stroke: var(--viewport-blue);
    stroke-width: 0.9;
    opacity: 0.5;
    animation: rotate-circle 50s linear infinite reverse;
    transform-origin: 928px 230px;
}

.cloud-smudge {
    filter: blur(2px);
}

/* ===== LED breathing dots (room 5) ===== */
.led-dot {
    transform-origin: center;
    animation: led-breathe 3.6s ease-in-out infinite;
    animation-delay: var(--blink-delay, 0s);
}

@keyframes led-breathe {
    0%, 100% { transform: scale(0.9); opacity: 0.6; }
    50%      { transform: scale(1.1); opacity: 1; }
}

.cable {
    stroke-dasharray: 6 4;
    animation: steam-loop 9s linear infinite;
    opacity: 0.7;
}

/* ===== Wifi arcs ===== */
.wifi-group path {
    stroke: var(--viewport-blue);
}

/* ===== Long Hall (room 6) — vanishing point ===== */
.vanishing-mark {
    stroke: var(--viewport-blue);
    stroke-width: 1.4;
}

.door {
    transition: opacity 0.6s ease;
}

/* ===== Wrap (room 7) — spinner ===== */
.spinner-group {
    transform-origin: 700px 350px;
    animation: rotate-circle 4s linear infinite;
}

.spinner {
    stroke: var(--viewport-blue);
    stroke-width: 1.4;
}

.wrap-preview {
    font-family: var(--font-caveat);
    font-size: 60px;
    fill: var(--fog);
    opacity: 0.4;
    transform: rotate(-1.5deg);
    transform-origin: 1050px 380px;
}

/* ===== Loop flash ===== */
.loop-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-shadows);
    font-size: 2rem;
    color: var(--fog);
    z-index: 500;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.loop-flash.show {
    opacity: 0.6;
}

/* ===== Doorway in room 1 ===== */
.art--doorway {
    position: absolute;
    width: 30vw;
    height: 70vh;
    top: 18%;
    right: 8%;
    left: auto;
}

/* ===== Reduced motion fallback — vertical stack, static line-art ===== */
@media (prefers-reduced-motion: reduce) {
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        cursor: auto;
    }
    .corridor {
        height: auto;
        overflow: visible;
    }
    .track {
        position: static;
        flex-direction: column;
        width: 100vw;
        height: auto;
        transform: none !important;
    }
    .room {
        flex: 0 0 auto;
        height: 100vh;
        width: 100vw;
    }
    .draw {
        stroke-dashoffset: 18 !important;
        transition: none;
    }
    .floating, .led-dot, .sun-ring, .sun-glow, .spinner-group,
    .compass-needle, .bg-dawn, .steam, .cable, .title-dot-svg .open-circle {
        animation: none !important;
    }
    .cursor-glow, .cursor-dot { display: none; }
}

/* ===== Small screens: keep horizontal but adjust scale ===== */
@media (max-width: 640px) {
    .compass-rose { width: 64px; height: 64px; bottom: 16px; right: 16px; }
    .tape-measure { padding: 0 12px; }
    .room-inner { padding: 6vh 4vw; }
}