:root{
--sec:clamp(92px, 14vh, 150px);
--black:#0a0a0a; --white:#f4f2ec; --orange:#ff3d17; --lime:#d9ff3b;
--room:#f4f3f0; --baby:#b9d4ec; --baby-ink:#6f9fd0; --rose-deep:#b24f6b; --rose:#e7a3ae;
--wall:#eeebe5; --wall-2:#e7e3dc; --floor:#d9d3c8; --ink:#111110; --muted:#5f5b55; --ink-2:#55514b; --line:rgba(17,17,16,.14);
--ease:cubic-bezier(.19,1,.22,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{ background:var(--white); overflow-x:hidden; overflow-x:clip; scroll-behavior:smooth; }
html.locked, html.locked body{ overflow:hidden; height:100%; }
body{ background:var(--white); color:var(--black); font-family:'Space Mono',monospace; cursor:none; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-x:clip; }
::selection{ background:var(--baby); color:var(--ink); }
a{ color:inherit; text-decoration:none; cursor:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:none; }
#grain{ position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; z-index:30; opacity:.07; mix-blend-mode:multiply; animation:gr 1.4s steps(6) infinite;
background-image:url("data:image/svg+xml;utf8,"); }
@keyframes gr{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
/* shared KARIXX tape track: every span gets a fixed pixel width from JS so the loop is exact */
.tape-track{ display:flex; white-space:nowrap; will-change:transform; }
.tape-track span{ flex:none; display:block; text-align:center; }
/* =====================================================================
TOP NAV — every room reachable from anywhere
===================================================================== */
#topnav{ position:fixed; top:0; left:0; right:0; z-index:26; display:flex; justify-content:space-between; align-items:center; gap:24px;
padding:20px 5vw; pointer-events:none; color:var(--ink); transition:color .5s ease; }
#topnav > *{ pointer-events:auto; }
#topnav.dark{ color:var(--white); }
#topnav .logo{ font-family:'Anton',sans-serif; font-size:16px; letter-spacing:.09em; }
#topnav nav{ display:flex; align-items:center; gap:26px; }
#topnav nav a{ font-size:9px; letter-spacing:.26em; opacity:.6; white-space:nowrap; transition:opacity .3s, color .3s; }
#topnav nav a em{ font-style:normal; opacity:.55; margin-right:7px; }
#topnav nav a:hover{ opacity:1; }
#topnav nav a.on{ opacity:1; color:var(--baby-ink); }
#topnav.dark nav a.on{ color:var(--baby); }
#topnav nav a .s{ display:none; }
@media(max-width:860px){
#topnav{ padding:14px 18px; gap:12px; }
#topnav .logo{ font-size:13px; }
#topnav nav{ gap:14px; }
#topnav nav a{ font-size:8px; letter-spacing:.16em; }
#topnav nav a em{ display:none; }
#topnav nav a .l{ display:none; } #topnav nav a .s{ display:inline; }
}
/* =====================================================================
1. THE CUBE (x-form)
===================================================================== */
#cube{ position:relative; height:100vh; height:100svh; min-height:520px; background:var(--room); overflow:hidden; }
#gl{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; }
#scan{ position:absolute; inset:0; pointer-events:none; z-index:4; opacity:.14; mix-blend-mode:multiply;
background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.35) 2px 3px); }
.ui{ position:absolute; z-index:10; font-size:10px; letter-spacing:.3em; color:rgba(10,10,10,.72); pointer-events:none; }
.ui.tl{ display:none; }
.ui.tr{ top:72px; right:28px; text-align:right; }
.ui.bl{ bottom:46px; left:28px; color:var(--black); }
.ui.br{ bottom:46px; right:28px; display:flex; gap:22px; pointer-events:auto; }
.ui.br a{ border-bottom:1px solid rgba(10,10,10,.4); padding-bottom:3px; }
.ui.br a:hover{ color:var(--baby-ink); border-color:var(--baby-ink); }
.ui .sq{ display:inline-block; width:7px; height:7px; background:var(--black); margin-right:10px; vertical-align:0; }
.ui .blink{ animation:bl 1s steps(2) infinite; } @keyframes bl{ 50%{ opacity:0; } }
#idx{ position:absolute; z-index:10; left:28px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; }
#idx .h{ font-size:9px; letter-spacing:.36em; color:rgba(10,10,10,.55); margin-bottom:6px; }
#idx button{ text-align:left; font-size:10px; letter-spacing:.28em; color:rgba(10,10,10,.75); display:flex; gap:14px; align-items:center; padding:2px 0; }
#idx button i{ font-style:normal; color:rgba(10,10,10,.42); width:26px; }
#idx button b{ font-weight:400; padding:2px 4px; margin:-2px -4px; transition:background .25s, color .25s; }
#idx button:hover b, #idx button.on b{ background:var(--black); color:var(--white); }
#idx button.on i{ color:var(--black); }
#idx button.sealed b{ text-decoration:line-through; text-decoration-thickness:2px; }
#hud{ position:absolute; z-index:9; left:0; top:0; width:10px; height:10px; pointer-events:none; }
#hud i{ position:absolute; width:16px; height:16px; border:0 solid var(--black); }
#hud .a{ left:0; top:0; border-left-width:1.5px; border-top-width:1.5px; }
#hud .b{ right:0; top:0; border-right-width:1.5px; border-top-width:1.5px; }
#hud .c{ left:0; bottom:0; border-left-width:1.5px; border-bottom-width:1.5px; }
#hud .d{ right:0; bottom:0; border-right-width:1.5px; border-bottom-width:1.5px; }
#hud .ro{ position:absolute; left:0; top:calc(100% + 10px); font-size:9px; letter-spacing:.24em; color:var(--black); white-space:nowrap; line-height:1.7; }
#hud .ro b{ font-weight:700; }
#cue{ position:absolute; z-index:10; left:50%; bottom:calc(6vh + 20px); transform:translateX(-50%); font-size:10px; letter-spacing:.42em; color:var(--black); transition:opacity .8s; white-space:nowrap; pointer-events:none; }
#cue.off{ opacity:0; }
#frag{ position:absolute; z-index:11; left:50%; top:9vh; transform:translateX(-50%); width:min(760px, 86vw); text-align:center; pointer-events:none; }
#frag .a, #frag .b{ display:block; text-wrap:balance; font-family:'Cormorant Garamond',serif; font-size:clamp(21px,2.4vw,33px); line-height:1.2; opacity:0; transition:opacity 1s ease, transform 1s var(--ease), filter 1s; transform:translateY(8px); filter:blur(6px); }
#frag .a{ color:var(--black); }
#frag .b{ font-style:italic; color:var(--baby-ink); transition-delay:.7s; }
#frag.on .a, #frag.on .b{ opacity:1; transform:none; filter:blur(0); }
#card{ position:absolute; z-index:12; right:28px; top:50%; width:min(360px, 30vw); transform:translate(24px,-50%); opacity:0; pointer-events:none;
transition:opacity .8s ease, transform 1.1s var(--ease); background:var(--black); color:var(--white); padding:18px 18px 22px; }
#card.on{ opacity:1; transform:translate(0,-50%); pointer-events:auto; }
#card{ top:calc(50% + 12px); }
@media (min-width:761px) and (max-height:860px){
#cube #card{ width:min(320px, 28vw); padding:14px 14px 16px; }
#cube #card .ph{ aspect-ratio:16/10.5; }
#cube #card .top{ margin-bottom:10px; }
#cube #card .lore{ margin-top:12px; font-size:17px; }
#cube #card h2{ font-size:clamp(28px,2.7vw,40px); }
#cube #card p{ font-size:15px; line-height:1.32; margin-top:8px; }
#cube #card .listen{ margin-top:12px; padding:10px 14px; }
}
@media (min-width:761px) and (max-height:760px){ #cube #card{ padding:12px 12px 14px; } #cube #card .ph{ aspect-ratio:16/8.4; } #cube #card .top{ margin-bottom:8px; } #cube #card .lore{ margin-top:10px; font-size:16px; } #cube #card h2{ font-size:clamp(26px,2.4vw,34px); } #cube #card p{ font-size:14px; margin-top:6px; } #cube #card .listen{ margin-top:10px; padding:9px 12px; } }
@media (min-width:761px) and (max-height:640px){ #cube #card .ph{ aspect-ratio:16/7; } #cube #card p{ display:none; } }
#card .top{ display:flex; justify-content:space-between; align-items:center; font-size:9px; letter-spacing:.32em; color:rgba(244,242,236,.55); margin-bottom:14px; }
#card .top .x{ font-size:15px; letter-spacing:0; color:rgba(244,242,236,.75); }
#card .top .x:hover{ color:var(--rose); }
#card .ph{ position:relative; width:100%; aspect-ratio:4/4.3; background:#111 center/cover no-repeat; overflow:hidden; }
#card .ph::after{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.18) 2px 3px); pointer-events:none; }
#card .lore{ margin-top:16px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--rose); }
#card h2{ font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:clamp(36px,3.3vw,52px); line-height:.92; margin-top:4px; letter-spacing:.01em; }
#card p{ margin-top:12px; font-family:'Cormorant Garamond',serif; font-size:17px; line-height:1.38; color:rgba(244,242,236,.82); }
#card .listen{ margin-top:18px; display:inline-flex; gap:12px; align-items:center; font-size:10px; letter-spacing:.3em; padding:12px 16px; background:var(--white); color:#0a0a0a; transition:background .3s; }
#card .listen:hover{ background:var(--rose); }
#card .listen.soon{ background:transparent; border:1px solid rgba(244,242,236,.25); color:rgba(244,242,236,.5); pointer-events:none; }
#card .ph.sealed{ background:#0a0a0a; }
#card .ph.sealed::after{ display:none; }
.xt{ position:absolute; left:50%; top:50%; width:170%; height:13%; z-index:4; display:flex; align-items:center; overflow:hidden;
background:#fbfaf6; box-shadow:0 4px 14px rgba(0,0,0,.6); }
.xt.a{ transform:translate(-50%,-50%) rotate(45deg); }
.xt.b{ transform:translate(-50%,-50%) rotate(-45deg); }
.xt span{ font-family:'Anton',Impact,sans-serif; font-size:13px; letter-spacing:.42em; color:#0a0a0a; padding:0 18px; line-height:1; }
/* =====================================================================
GATE — one set in an empty white room, KARIXX tape crossed on the floor
===================================================================== */
#gate{ position:fixed; inset:0; z-index:40; background:var(--wall); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5vh; overflow:hidden;
transition:opacity .9s ease, visibility .9s ease; }
#gate::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:24vh; z-index:-1; background:linear-gradient(180deg, var(--floor), #cfc8bc); }
#gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
#gate .tv{ --w:min(64vw, 420px); cursor:none; transform-origin:50% 41%; transition:transform 1.25s cubic-bezier(.7,0,.2,1); z-index:2; }
#gate .tv-shadow{ position:absolute; left:10%; right:10%; bottom:-14px; height:26px; background:radial-gradient(ellipse, rgba(0,0,0,.35), transparent 70%); z-index:-1; }
#gate .tv .scr-nosig{ z-index:5; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; }
#gate .tv .scr-nosig span{ background:#0b0b0b; color:#f4f2ec; font-size:11px; letter-spacing:.3em; padding:6px 10px; }
#gate.lost .tv .scr-img, #gate.lost .tv .scr-g{ opacity:0 !important; }
#gate.lost .tv .scr-static{ opacity:.9; }
#gate.lost .tv .scr-nosig{ opacity:1; }
#gate.lost .tv .scr-osd .b{ color:var(--baby); }
/* ---- full-screen NO SIGNAL, then CRT switch-off revealing the site ---- */
#sig{ position:fixed; inset:0; z-index:45; display:none; pointer-events:none; background:transparent; }
#sig.on{ display:block; }
#sig .sig-in{ position:absolute; inset:0; background:#0b0b0b; overflow:hidden; transform-origin:50% 50%; }
#sig .sig-noise{ position:absolute; inset:-10%; background-image:var(--noise); background-size:330px 330px; image-rendering:pixelated; opacity:.55; animation:noise .45s steps(6) infinite, sigflick .18s steps(2) infinite; }
@keyframes sigflick{ 50%{ opacity:.42; } }
#sig .sig-bars{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(7,1fr); opacity:0; }
#sig .sig-bars i{ display:block; }
#sig.bars .sig-bars{ opacity:1; }
#sig .sig-lines{ position:absolute; inset:0; background:
radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.65) 100%),
repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); }
#sig .sig-roll{ position:absolute; left:0; right:0; top:-30%; height:26%; background:linear-gradient(transparent, rgba(255,255,255,.08) 45%, rgba(255,255,255,.14) 50%, transparent); animation:roll 2.4s linear infinite; }
#sig .sig-osd{ position:absolute; left:5vw; right:5vw; top:5vh; display:flex; justify-content:space-between; font-size:12px; letter-spacing:.14em; color:rgba(255,255,255,.9); text-shadow:0 0 8px rgba(255,255,255,.55), 1px 0 0 rgba(255,61,23,.7); }
#sig .sig-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#0b0b0b; color:#f4f2ec; font-size:clamp(12px,1.3vw,16px); letter-spacing:.42em; padding:12px 18px 12px 24px; box-shadow:0 0 0 1px rgba(244,242,236,.25); white-space:nowrap; }
#sig .sig-box b{ color:var(--baby); font-weight:400; animation:bl 1s steps(2) infinite; }
#sig.off .sig-in{ animation:crtOff .62s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes crtOff{
0%{ transform:none; filter:none; }
55%{ transform:scale(1,.004); filter:brightness(4); }
80%{ transform:scale(.18,.004); filter:brightness(6); opacity:1; }
100%{ transform:scale(0,.004); filter:brightness(8); opacity:0; } }
#gate .placard{ text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; z-index:4; position:relative; transition:opacity .4s ease; padding:0 20px; }
#gate.on .placard{ opacity:0; }
.placard .k{ font-family:'Anton',sans-serif; font-size:15px; letter-spacing:.34em; color:var(--ink); }
.placard .s{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:19px; color:var(--muted); }
.power{ margin-top:10px; display:inline-flex; align-items:center; gap:12px; min-height:46px; padding:0 22px; border:1px solid var(--ink); background:transparent; color:var(--ink);
font-size:10px; letter-spacing:.34em; transition:background .3s ease, color .3s ease; }
.power::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px var(--orange); animation:led 1.4s ease-in-out infinite; }
.power:hover{ background:var(--ink); color:var(--wall); }
#gate .tv .scr-img{ opacity:0; }
#gate.on .tv .scr-img{ opacity:1; animation:crtOn .55s cubic-bezier(.2,.8,.2,1) both, jitter 7s steps(1) infinite .6s; }
@keyframes crtOn{ 0%{ transform:scale(1,.004); filter:grayscale(1) brightness(6); } 45%{ transform:scale(1,.02); filter:grayscale(1) brightness(4); } 100%{ transform:none; filter:grayscale(1) contrast(1.28) brightness(.92); } }
#gate .tv .scr-static{ opacity:.6; }
#gate.on .tv .scr-static{ opacity:.12; }
#cursor{ position:fixed; z-index:50; left:0; top:0; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; pointer-events:none; transition:width .25s, height .25s, margin .25s, opacity .3s; mix-blend-mode:difference; background:#fff; }
#cursor.big{ width:42px; height:42px; margin:-21px 0 0 -21px; background:transparent; border:1.5px solid #fff; }
#cursor span{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:8px; letter-spacing:.2em; color:#fff; opacity:0; white-space:nowrap; }
#cursor.watch{ width:64px; height:64px; margin:-32px 0 0 -32px; background:transparent; border:1.5px solid #fff; }
#cursor.watch span{ opacity:1; }
/* KARIXX barrier tape between rooms */
.band{ position:relative; z-index:20; height:34px; margin:-17px -4vw; background:var(--orange); overflow:hidden; display:flex; align-items:center; transform:rotate(-.9deg); box-shadow:0 6px 16px rgba(0,0,0,.18); }
.band.b2{ transform:rotate(.7deg); }
#gate .band{ position:absolute; margin:0; left:-4vw; right:-4vw; bottom:9vh; transform:rotate(-1.2deg); z-index:3; }
/* the tapes are only ever black or white */
.band.t-ink{ background:#0b0b0c; box-shadow:0 6px 16px rgba(0,0,0,.28); } .band.t-ink::after{ background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 45%); } .band.t-ink span{ color:var(--white); }
.band.t-pink{ background:var(--rose); } .band.t-pink span{ color:#141012; }
.band.t-baby{ background:var(--baby); } .band.t-baby span{ color:#0f1216; }
.band.t-wall{ background:#fbfaf6; box-shadow:0 6px 16px rgba(0,0,0,.25); } .band.t-wall::after{ background:linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 45%, rgba(0,0,0,.06)); } .band.t-wall span{ color:var(--ink); }
.band::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 45%, rgba(0,0,0,.1)); }
.band span{ font-family:'Anton',sans-serif; font-size:13px; letter-spacing:.42em; color:var(--ink); padding:0 24px; }
.rv{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in{ opacity:1; transform:none; }
/* =====================================================================
2. THE SCREENS (gallery entrance: three KRX-26 sets)
===================================================================== */
.tv{ position:relative; width:var(--w,320px); aspect-ratio:1.2/1; flex:none; }
.tv-body{ position:absolute; inset:0; border-radius:16px 16px 12px 12px;
background:linear-gradient(165deg, #34322f 0%, #1d1c1a 38%, #121110 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.6), 0 40px 50px -28px rgba(0,0,0,.55);
padding:6.5% 7% 0; display:flex; flex-direction:column; }
.tv-body::before{ content:''; position:absolute; top:4%; right:-7%; width:9%; height:90%; z-index:-1;
background:linear-gradient(90deg,#141312,#252321); border-radius:0 18px 18px 0; transform:skewY(-5deg); }
.tv-screen{ position:relative; flex:1; border-radius:13% / 17%; overflow:hidden; background:#0b0b0b; box-shadow: 0 0 0 5px #0c0c0b, 0 0 0 7px #2c2a27; isolation:isolate; }
.scr{ position:absolute; inset:0; }
.scr-img{ background:var(--img) var(--bp,center)/var(--bs,cover) no-repeat; filter:grayscale(1) contrast(1.28) brightness(.92);
transition:filter .6s var(--ease); animation:jitter 7s steps(1) infinite; }
@keyframes jitter{ 0%,96%,100%{ transform:none; } 97%{ transform:translate(-3px,1px) skewX(-2deg); } 98.5%{ transform:translate(4px,0) scaleY(1.02); } }
.scr-g{ background:var(--img) var(--bp,center)/var(--bs,cover) no-repeat; clip-path:inset(100% 0 0 0); }
.scr-g.g1{ filter:grayscale(1) sepia(1) saturate(9) hue-rotate(-28deg) contrast(1.3); mix-blend-mode:screen; animation:gl1 var(--gd,6s) steps(1) infinite; }
.scr-g.g2{ filter:grayscale(1) invert(1) contrast(1.4); mix-blend-mode:difference; opacity:.8; animation:gl2 calc(var(--gd,6s) * 1.37) steps(1) infinite; }
@keyframes gl1{
0%,88%,100%{ clip-path:inset(100% 0 0 0); transform:none; }
89%{ clip-path:inset(18% 0 70% 0); transform:translateX(-14px); }
91%{ clip-path:inset(56% 0 30% 0); transform:translateX(10px); }
93%{ clip-path:inset(34% 0 58% 0); transform:translateX(-6px); }
95%{ clip-path:inset(78% 0 8% 0); transform:translateX(16px); }
97%{ clip-path:inset(4% 0 88% 0); transform:translateX(-9px); } }
@keyframes gl2{
0%,92%,100%{ clip-path:inset(100% 0 0 0); transform:none; }
93%{ clip-path:inset(62% 0 24% 0); transform:translateX(12px); }
95.5%{ clip-path:inset(12% 0 80% 0); transform:translateX(-18px); }
98%{ clip-path:inset(44% 0 44% 0); transform:translateX(7px); } }
.scr-static{ background-image:var(--noise); background-size:220px 220px; opacity:.13; mix-blend-mode:screen; animation:noise .5s steps(7) infinite; transition:opacity .08s; }
@keyframes noise{ to{ background-position:210px 150px; } }
.scr-roll{ height:22%; top:-25%; bottom:auto; background:linear-gradient(transparent, rgba(255,255,255,.07) 45%, rgba(255,255,255,.11) 50%, transparent); animation:roll 6.5s linear infinite; }
@keyframes roll{ to{ transform:translateY(560%); } }
.scr-lines{ z-index:6; background:
radial-gradient(ellipse 60% 45% at 28% 18%, rgba(255,255,255,.16), transparent 60%),
radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.72) 100%),
repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.scr-osd{ z-index:5; padding:7% 9%; display:flex; justify-content:space-between; align-items:flex-start;
font-size:10px; letter-spacing:.08em; color:rgba(255,255,255,.88); text-shadow:0 0 6px rgba(255,255,255,.5), 1px 0 0 rgba(255,61,23,.6); }
.scr-osd .b{ position:absolute; left:9%; bottom:9%; }
.tv-panel{ height:17%; display:flex; align-items:center; gap:6%; padding:0 3%; }
.tv-panel .brand{ font-family:'Anton',sans-serif; font-size:9px; letter-spacing:.3em; color:#7d786f; margin-right:auto; }
.tv-panel i{ width:7px; height:7px; border-radius:50%; background:#0a0a09; box-shadow:inset 0 1px 1px rgba(255,255,255,.18); }
.tv-panel b{ width:5px; height:5px; border-radius:50%; background:var(--orange); box-shadow:0 0 8px var(--orange); animation:led 3.2s ease-in-out infinite; }
@keyframes led{ 50%{ opacity:.35; } }
.tv.switch .scr-static{ opacity:.95; }
.tv.switch .scr-img, .tv.switch .scr-g{ opacity:0; }
.tv:hover .scr-img{ filter:grayscale(.05) contrast(1.15) brightness(.95); }
.tv:hover .scr-g{ --gd:1.4s; }
/* touched: the set breaks — grey static, and it stays that way */
.scr-white{ z-index:5; background:transparent; opacity:0; pointer-events:none; display:flex; align-items:center; justify-content:center; text-align:center; }
.scr-white p{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:0 10%; }
.scr-white p span{ display:inline-block; background:rgba(8,8,8,.86); color:#f4f2ec; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(13px,1.3vw,18px); line-height:1.25; padding:2px 8px; }
.scr-white p span:last-child{ color:var(--baby); }
.tv.broke .tv-screen{ background:#57544f; }
.tv.broke .scr-img, .tv.broke .scr-g, .tv.broke .scr-osd{ opacity:0 !important; }
.tv.broke .scr-static{ opacity:.95 !important; background-size:160px 160px; animation-duration:.35s; }
.tv.broke .scr-roll{ animation-duration:2.2s; }
.tv.broke .scr-white{ opacity:1; }
.tv.broke .scr-white p{ animation:msgIn 1.4s ease .5s both; }
.tv.broke .tv-panel b{ background:#3a3835; box-shadow:none; animation:none; }
@keyframes msgIn{ 0%{ opacity:0; } 30%{ opacity:.8; } 38%{ opacity:.1; } 60%{ opacity:1; } 68%{ opacity:.4; } 100%{ opacity:1; } }
#world{ position:relative; min-height:100vh; min-height:100svh; background:var(--wall); color:var(--ink); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:4vw; padding:var(--sec) 6vw 0; overflow:hidden; }
#world::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:22vh; background:linear-gradient(180deg, var(--wall-2), var(--floor)); z-index:0; }
#world > *{ position:relative; z-index:1; }
#world.glitch > *{ animation:pageGlitch .22s steps(3); }
@keyframes pageGlitch{ 0%{ transform:translateX(-7px); filter:contrast(1.4); } 33%{ transform:translateX(5px) skewX(.6deg); } 66%{ transform:translateX(-2px); filter:invert(.04); } 100%{ transform:none; } }
.entrance-text{ align-self:center; padding-bottom:10vh; }
.exh{ font-size:10px; letter-spacing:.34em; color:var(--muted); }
.big-name{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(84px,14vw,210px); line-height:.84; margin-top:18px; letter-spacing:-.01em; }
.sub{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(24px,2.6vw,38px); margin-top:14px; min-height:1.3em; transition:opacity .3s ease; }
.sub.alt{ color:var(--baby-ink); }
.wall-text{ font-family:'Cormorant Garamond',serif; font-size:clamp(18px,1.6vw,22px); line-height:1.5; color:#2b2926; max-width:440px; margin-top:5vh; }
.museum-info{ margin-top:5vh; display:grid; grid-template-columns:auto 1fr; gap:6px 22px; font-size:10px; letter-spacing:.1em; color:var(--muted); max-width:460px; }
.museum-info dt{ letter-spacing:.24em; }
.museum-info dd{ color:var(--ink); }
.enter-cue{ margin-top:6vh; display:inline-flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.32em; }
.enter-cue::after{ content:'↓'; animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(5px); } }
.tower{ position:relative; justify-self:center; align-self:end; display:flex; flex-direction:column; align-items:center; padding-bottom:6vh; }
.tower .tv{ margin-top:-2px; }
.tower .tv:nth-of-type(1){ --w:clamp(210px,21vw,300px); transform:rotate(-1.2deg) translateX(-10px); }
.tower .tv:nth-of-type(2){ --w:clamp(230px,23vw,330px); transform:rotate(.8deg) translateX(8px); }
.tower .tv:nth-of-type(3){ --w:clamp(222px,22vw,316px); transform:rotate(-.4deg); }
.tower .floor-shadow{ position:absolute; left:-4%; right:-4%; bottom:calc(6vh - 16px); height:32px; background:radial-gradient(ellipse, rgba(0,0,0,.4), transparent 70%); z-index:-1; }
.cables{ position:absolute; right:-44%; bottom:6vh; width:80%; height:78%; z-index:-1; overflow:visible; }
.cables path{ fill:none; stroke:#141412; stroke-width:2.2; stroke-linecap:round; }
#rec{ position:absolute !important; left:5vw; bottom:58px; z-index:3 !important; display:flex; align-items:center; gap:10px; font-size:9px; letter-spacing:.22em; color:var(--ink); opacity:.7; pointer-events:none; }
#rec i{ width:7px; height:7px; border-radius:50%; background:var(--orange); animation:led 1.2s steps(2) infinite; }
@media(max-width:900px){
#world{ grid-template-columns:1fr; padding-top:14vh; padding-bottom:60px; }
.entrance-text{ padding-bottom:40px; }
/* keep the stack's shape on smaller screens: small set on top, the big one in the middle */
.tower .tv:nth-of-type(1){ --w:min(58vw,272px); }
.tower .tv:nth-of-type(2){ --w:min(64vw,300px); }
.tower .tv:nth-of-type(3){ --w:min(61vw,287px); }
.cables{ right:-30%; }
}
/* =====================================================================
THE FLOOD — her room fills up as you scroll (version-xx, songs removed)
===================================================================== */
#flood{ position:relative; background:#050505; color:var(--white);
--pink:#e7a3ae; --pink-2:#d38c99; --pink-3:#c47c89; }
#flood .stage{ position:relative; height:100vh; height:100svh; min-height:600px; max-height:980px; overflow:hidden; perspective:1700px; perspective-origin:50% 12%; }
#flood .box{ position:absolute; left:61%; top:62%; cursor:none; width:var(--W); height:var(--H); margin-left:calc(var(--W) * -.5); margin-top:calc(var(--H) * -.5); transform-style:preserve-3d; transform:rotateY(var(--ry,0deg)); }
#flood .face{ position:absolute; left:0; top:0; backface-visibility:visible; }
#flood .back{ width:var(--W); height:var(--H); transform:translateZ(calc(var(--D) * -.5));
background:radial-gradient(ellipse at 45% 40%, #f0b4be 0%, var(--pink) 45%, var(--pink-2) 100%); overflow:hidden; }
#flood .wall-l, #flood .wall-r{ width:var(--D); height:var(--H); left:calc((var(--W) - var(--D)) / 2); }
#flood .wall-l{ transform:rotateY(90deg) translateZ(calc(var(--W) * -.5)); background:linear-gradient(90deg, var(--pink) 0%, var(--pink-3) 100%); }
#flood .wall-r{ transform:rotateY(-90deg) translateZ(calc(var(--W) * -.5)); background:linear-gradient(-90deg, var(--pink) 0%, var(--pink-3) 100%); }
#flood .wall-l::after, #flood .wall-r::after, #flood .back::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,"); }
#flood .floor{ width:var(--W); height:var(--D); top:calc((var(--H) - var(--D)) / 2); transform:rotateX(90deg) translateZ(calc(var(--H) * -.5)); overflow:hidden; }
#flood .checker{ position:absolute; inset:-4%; background:repeating-conic-gradient(#111 0 25%, #eeeae4 0 50%) 0 0/calc(var(--W) / 12) calc(var(--W) / 12); }
#flood .floor.wet .checker{ filter:url(#wobble); }
#flood .void-shadow{ position:absolute; left:61%; top:calc(62% + var(--H) * .55); width:calc(var(--W) * 1.3); height:80px; margin-left:calc(var(--W) * -.65); background:radial-gradient(ellipse, rgba(231,163,174,.14), transparent 70%); filter:blur(10px); }
/* her head, through the wall */
#flood .head{ position:absolute; left:33%; top:4%; width:34%; aspect-ratio:1; }
#flood .head .face-img{ position:absolute; inset:0; background:var(--img-bend) 51% 10%/320% no-repeat; filter:grayscale(1) contrast(1.15) sepia(.25) hue-rotate(-20deg);
-webkit-mask-image:radial-gradient(ellipse 36% 44% at 50% 46%, #000 60%, transparent 72%); mask-image:radial-gradient(ellipse 36% 44% at 50% 46%, #000 60%, transparent 72%);
animation:fbreathe 7s ease-in-out infinite; transition:filter .3s; }
#flood .head::before{ content:''; position:absolute; left:14%; right:14%; top:6%; bottom:6%; border-radius:50%; box-shadow:0 0 30px 12px rgba(120,60,70,.35), inset 0 0 0 1px rgba(90,40,50,.2); }
@keyframes fbreathe{ 50%{ transform:scale(1.015) translateY(1px); } }
/* the water */
#flood .w-surface{ width:var(--W); height:var(--D); top:calc((var(--H) - var(--D)) / 2); transform:rotateX(90deg) translateZ(calc(var(--H) * -.5 + var(--lvl))); overflow:hidden;
background:linear-gradient(180deg, rgba(200,210,245,.55), rgba(170,182,232,.4)); }
#flood .w-surface::before{ content:''; position:absolute; inset:-50%; background:
repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.18) 0 2px, transparent 3px 26px),
repeating-radial-gradient(circle at 70% 60%, rgba(255,255,255,.12) 0 2px, transparent 3px 34px); animation:fdrift 14s linear infinite; }
@keyframes fdrift{ to{ transform:translate(12%, 8%) rotate(8deg); } }
#flood .w-front{ width:var(--W); height:var(--lvl); top:calc(var(--H) - var(--lvl)); transform:translateZ(calc(var(--D) * .5)); background:linear-gradient(180deg, rgba(215,222,250,.55) 0, rgba(215,222,250,.55) 3px, rgba(170,182,230,.34) 4px, rgba(120,135,200,.45) 100%); }
#flood .w-left, #flood .w-right{ width:var(--D); height:var(--lvl); left:calc((var(--W) - var(--D)) / 2); top:calc(var(--H) - var(--lvl)); background:rgba(150,160,215,.35); }
#flood .w-left{ transform:rotateY(90deg) translateZ(calc(var(--W) * -.5 + 1px)); }
#flood .w-right{ transform:rotateY(-90deg) translateZ(calc(var(--W) * -.5 + 1px)); }
#flood .w-back{ width:var(--W); height:var(--lvl); top:calc(var(--H) - var(--lvl)); transform:translateZ(calc(var(--D) * -.5 + 1px)); background:rgba(150,160,215,.3); }
#flood .w-face{ visibility:hidden; } #flood .wet-on .w-face{ visibility:visible; }
/* gauge */
#flood .gauge{ position:absolute; right:4vw; top:50%; transform:translateY(-50%); z-index:5; display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.2em; }
#flood .gauge .tube{ width:10px; height:34vh; border:1px solid rgba(244,242,236,.5); position:relative; }
#flood .gauge .fill{ position:absolute; left:1px; right:1px; bottom:1px; height:0; background:linear-gradient(0deg, #8f9bdc, #c7cff2); }
#flood .gauge .mark{ position:absolute; left:-5px; right:-5px; top:calc(100% - var(--m) - 1px); height:1px; background:rgba(244,242,236,.35); }
#flood .gauge .read{ writing-mode:vertical-rl; transform:rotate(180deg); color:rgba(244,242,236,.7); }
#flood .gauge .read b{ color:var(--white); font-weight:400; }
#flood.warn .gauge .read b{ color:var(--baby); }
/* the copy */
#flood .fl-copy{ position:absolute; z-index:6; left:6vw; top:var(--sec); max-width:400px; }
#flood .fl-lvl{ font-size:10px; letter-spacing:.3em; color:var(--pink); }
#flood h2{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(44px,5vw,78px); line-height:.9; margin-top:14px; }
#flood .fl-line{ text-wrap:balance; margin-top:16px; min-height:3em; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(19px,1.7vw,24px); line-height:1.35; color:rgba(244,242,236,.88); transition:opacity .35s ease, filter .35s ease; }
#flood .fl-line.swap{ opacity:0; filter:blur(4px); }
#flood .fl-listen{ margin-top:26px; display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:0 20px; background:var(--white); color:#050505; font-size:10px; letter-spacing:.26em; font-weight:700; transition:background .3s, transform .3s var(--ease); }
#flood .fl-listen:hover{ background:var(--rose); transform:translateY(-2px); }
#flood .fl-listen i{ font-style:normal; font-size:12px; }
#flood .fl-acts{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
#flood .fl-listen{ margin-top:0; }
#flood .fl-tap{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:1px solid rgba(244,242,236,.55); color:var(--white); font-size:10px; letter-spacing:.26em; transition:background .3s, color .3s, border-color .3s; }
#flood .fl-tap:hover{ background:var(--white); color:#050505; border-color:var(--white); }
#flood .fl-tap .drop{ width:8px; height:11px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; background:#c7cff2; box-shadow:0 0 6px rgba(199,207,242,.8); }
#flood .fl-hint{ margin-top:18px; font-size:10px; letter-spacing:.28em; color:rgba(244,242,236,.55); transition:opacity .4s; }
#flood.used .fl-hint{ opacity:0; }
@media(max-width:1099px){ #flood .box, #flood .void-shadow{ left:50%; } #flood .box{ top:68%; } }
@media(max-width:760px){
#flood .fl-copy{ top:calc(var(--sec) * .8); left:22px; right:22px; max-width:none; }
#flood h2{ font-size:40px; } #flood .fl-line{ font-size:18px; min-height:2.8em; }
#flood .box{ top:70%; } #flood .gauge{ right:14px; top:auto; bottom:4vh; transform:none; gap:8px; } #flood .gauge .tube{ height:11vh; } #flood .gauge .read{ display:none; }
#flood .fl-listen, #flood .fl-tap{ min-height:44px; padding:0 14px; font-size:9px; }
}
/* =====================================================================
3. LIVE (dark cinema programme — same world as the title card)
===================================================================== */
.lwrap{ max-width:1320px; margin:0 auto; padding:0 6vw; }
/* =====================================================================
THE BRIDE — dark title card (v2 hero)
===================================================================== */
#bride{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:var(--sec) 6vw; overflow:hidden; background:var(--black); color:var(--white); }
#bride .hero-bg{ position:absolute; inset:0; z-index:0; }
#bride .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; transform:scale(1.05); display:block; }
.photo{ filter:grayscale(1) contrast(1.2) brightness(.55); }
.photo.flick{ filter:grayscale(1) contrast(1.25) brightness(.42); }
#bride .hero-bg:hover img{ animation:tune 1.3s var(--ease); }
@keyframes tune{
0%{ filter:grayscale(1) contrast(1.2) brightness(.55); }
22%{ filter:grayscale(.15) contrast(1.35) brightness(.7) sepia(.6) hue-rotate(175deg) saturate(3.4); }
30%{ filter:grayscale(1) contrast(1.5) brightness(.35); }
46%{ filter:grayscale(.1) contrast(1.3) brightness(.72) sepia(.65) hue-rotate(178deg) saturate(3.6); }
100%{ filter:grayscale(1) contrast(1.2) brightness(.55); } }
#bride .hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,.55) 45%, rgba(10,10,10,.96) 100%); }
#bride > *:not(.hero-bg){ position:relative; z-index:1; }
.hero-eyebrow{ font-size:10px; letter-spacing:.4em; opacity:.6; margin-bottom:clamp(12px,1.8vh,20px); }
.hero-word{ font-family:'Anton', sans-serif; font-weight:400; font-size:clamp(60px,15vw,220px); line-height:.82; color:var(--white); display:flex; justify-content:center; white-space:nowrap; }
.hero-word .ltr{ display:inline-block; transition:transform .45s var(--ease); will-change:transform; }
.hero-shadow{ font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400; font-size:clamp(16px,2.6vw,30px); opacity:.5; margin-top:clamp(6px,1vh,12px); letter-spacing:.02em;
transform:scaleY(-1); -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 75%); mask-image:linear-gradient(to bottom, rgba(0,0,0,.5), transparent 75%); }
.hero-tag{ margin-top:clamp(14px,2.2vh,24px); max-width:560px; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:clamp(19px,1.9vw,26px); line-height:1.35; opacity:.88; text-wrap:balance; }
.cast-cue{ margin-top:clamp(22px,3.2vh,34px); display:inline-flex; align-items:center; gap:10px; font-size:9px; letter-spacing:.3em; opacity:.5; }
.cast-cue .dot{ width:6px; height:6px; border-radius:50%; background:var(--baby); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.3;} 50%{opacity:1;} }
/* =====================================================================
JOIN — simple sign-up
===================================================================== */
#join{ position:relative; overflow:hidden; background:var(--wall); color:var(--ink); padding:calc(var(--sec) * 1.1) 0 var(--sec); text-align:center; }
#join .jwrap{ position:relative; max-width:1000px; margin:0 auto; padding:0 6vw; display:flex; flex-direction:column; align-items:center; }
.j-kick{ display:inline-flex; align-items:center; gap:12px; font-size:10px; letter-spacing:.4em; color:var(--muted); }
.j-kick i{ width:6px; height:6px; border-radius:50%; background:var(--baby-ink); animation:pulse 1.6s ease-in-out infinite; }
.j-title{ font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(48px,7vw,104px); line-height:.9; margin-top:clamp(14px,2vh,22px); letter-spacing:.005em; text-wrap:balance; }
.j-shadow{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(19px,1.9vw,26px); opacity:.85; margin-top:clamp(14px,2.2vh,22px); line-height:1.35; color:var(--ink-2); transition:opacity .3s; }
.j-shadow.swap{ opacity:0; }
.j-form{ margin-top:clamp(30px,5vh,48px); width:100%; max-width:520px; display:flex; align-items:stretch; border:1px solid var(--ink); transition:border-color .3s; }
.j-form:focus-within{ border-color:var(--rose-deep); }
.j-form input{ flex:1; min-width:0; background:transparent; border:0; outline:0; color:var(--ink); font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.22em; padding:18px 20px; }
.j-form input::placeholder{ color:var(--ink); opacity:.4; }
.j-form button{ flex:none; background:var(--rose); color:var(--ink); font-size:11px; letter-spacing:.3em; padding:0 26px; font-weight:700; transition:background .3s, color .3s; }
.j-form button:hover, .j-form button:focus-visible{ background:var(--ink); color:var(--white); }
.j-fine{ margin-top:18px; font-size:9px; letter-spacing:.32em; color:var(--muted); line-height:1.8; }
.j-msg{ min-height:22px; margin-top:12px; font-size:10px; letter-spacing:.3em; color:var(--baby-ink); }
@media(max-width:560px){ .j-form{ flex-direction:column; } .j-form input{ text-align:center; padding:16px; } .j-form button{ padding:16px; } .j-fine{ font-size:8px; letter-spacing:.24em; } }
/* the way out, on the way to the last line */
.exit{ display:block; background:var(--wall); color:var(--ink); padding:0 6vw calc(var(--sec) * .5); text-align:center; }
.exit .in{ max-width:1080px; margin:0 auto; display:flex; align-items:center; gap:clamp(18px,3vw,40px); }
.exit .rule{ flex:1; height:1px; background:var(--line); transition:background .4s; }
.exit .word{ font-family:'Anton',sans-serif; font-size:clamp(30px,4.4vw,58px); letter-spacing:.26em; text-indent:.26em; line-height:1;
transition:color .35s, letter-spacing .5s var(--ease); }
.exit .word::after{ content:'→'; display:inline-block; margin-left:.12em; transition:transform .5s var(--ease); }
.exit .sub{ display:block; margin-top:18px; min-height:0; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:clamp(19px,1.7vw,24px); letter-spacing:.01em; color:var(--muted); transition:color .35s; }
.exit:hover .word{ color:var(--baby-ink); letter-spacing:.34em; text-indent:.34em; }
.exit:hover .word::after{ transform:translateX(10px); }
.exit:hover .rule{ background:rgba(111,159,208,.5); }
.exit:hover .sub{ color:var(--ink); }
@media(max-width:560px){ .exit .in{ gap:14px; } .exit .sub{ font-size:18px; } }
footer{ background:var(--wall); padding:0 0 calc(var(--sec) * .38); color:var(--ink); }
.foot{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:0; font-size:9px; letter-spacing:.26em; color:var(--muted); border-top:1px solid var(--line); padding-top:22px; }
.foot .mark{ font-family:'Anton',sans-serif; font-size:13px; letter-spacing:.3em; color:var(--ink); }
.foot .mark b{ font-weight:400; color:var(--baby-ink); }
.foot a{ color:var(--ink); margin-left:18px; padding-bottom:2px; border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
.foot a:hover{ color:var(--baby-ink); border-color:var(--baby-ink); }
@media(max-width:760px){
body, button, a{ cursor:auto; } #cursor{ display:none; }
.ui{ font-size:9px; } .ui.tr{ top:54px; right:18px; }
.ui.bl{ display:none; } .ui.br{ bottom:36px; right:18px; gap:16px; }
#idx{ left:18px; right:18px; top:auto; bottom:68px; transform:none; flex-direction:row; flex-wrap:wrap; gap:10px 16px; }
#idx .h{ display:none; } #idx button{ font-size:9px; gap:6px; } #idx button i{ width:auto; }
#cue{ bottom:124px; font-size:9px; letter-spacing:.3em; }
#frag{ top:92px; width:88vw; } #frag .a, #frag .b{ font-size:19px; line-height:1.25; }
#hud .ro{ display:none; }
#card{ left:12px; right:12px; width:auto; top:auto; bottom:var(--cb,150px); transform:translateY(30px); display:grid; grid-template-columns:34% 1fr; column-gap:12px; padding:10px; max-height:36vh; overflow-y:auto; }
#card.on{ transform:none; }
#card .top{ grid-column:1 / -1; margin-bottom:10px; }
#card .ph{ aspect-ratio:auto; height:100%; min-height:170px; }
#card .lore{ margin-top:0; font-size:15px; } #card h2{ font-size:28px; } #card p{ font-size:14px; margin-top:6px; line-height:1.3; }
#card .listen{ margin-top:12px; padding:10px 12px; font-size:9px; }
.band{ height:28px; margin:-14px -4vw; } .band span{ font-size:11px; padding:0 16px; }
}
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition-duration:.001ms !important; animation:none !important; } html{ scroll-behavior:auto; } }
/* the felt under a turned-over piece: the song, quietly */
#felt{ position:absolute; z-index:11; left:0; top:0; width:10px; height:10px; border-radius:50%; pointer-events:none; visibility:hidden; }
#felt.on{ visibility:visible; }
#felt .n, #felt b, #felt .rule{ display:none; }
#felt a{ position:absolute; display:block; pointer-events:auto; border-radius:40px; color:transparent; font-size:0; }
#felt a.soon{ pointer-events:none; }
#card{ display:none !important; }
/* the pink room: me, standing full length on the chessboard; when the water comes in, it lifts me with it */
#flood .me{ position:absolute; --fh:calc(var(--H) * .84 * 767 / 735); left:calc(var(--W) * .42 - var(--fh) * 336 / 767 * .5); top:calc(var(--H) * .16 - var(--H) * .84 * 16 / 735); width:calc(var(--fh) * 336 / 767); height:var(--fh);
transform:translateZ(calc(var(--D) * -.18)) translateY(calc(var(--lift, 0px) * -1)) rotateY(calc(var(--ry, 0deg) * -1)) rotateZ(var(--tilt, 0deg)); transform-origin:50% 100%; pointer-events:none; }
#flood .me img{ width:100%; height:100%; display:block; filter:drop-shadow(16px 8px 14px rgba(70,20,35,.32)); }
#flood .me img{ transition:filter 1.2s ease; }
#flood .wet-on .me img{ filter:drop-shadow(0 0 1.2px rgba(247,214,222,.75)) drop-shadow(0 0 16px rgba(231,163,174,.28)); }
/* now I'm here, now I'm not: the figure glitches out of the room and back in */
#flood .me .gh{ position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
#flood .me .gh.a{ background:#c8245a; } #flood .me .gh.b{ background:#b9d4ec; }
#flood .me.off img{ opacity:0; }
#flood .me.gl img{ animation:meCut .52s linear both; }
#flood .me.gl .gh.a{ animation:meGhA .52s linear both; }
#flood .me.gl .gh.b{ animation:meGhB .52s linear both; }
@keyframes meCut{
0%{ opacity:1; transform:none; }
10%{ transform:translateX(-7px) skewX(-6deg); }
20%{ transform:translateX(5px); opacity:.55; }
30%{ transform:translateX(-3px) scaleY(1.02); opacity:1; }
45%{ transform:translateX(9px) skewX(4deg); }
60%{ transform:none; opacity:.3; }
75%{ transform:translateX(-5px); opacity:.9; }
90%{ transform:translateX(2px); opacity:.6; }
100%{ transform:none; opacity:1; } }
@keyframes meGhA{
0%, 100%{ opacity:0; transform:none; }
10%{ opacity:.75; transform:translateX(-9px); }
30%{ opacity:.5; transform:translateX(-5px); }
45%{ opacity:0; }
60%{ opacity:.7; transform:translateX(-12px); }
80%{ opacity:0; } }
@keyframes meGhB{
0%, 100%{ opacity:0; transform:none; }
20%{ opacity:.65; transform:translateX(9px); }
35%{ opacity:0; }
50%{ opacity:.75; transform:translateX(6px); }
75%{ opacity:.55; transform:translateX(11px); }
90%{ opacity:0; } }
#flood .me.gl img, #flood .me.gl .gh{ animation-timing-function:steps(1, end); }
@supports ((mask-image:url(#m)) or (-webkit-mask-image:url(#m))){ #flood .me .gh.ok{ visibility:visible; } }
/* ---- separate pages ---- */
html.seen #gate, html.seen #sig{ display:none; }
.exit.next{ padding-top:calc(var(--sec) * .75); }
body[data-page="cube"] footer, body[data-page="cube"] .exit{ position:relative; z-index:1; }