/* =========================================================
   BACKROOM — a horizontal, side-scrolling experience.
   Liminal / after-hours: deep ink, warm cream, amber, an
   exit-sign red. Rooms each a full screen you walk through.
   Type: PP Neue Montreal · Instrument Serif · DM Mono.
   Technique: wonjyou vertical→horizontal pin scroll.
   ========================================================= */
:root{
  --ink:#0E0D11;
  --ink-2:#16151A;
  --cream:#EDE6D7;
  --cream-2:#E2D9C6;
  --amber:#FFAE4D;
  --red:#E24A33;
  --mut:#7c7a86;
  --line:rgba(237,230,215,.14);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--ink);color:var(--cream);font-family:"PP Neue Montreal","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:none}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:none}
.mono{font-family:"DM Mono",monospace;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem}
em{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.dark{color:var(--ink)}
.grain{position:fixed;inset:-50%;z-index:9000;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.cursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference}
.cursor-ring{position:absolute;width:34px;height:34px;border:1px solid #fff;border-radius:50%;transform:translate(-50%,-50%);transition:width .3s var(--ease),height .3s var(--ease),background .3s}
.cursor-txt{position:absolute;transform:translate(-50%,-50%);color:#000;font-size:.55rem;opacity:0;white-space:nowrap}
.cursor.is-hover .cursor-ring{width:54px;height:54px;background:rgba(255,255,255,.15)}
.cursor.is-label .cursor-ring{width:72px;height:72px;background:#fff}
.cursor.is-label .cursor-txt{opacity:1}
@media(hover:none){.cursor{display:none}body{cursor:auto}}

/* fixed chrome */
.chrome{position:fixed;top:0;left:0;width:100%;z-index:6000;display:flex;align-items:center;justify-content:space-between;padding:1.3rem clamp(1.2rem,4vw,3rem);mix-blend-mode:difference;color:#fff}
.logo{font-weight:500;font-size:1.05rem;letter-spacing:.06em;display:flex;align-items:center;gap:.45rem}
.logo .key{color:var(--amber)}
.now-open{color:#fff;opacity:.7}
.enter{border:1px solid currentColor;border-radius:100px;padding:.45rem .9rem}

/* ===================== HORIZONTAL ROOMS ===================== */
.rooms{height:100svh;overflow:hidden}
.rooms-track{display:flex;height:100svh;width:max-content}
.room{position:relative;flex:none;width:100vw;height:100svh;padding:clamp(5rem,10vh,8rem) clamp(1.5rem,5vw,5rem) clamp(4rem,8vh,6rem);display:flex;flex-direction:column;overflow:hidden}
.room[data-bg="ink"]{background:var(--ink);color:var(--cream)}
.room[data-bg="cream"]{background:var(--cream);color:var(--ink)}
.room[data-bg="warm"]{background:var(--amber);color:var(--ink)}
.room[data-bg="red"]{background:var(--red);color:var(--cream)}
.room-no{opacity:.6;letter-spacing:.12em}

/* room 01 hero */
.room-hero{justify-content:center}
.hero-h{font-size:clamp(3rem,9vw,9rem);line-height:.92;letter-spacing:-.03em;font-weight:500;margin:1.2rem 0}
.hero-h .l{display:block;overflow:hidden}
.hero-h .l em{color:var(--amber)}
.hero-sub{max-width:46ch;color:var(--cream);opacity:.72;font-size:clamp(1.05rem,1.4vw,1.4rem);line-height:1.5}
.scroll-cue{position:absolute;bottom:clamp(4rem,8vh,6rem);right:clamp(1.5rem,5vw,5rem);color:var(--amber);animation:nudge 2s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}

/* room 02 statement */
.room-statement{justify-content:center}
.big-serif{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(2.6rem,8vw,8rem);line-height:.96;letter-spacing:-.01em;margin:1rem 0}
.big-serif em{color:var(--red)}
.room-foot{opacity:.7;margin-top:1.5rem}

/* room 03 teleport */
.room-teleport{align-items:center;justify-content:center;text-align:center}
.teleport{display:flex;flex-direction:column;align-items:center;gap:2rem}
.pull{position:relative;width:clamp(180px,22vw,260px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a2630,#0E0D11 70%);border:1px solid var(--line);display:grid;place-items:center;transition:transform .3s var(--ease)}
.pull:hover{transform:scale(1.05)}
.pull-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--amber);opacity:.5}
.pull-ring.r2{inset:-18px;opacity:.2}
.pull-label{font-family:"DM Mono",monospace;letter-spacing:.3em;font-size:1.1rem;color:var(--amber)}
.teleport-cap{max-width:40ch;color:var(--cream);opacity:.75;font-size:clamp(1.05rem,1.4vw,1.35rem);line-height:1.5;transition:opacity .3s}

/* room 04 doors (wide room) */
.room-doors{width:172vw}
.doors-head{max-width:46ch}
.doors-title{font-family:"Instrument Serif",serif;font-weight:400;font-size:clamp(2.2rem,5vw,4.6rem);line-height:.98;margin-top:1rem}
.doors{display:flex;gap:clamp(1rem,2vw,2rem);align-items:stretch;flex:1;margin-top:2rem}
.door{flex:none;width:clamp(220px,20vw,300px);border-radius:16px;background:rgba(14,13,17,.06);border:1px solid rgba(14,13,17,.16);padding:1.4rem;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;transition:transform .4s var(--ease),background .4s}
.door:hover{transform:translateY(-8px);background:rgba(14,13,17,.12)}
.door-vis{height:58%;border-radius:10px;margin-bottom:1rem;position:relative;overflow:hidden}
.door-no{font-family:"DM Mono",monospace;font-size:.62rem;text-transform:uppercase;color:rgba(14,13,17,.5)}
.door-name{font-size:clamp(1.2rem,1.6vw,1.6rem);letter-spacing:-.01em;line-height:1.04;margin-top:.3rem}
.door-tag{font-family:"DM Mono",monospace;font-size:.6rem;text-transform:uppercase;color:rgba(14,13,17,.55);margin-top:.5rem}

/* room 05 manifesto */
.room-manifesto{justify-content:center}
.manifesto{list-style:none;display:flex;flex-direction:column;gap:clamp(.6rem,1.6vh,1.4rem);margin-top:1.5rem}
.manifesto li{font-size:clamp(1.8rem,4.5vw,4.2rem);letter-spacing:-.02em;line-height:1;display:flex;align-items:baseline;gap:1rem}
.manifesto .mono{color:var(--amber);font-size:.9rem}

/* room 06 cta */
.room-cta{justify-content:center}
.cta-h{font-size:clamp(3.2rem,10vw,10rem);line-height:.86;letter-spacing:-.03em;font-weight:500;margin:1rem 0 2rem}
.keys{display:flex;gap:1.2rem;flex-wrap:wrap}
.keycard{width:min(320px,80vw);background:rgba(237,230,215,.08);border:1px solid var(--line);border-radius:18px;padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;backdrop-filter:blur(4px)}
.keycard.feat{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.keycard .mono{opacity:.7}
.key-price{font-size:clamp(2.2rem,4vw,3rem);letter-spacing:-.02em}
.key-price small{font-size:.8rem;opacity:.6}
.keycard p{opacity:.78;font-size:.98rem;line-height:1.4;flex:1}
.key-btn{text-align:center;border:1px solid currentColor;border-radius:100px;padding:.8rem;font-size:.92rem;font-weight:500;transition:background .3s,color .3s}
.key-btn:hover{background:var(--cream);color:var(--ink)}
.key-btn-feat{background:var(--red);border-color:var(--red);color:var(--cream)}
.key-btn-feat:hover{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.cta-foot{margin-top:2rem;opacity:.75}

/* progress */
.progress{position:fixed;bottom:0;left:0;width:100%;z-index:6000;display:flex;align-items:center;gap:1rem;padding:1rem clamp(1.2rem,4vw,3rem);mix-blend-mode:difference;color:#fff}
.prog-room{min-width:14ch}
.prog-bar{flex:1;height:2px;background:rgba(255,255,255,.25);overflow:hidden}
.prog-fill{display:block;height:100%;width:100%;background:#fff;transform:scaleX(0);transform-origin:left}
.prog-count{opacity:.7}

/* ===================== MOBILE: fall back to vertical ===================== */
@media(max-width:900px){
  .rooms{height:auto;overflow:visible}
  .rooms-track{flex-direction:column;width:100%}
  .room{width:100%!important;height:auto;min-height:100svh}
  .scroll-cue{display:none}
  .progress{display:none}
  .doors{flex-direction:column}
  .door{width:100%}
}

/* hide custom cursor until first mouse move (no frozen reticle on load/in thumbnails) */
.cursor{opacity:0;transition:opacity .25s ease}
.cursor.ready{opacity:1}