@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=Noto+Sans+Thai:wght@400;500;600&display=swap');
:root{--p:0;--pink:#f07aa5;--view-h:100svh}
*{box-sizing:border-box}
html{background:#171411;scroll-behavior:auto}
body{margin:0;color:#fff8ed;font-family:Archivo,'Noto Sans Thai',sans-serif}
a{color:inherit}button{font:inherit;cursor:pointer}
.journey{height:430vh}
.stage{position:sticky;top:0;width:100%;height:var(--view-h);overflow:hidden;isolation:isolate;background:#101112}
.monitor-preview{position:absolute;top:0;left:0;width:1280px;height:685px;max-width:none;transform-origin:0 0;will-change:transform,opacity;z-index:1;pointer-events:none}
.room{position:absolute;max-width:none;object-fit:fill;will-change:transform,opacity;pointer-events:none;z-index:0}
.screen{position:absolute;top:0;left:0;overflow:hidden;transform-origin:50% 50%;will-change:transform,opacity;z-index:2;background:#101112;border-radius:0;opacity:0;pointer-events:none}
.screen iframe{width:100%;height:100%;display:block;border:0;background:#101112;pointer-events:none}
.entered .screen iframe{pointer-events:auto}
.entered .screen{pointer-events:auto}
.vignette{position:absolute;inset:0;background:linear-gradient(0deg,#100c09a6,transparent 29%,transparent 86%,#100c0926);pointer-events:none;z-index:2;opacity:clamp(0,calc(1 - var(--p)*3),1)}
.masthead{position:absolute;left:0;top:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:25px 3.5vw;z-index:5;opacity:clamp(0,calc(1 - var(--p)*5),1);text-shadow:0 2px 10px #0005}
.masthead>a{text-decoration:none;font-weight:900;font-size:21px;letter-spacing:-1px;line-height:.9}
.masthead>a span{color:var(--pink)}
.masthead small{display:block;font-size:7px;letter-spacing:2px;line-height:2.8;font-weight:500}
.edition{font-size:9px;letter-spacing:2.4px}
.masthead button{border:1px solid #fff5;background:#17141155;backdrop-filter:blur(12px);color:#fff8ed;border-radius:30px;padding:11px 19px;font-size:11px}
.intro{position:absolute;bottom:6%;left:3.5vw;z-index:3;pointer-events:none;opacity:clamp(0,calc(1 - var(--p)*5),1);transform:translate3d(0,calc(var(--p)*-70px),0)}
.intro>p:first-child{font-size:9px;letter-spacing:2.7px;color:#e4d5c4}
.intro h1{font-family:'Noto Sans Thai',sans-serif;font-size:clamp(20px,2.4vw,38px);line-height:1.35;font-weight:500;margin:10px 0;letter-spacing:-.8px}
.thai{font-size:11px;color:#d1bfa8}
.scroll-note{position:absolute;bottom:6%;right:3.5vw;z-index:3;display:flex;align-items:center;gap:13px;opacity:clamp(0,calc(1 - var(--p)*5),1);font-size:9px;letter-spacing:2px;pointer-events:none}
.scroll-note small{display:block;font-size:10px;letter-spacing:0;color:#d1bfa8;margin-top:6px}
.mouse{width:20px;height:31px;border:1px solid #fff8;border-radius:15px;display:flex;justify-content:center;padding-top:6px}
.mouse i{width:2px;height:6px;background:#f3c5d6;border-radius:2px;animation:wheel 1.8s infinite}
.down{font-size:23px;font-weight:400}
.progress{position:absolute;bottom:0;left:0;width:100%;height:2px;z-index:4;background:#ffffff12}
.progress span{display:block;width:100%;height:100%;background:var(--pink);transform-origin:0 0;transform:scaleX(var(--p))}
.restart{position:fixed;bottom:18px;right:20px;z-index:10;border:1px solid #ffffff44;border-radius:30px;background:#171719e8;color:#fff;padding:10px 16px;font-size:11px;display:none}
.entered .restart{display:block}
.entered .masthead{visibility:hidden}
.skip{position:fixed;top:12px;left:20px;transform:translateY(-160%);z-index:20;background:#fff;color:#151515;padding:12px}
.skip:focus{transform:none}
:focus-visible{outline:3px solid var(--pink);outline-offset:4px}
@keyframes wheel{0%{transform:translateY(0);opacity:1}80%,100%{transform:translateY(8px);opacity:0}}
@media(max-width:650px){.masthead{padding:23px 6vw}.edition{display:none}.masthead>a{font-size:18px}.masthead button{font-size:10px;padding:10px 14px}.intro{bottom:15%;left:6vw}.intro h1{font-size:26px}.scroll-note{bottom:5%;left:6vw;right:auto}.thai{font-size:10px}.room{filter:none}}
@media(prefers-reduced-motion:reduce){.mouse i{animation:none}}
@media(max-width:650px){.stage{background:radial-gradient(ellipse at 50% 35%,#72624f,#241c16 72%)}.room{mask-image:linear-gradient(transparent,#000 5%,#000 93%,transparent)}.intro{bottom:14%}.vignette{background:linear-gradient(0deg,#100c0988,transparent 40%)}.journey{height:350svh}}