/* Răzvan Flore — rooms */
:root {
  --fg:#efeee9; --dim:rgba(239,238,233,.55); --faint:rgba(239,238,233,.14); --line:rgba(239,238,233,.28);
  --signal:#39ff7a; --cur:var(--signal); --panel:rgba(16,16,18,.94);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --out:cubic-bezier(.16,1,.3,1); --io:cubic-bezier(.65,0,.35,1);
  --s-xs:10px; --s-sm:11px;
}
body.inv { --fg:#151517; --dim:rgba(21,21,23,.58); --faint:rgba(21,21,23,.14); --line:rgba(21,21,23,.3); --panel:rgba(241,240,236,.96); --cur:#ff4d3d; }
* { box-sizing:border-box; margin:0; padding:0; }
@media (pointer:fine) { * { cursor:none !important; } }
html, body { height:100%; overflow:hidden; background:#000; }
body { color:var(--fg); font:var(--s-sm)/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; transition:color .7s var(--io); -webkit-font-smoothing:antialiased; }
button { background:none; border:0; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; }
a { color:inherit; }
#gl { position:fixed; inset:0; width:100%; height:100%; display:block; }
#flash { position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:50; }

/* cursor — green in dark rooms, red in white rooms */
#cur { position:fixed; left:0; top:0; z-index:100; pointer-events:none; width:0; height:0; opacity:0; transition:opacity .3s; }
#cur.live { opacity:1; }
#cur .dot { position:absolute; width:8px; height:8px; margin:-4px; border-radius:50%; background:var(--cur); box-shadow:0 0 12px var(--cur); transition:transform .18s var(--out), opacity .15s, background .5s, box-shadow .5s; }
#cur .ring { position:absolute; width:34px; height:34px; margin:-17px; border:1px solid var(--cur); border-radius:50%; opacity:.55; transition:transform .35s var(--out), opacity .2s, border-color .5s; }
#cur .zero { position:absolute; transform:translate(-50%,-52%) scale(.3); font:700 28px/1 var(--mono); color:var(--cur); text-shadow:0 0 14px var(--cur); opacity:0; transition:transform .22s cubic-bezier(.2,1.6,.4,1), opacity .12s; }
#cur.down .dot { transform:scale(0); opacity:0; } #cur.down .ring { transform:scale(.4); opacity:0; }
#cur.down .zero { opacity:1; transform:translate(-50%,-52%) scale(1); }
#cur.hover .ring { transform:scale(1.6); opacity:.9; }
@media (pointer:coarse) { #cur { display:none; } }

.hud { position:fixed; z-index:5; }
body.st-intro .hud { opacity:0; pointer-events:none; }
.top { top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:24px 28px; }
.name { font-weight:700; letter-spacing:.24em; }
.top nav button { padding:6px 0 6px 13px; position:relative; }
.top nav button::before { content:""; position:absolute; left:0; top:50%; width:5px; height:5px; margin-top:-3px; border:1px solid var(--fg); transition:background .3s var(--out), transform .4s var(--out); }
.top nav button:hover::before { background:var(--cur); border-color:var(--cur); transform:rotate(45deg); }

/* room block — middle left */
#lvl { left:max(28px,6vw); top:50%; transform:translateY(-50%); width:min(46vw,640px); transition:transform .9s var(--out), opacity .5s; }
#lvl .tag { color:var(--dim); margin-bottom:16px; display:flex; gap:12px; align-items:center; }
#lvl .tag i { width:22px; height:1px; background:var(--line); display:inline-block; }
#lvl h1 { font-family:var(--sans); font-weight:500; font-size:clamp(40px,5.4vw,86px); line-height:.9; letter-spacing:-.025em; will-change:transform,opacity,filter; }
.thumbs { display:flex; gap:12px; margin-top:32px; align-items:flex-end; height:162px; }
.thumb { position:relative; height:154px; flex:0 0 auto; overflow:hidden; border:1px solid var(--faint); background:#0006;
  transition:border-color .3s var(--out), height .45s var(--out), transform .45s var(--out); }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:filter .5s var(--out); }
.thumb:hover, .thumb:focus-visible { height:162px; border-color:var(--fg); outline:none; transform:translateY(-3px); }
.thumb:hover img, .thumb:focus-visible img { filter:grayscale(1) contrast(1.05); }
.thumb .n { position:absolute; left:5px; top:4px; font-size:var(--s-xs); color:#fff; mix-blend-mode:difference; }
#cap { margin-top:12px; min-height:16px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.all { margin-top:30px; display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--line); transition:border-color .3s var(--out); }
.all:hover { border-color:var(--fg); }
.all i { width:6px; height:6px; background:var(--cur); border-radius:50%; box-shadow:0 0 8px var(--cur); }

/* contact (the void) */
#contactBlock { display:none; margin-top:30px; max-width:440px; }
body.void #contactBlock { display:block; }
body.void .thumbs, body.void #cap, body.void .all { display:none; }
#contactBlock p { font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:15px; line-height:1.55; color:var(--dim); margin-bottom:22px; }
#contactBlock a { display:grid; grid-template-columns:110px 1fr; padding:12px 0; border-top:1px solid var(--faint); text-decoration:none; transition:padding .45s var(--out), border-color .3s; }
#contactBlock a:last-child { border-bottom:1px solid var(--faint); }
#contactBlock a span:first-child { color:var(--dim); font-size:var(--s-xs); padding-top:3px; }
#contactBlock a span:last-child { font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:16px; }
#contactBlock a:hover { padding-left:10px; border-color:var(--line); }

/* node chain + sliding display flag */
.chain { left:50%; bottom:30px; transform:translateX(-50%); display:flex; align-items:flex-start; transition:opacity .5s var(--out); }
.node { position:relative; width:66px; display:flex; flex-direction:column; align-items:center; gap:8px; padding:4px 0; }
.node .box { width:30px; height:14px; border:1px solid var(--line); border-radius:3px; transition:border-color .3s; }
.node:not(:last-child)::after { content:""; position:absolute; top:11px; left:calc(50% + 15px); width:36px; height:1px; background:var(--line); }
.node small { font-size:var(--s-xs); color:var(--dim); transition:color .4s; }
.node:hover .box { border-color:var(--fg); }
.node.on small { color:var(--fg); }
#flag { position:absolute; top:4px; left:0; width:30px; height:14px; border-radius:3px; background:var(--fg); pointer-events:none; transition:background .6s; }
#flag::after { content:""; position:absolute; right:0; top:0; bottom:0; width:8px; border-radius:0 3px 3px 0; background:var(--cur); box-shadow:0 0 8px var(--cur); }

.legal { left:28px; bottom:30px; color:var(--dim); font-size:var(--s-xs); text-decoration:none; transition:color .3s; }
.legal:hover { color:var(--fg); }
.hint { right:28px; bottom:30px; color:var(--dim); text-align:right; }
.hint b { color:var(--fg); font-weight:400; }

/* shelf (level 2) */
#gallery { position:fixed; left:0; right:0; bottom:84px; z-index:6; opacity:0; pointer-events:none; transform:translateY(40px); transition:opacity .6s var(--out), transform .9s var(--out); }
body.st-gallery #gallery, body.st-project #gallery { opacity:1; pointer-events:auto; transform:none; }
body.st-gallery .thumbs, body.st-gallery #cap, body.st-gallery .all,
body.st-project .thumbs, body.st-project #cap, body.st-project .all, body.st-project .chain { opacity:0; pointer-events:none; }
.thumbs, #cap, .all { transition:opacity .5s var(--out); }
body.st-gallery #lvl, body.st-project #lvl { transform:translateY(calc(-50vh + 84px)); }
.ghead { display:flex; justify-content:space-between; padding:0 28px 14px; color:var(--dim); }
.ghead button:hover { color:var(--fg); }
.track { display:flex; gap:18px; padding:0 28px; align-items:flex-end; will-change:transform; }
.card { flex:0 0 auto; position:relative; height:min(52vh,480px); overflow:hidden; border-radius:2px; background:#111; }
.card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.4s var(--out), filter .5s var(--out); }
.card:hover img { transform:scale(1.05); filter:grayscale(1) contrast(1.05); }
.card .shade { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 38%, transparent 60%); }
.card .info { position:absolute; left:14px; right:14px; bottom:12px; color:#f2f1ee; }
.card .info .t { font-family:var(--sans); font-size:17px; letter-spacing:0; text-transform:none; line-height:1.15; }
.card .info .d { font-family:var(--sans); font-size:12px; text-transform:none; letter-spacing:.01em; opacity:.75; margin-top:6px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-height:0; transition:max-height .5s var(--out); }
.card:hover .info .d { max-height:40px; }
.card .badge { position:absolute; left:12px; top:12px; color:#f2f1ee; font-size:var(--s-xs); padding:4px 7px; background:rgba(0,0,0,.5); }
.card .num { position:absolute; right:12px; top:12px; color:rgba(242,241,238,.75); font-size:var(--s-xs); }
.card::after { content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .3s; }
.card:hover::after { border-color:#f2f1ee; }

/* project (level 3) — a plain fade, no blur */
#project { position:fixed; inset:0; z-index:20; display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .5s var(--out); }
#project .veil { position:absolute; inset:0; background:rgba(8,8,10,.84); }
body.inv #project .veil { background:rgba(236,235,230,.86); }
body.st-project #project { opacity:1; pointer-events:auto; }
.pop { position:relative; display:grid; grid-template-columns:auto minmax(280px,380px); gap:34px; padding:22px; background:var(--panel);
  border:1px solid var(--faint); max-height:90vh; transform:translateY(28px) scale(.97); transition:transform .8s var(--out); }
body.st-project .pop { transform:none; }
.player { position:relative; overflow:hidden; background:#000; }
.player img { height:100%; width:100%; object-fit:cover; display:block; }
.player .poster { position:absolute; inset:0; transition:opacity .7s var(--out); }
.player .vid { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover; opacity:0; background:#000; transition:opacity .7s var(--out); }
.player.live .vid { opacity:1; } .player.live .poster { opacity:0; }
.player .vbar { position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.18); }
.player .vbar i { display:block; height:100%; background:var(--cur); transform-origin:left; transform:scaleX(0); transition:transform .25s linear; }
.player .snd { position:absolute; right:12px; bottom:12px; font-size:var(--s-xs); color:#fff; padding:6px 9px; background:rgba(0,0,0,.5); opacity:0; transition:opacity .35s var(--out); }
.player:hover .snd, .player .snd:focus-visible { opacity:1; }
.player.car .slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s var(--out); background:#000; }
.player.car .slide.on { opacity:1; }
.player .cprev, .player .cnext { position:absolute; top:50%; margin-top:-21px; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff;
  font:300 24px/40px var(--sans); text-align:center; opacity:0; transition:opacity .35s var(--out), transform .35s var(--out); z-index:2; }
.player .cprev { left:12px; } .player .cnext { right:12px; }
.player:hover .cprev, .player:hover .cnext { opacity:1; } .player .cprev:hover, .player .cnext:hover { transform:scale(1.08); }
.player .dots { position:absolute; left:0; right:0; bottom:14px; display:flex; gap:7px; justify-content:center; z-index:2; }
.player .dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:background .3s, transform .4s var(--out); }
.player .dots i.on { background:#fff; transform:scale(1.35); }
@media (pointer:coarse) { .player .snd, .player .cprev, .player .cnext { opacity:1; } }
.side { display:flex; flex-direction:column; padding:6px 4px; min-width:0; }
.side .s2 { margin-top:auto; }
.side .k { color:var(--dim); }
.side h2 { font-family:var(--sans); font-weight:500; text-transform:none; letter-spacing:-.01em; font-size:clamp(26px,2.6vw,38px); line-height:1.04; margin:14px 0 16px; }
.side p { font-family:var(--sans); text-transform:none; letter-spacing:.01em; font-size:15px; line-height:1.55; opacity:.88; }
.side .tools { margin-top:16px; color:var(--dim); line-height:1.8; }
.pnav { padding-top:22px; display:flex; justify-content:space-between; gap:12px; }
.pnav button { text-align:left; max-width:48%; }
.pnav button small { display:block; color:var(--dim); margin-bottom:5px; font-size:var(--s-xs); }
.pnav button span { font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:14px; }
.pnav button:hover span { text-decoration:underline; text-underline-offset:4px; }
.close { position:absolute; right:-1px; top:-38px; }
.pop.wide { grid-template-columns:1fr; gap:20px; }
.pop.wide .side { display:grid; grid-template-columns:1.3fr 1fr; column-gap:40px; }
.pop.wide .side .s2 { margin-top:0; }

@media (max-width:820px) {
  .top { padding:18px 20px; }
  #lvl { left:20px; right:20px; width:auto; top:84px; transform:none; }
  #lvl h1 { font-size:clamp(34px,10.5vw,58px); }
  .thumbs { height:112px; margin-top:18px; } .thumb { height:106px; } .thumb:hover { height:112px; }
  .all { display:none; }   /* on phones the thumbnails are the way in */ .hint { display:none; }
  #contactBlock { margin-top:18px; } #contactBlock p { display:none; }
  .legal { left:20px; bottom:76px; }
  .chain { bottom:22px; } .node { width:44px; } .node small { display:none; } .node .box { width:24px; height:12px; }
  .node:not(:last-child)::after { left:calc(50% + 12px); width:20px; top:10px; }
  #flag { width:24px; height:12px; } #flag::after { width:6px; }
  body.st-gallery #lvl, body.st-project #lvl { transform:none; }
  .pop { grid-template-columns:1fr !important; overflow:auto; gap:16px; width:94vw; padding:16px; }
  .player { width:100% !important; height:auto !important; aspect-ratio:var(--ar); max-height:62vh; }
  .pop.wide .side { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { * { transition-duration:.01s !important; } }

/* laser from the eye to the cursor */
#beam { position:fixed; inset:0; width:100%; height:100%; z-index:99; pointer-events:none; opacity:0; }