/* ============================================================
   TBH — Interactive Studio  ·  Phase 1 (feel-first, colored blocks)
   Pastel Scandinavian creative workspace. Everything is layered
   HTML + CSS transforms — no canvas, no WebGL.
   ============================================================ */

:root {
  --ivory:  #FBF8F2;
  --warm:   #FFFFFF;
  --cream:  #F3EDE1;
  --oak:    #E7D6BE;
  --oak-2:  #D9C3A2;
  --yellow: #FFD400;
  --peach:  #F6C6B8;
  --sage:   #BFD8C6;
  --blue:   #BFD3E6;
  --grey:   #E4E2DC;
  --ink:    #2A2A2E;
  --muted:  #8A8A90;
  --line:   rgba(42,42,46,0.08);

  --shadow-soft: 0 10px 30px rgba(120,110,90,0.14);
  --shadow-lift: 0 24px 60px rgba(120,110,90,0.22);
  --radius: 22px;

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 0.18);
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(120% 90% at 20% 0%, #FFFDF8 0%, var(--ivory) 45%, #F1EADC 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- 3D canvas + mode switching ---- */
#scene3d {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 1; opacity: 0; transition: opacity 0.9s ease; touch-action: none;
}
body:not([data-mode="3d"]) #scene3d { display: none; }
body[data-mode="3d"] .room { display: none; }      /* CSS room hidden when 3D is active */
body.scene-ready #scene3d { opacity: 1; }

.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: 0.4; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
}

/* ---------------------------------------------------------- STAGE */
.stage {
  --mx: 0; --my: 0;            /* mouse, normalized -0.5..0.5 (set by JS) */
  position: relative;
  width: 100%;
  min-height: 100vh;
  perspective: 1600px;
  perspective-origin: 50% 42%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Sunlight beams from the window */
.sun {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 14% 8%, rgba(255,240,200,0.85) 0%, rgba(255,240,200,0) 60%),
    linear-gradient(115deg, rgba(255,246,220,0.6) 0%, rgba(255,246,220,0) 40%);
  opacity: 0.9;
  animation: sunBreathe 12s ease-in-out infinite alternate;
}
@keyframes sunBreathe { from { opacity: 0.75; } to { opacity: 1; } }

.particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.particles i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,240,200,0.2));
  animation: float-dust linear infinite;
  opacity: 0;
}
@keyframes float-dust {
  0%   { transform: translateY(20px) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(-90vh) translateX(30px); opacity: 0; }
}

/* ---------------------------------------------------------- ROOM */
.room {
  position: relative;
  width: min(1200px, 94vw);
  aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
  transform:
    rotateX(calc(var(--my) * -3deg))
    rotateY(calc(var(--mx) * 4deg));
  transition: transform 0.25s var(--ease);
  will-change: transform;
}

/* ---- illustrated studio scene ---- */
.room__scene { position:absolute; inset:0; transform-style:preserve-3d; }

.room__wall {
  position:absolute; inset:0; border-radius:28px; overflow:hidden;
  background:linear-gradient(180deg,#FFFDF9 0%, #FBF4E7 56%, #F4EAD6 56%, #F4EAD6 100%);
  box-shadow: inset 0 0 140px rgba(214,190,150,0.22), var(--shadow-soft);
}
.room__floor {
  position:absolute; left:0; right:0; bottom:0; height:44%; border-radius:0 0 28px 28px;
  background:linear-gradient(180deg,#EFE3CD,#E6D6B9);
}
.room__floor::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 30% 0%, rgba(255,246,224,0.5), transparent 60%);
}

.room__window {
  position:absolute; top:8%; left:5%; width:23%; height:40%;
  border-radius:12px; background:#fff; overflow:hidden;
  box-shadow:0 0 0 7px #fff, 0 0 0 9px #E8DEC9, var(--shadow-soft);
}
.room__sky { position:absolute; inset:0;
  background:
    radial-gradient(42% 55% at 24% 82%, #A9CBA6 0%, transparent 62%),
    radial-gradient(46% 60% at 72% 88%, #BBD6B0 0%, transparent 62%),
    linear-gradient(180deg,#D3EAF4,#EAF3E9);
  filter:blur(2px);
}
.room__window::after { content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,0.55) 0%, transparent 42%); }
.room__mullion { position:absolute; background:#fff; }
.room__mullion--v { left:50%; top:0; bottom:0; width:5px; transform:translateX(-50%); }
.room__mullion--h { top:50%; left:0; right:0; height:5px; transform:translateY(-50%); }

.room__neon {
  position:absolute; top:9%; left:52%; width:30%; text-align:center;
  font-family:var(--font-display); font-weight:500; font-size:clamp(12px,1.6vw,22px);
  line-height:1.15; color:#F4B84B;
  text-shadow:0 0 10px rgba(246,184,75,0.55), 0 0 22px rgba(246,184,75,0.35);
  transform:translateZ(8px); animation:flicker 6s ease-in-out infinite;
}
@keyframes flicker { 0%,97%,100%{opacity:1} 98%{opacity:.7} 99%{opacity:.9} }

.room__shelf {
  position:absolute; right:6%; top:30%; width:26%; height:9px; border-radius:4px;
  background:linear-gradient(#E9D8BB,#D9C3A2);
  box-shadow:0 10px 20px rgba(120,100,60,0.12); transform:translateZ(6px);
}
.room__rug {
  position:absolute; left:50%; bottom:5%; width:64%; height:20%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(255,212,0,0.16), rgba(191,216,198,0.14) 55%, transparent 72%);
  border-radius:50%;
}

.room__desk { position:absolute; left:8%; right:8%; top:58%; height:20%; transform:translateZ(28px); }
.room__desk-top {
  position:absolute; inset:0 0 auto 0; height:56%;
  background:linear-gradient(180deg,#EAD9BC,#E0CBA6); border-radius:12px 12px 4px 4px;
  box-shadow:0 22px 42px rgba(120,90,40,0.22);
}
.room__desk-top::after { content:""; position:absolute; left:0; right:0; top:0; height:26%;
  background:linear-gradient(180deg, rgba(255,250,235,0.7), transparent); border-radius:12px 12px 0 0; }
.room__desk-leg { position:absolute; bottom:0; width:8px; height:60%;
  background:linear-gradient(#DCC59F,#C9AE82); border-radius:0 0 3px 3px; }
.room__desk-leg--l { left:12%; } .room__desk-leg--r { right:12%; }

/* plants */
.plant { position:absolute; transform:translateZ(20px); }
.plant--floor { left:1%; bottom:4%; width:66px; height:122px; }
.plant--desk { right:11%; top:49%; width:40px; height:66px; transform:translateZ(30px); }
.plant__pot { position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:70%; height:34%; background:linear-gradient(#E7B48C,#D8996E); border-radius:6px 6px 10px 10px; }
.plant__leaf { position:absolute; bottom:28%; left:50%; width:26%; height:62%;
  background:linear-gradient(180deg,#9CC29A,#7CA97B);
  border-radius:60% 60% 50% 50% / 70% 70% 40% 40%; transform-origin:bottom center; }
.plant__leaf.l1 { transform:translateX(-50%); }
.plant__leaf.l2 { transform:translate(-125%,4%) rotate(-26deg); }
.plant__leaf.l3 { transform:translate(25%,4%) rotate(26deg); }
.plant__leaf.l4 { transform:translate(-205%,10%) rotate(-46deg); height:48%; }

/* ---------------------------------------------------------- OBJECTS */
.obj {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0; background: none; padding: 0; cursor: pointer;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}
/* parallax layer — moves by depth, driven by CSS vars */
.obj__parallax {
  display: block; transform-style: preserve-3d;
  transform:
    translate3d(
      calc(var(--mx) * var(--depth) * 46px),
      calc(var(--my) * var(--depth) * 30px),
      calc(var(--depth) * 70px)
    );
  transition: transform 0.25s var(--ease);
  will-change: transform;
}
/* idle float layer */
.obj__float {
  display: block; transform-style: preserve-3d;
  animation: idleFloat 6s ease-in-out infinite;
}
@keyframes idleFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
/* the drawn object (SVG artwork) */
.obj__art {
  position: relative; display: block; width: var(--w);
  filter: drop-shadow(0 12px 16px rgba(90,70,40,0.16));
  transition: transform 0.32s var(--ease), filter 0.32s var(--ease);
}
.obj__art svg { width: 100%; height: auto; display: block; }
.obj__label { display: block; text-align: center; margin-top: 8px; }
.obj__label b { font-family: var(--font-display); font-weight: 600; font-size: 13px;
  color: var(--ink); display: block; line-height: 1; }
.obj__label i { font-style: normal; font-size: 11px; color: var(--muted); }

.obj:hover .obj__art,
.obj:focus-visible .obj__art {
  transform: translateY(-9px) scale(1.05);
  filter: drop-shadow(0 22px 28px rgba(90,70,40,0.26));
}
.obj:focus-visible { outline: none; }
.obj:focus-visible .obj__art { outline: 2px solid rgba(255,212,0,0.85); outline-offset: 8px; border-radius: 14px; }

/* pulsing hotspot dot (first visit only) */
.obj__dot {
  position: absolute; top: -8px; right: -8px; z-index: 3;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 4px rgba(255,212,0,0.28);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 0 0 rgba(255,212,0,0.55); }
  50%  { transform: translate(-50%,-50%) scale(1.3);  box-shadow: 0 0 0 13px rgba(255,212,0,0); }
  100% { transform: translate(-50%,-50%) scale(1);    box-shadow: 0 0 0 0 rgba(255,212,0,0); }
}
/* After first interaction, hide labels + dots for a clean room; reveal on hover */
.obj__label, .obj__dot { transition: opacity 0.6s ease; }
body.explored .obj__label,
body.explored .obj__dot { opacity: 0; }
body.explored .obj:hover .obj__label,
body.explored .obj:focus-visible .obj__label { opacity: 1; }

/* ---------------------------------------------------------- INTRO */
.intro {
  position: fixed; z-index: 40; left: 30px; top: 92px;
  text-align: left; pointer-events: none; width: min(360px, 60vw);
}
.intro h1 {
  font-family: var(--font-display); font-weight: 700; color: #1c1913;
  font-size: clamp(30px, 4vw, 52px); letter-spacing: -0.03em; line-height: 0.98;
  text-shadow: 0 2px 22px rgba(255,255,255,0.7), 0 1px 3px rgba(255,255,255,0.6);
}
.intro p { color: #2e2a23; margin-top: 12px; font-size: clamp(14px, 1.4vw, 17px); max-width: 260px;
  text-shadow: 0 1px 12px rgba(255,255,255,0.65); }
.intro .kbd {
  display:inline-block; margin-top:16px; font-size:12px; color:#2e2a23; font-weight:500;
  border:1px solid rgba(0,0,0,0.12); border-radius:999px; padding:6px 14px; background:rgba(255,255,255,0.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
body.explored .intro { opacity: 1; }  /* heading stays visible (was fading after first click) */

/* brand mark */
.brand {
  position: fixed; top: 26px; left: 30px; z-index: 45;
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em;
}
.brand small { display:block; font-weight:500; font-size:10px; letter-spacing:0.14em; color:var(--muted); }

/* ---------------------------------------------------------- OVERLAY */
.overlay {
  position: fixed; inset: 0; z-index: 70;
  display: none; place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.overlay.open { display: grid; }
.overlay__scrim {
  position: absolute; inset: 0;
  background: rgba(40,36,28,0.28);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  opacity: 0;
}
.panel {
  position: relative; width: min(1080px, 96vw); max-height: 88vh;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden; display: flex; flex-direction: column;
  opacity: 0; transform: scale(0.96) translateY(10px);
}
.panel__head {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  padding: 26px 30px 18px; border-bottom: 1px solid var(--line);
}
.panel__title { font-family: var(--font-display); font-weight:600; font-size: clamp(22px, 3vw, 34px); letter-spacing:-0.02em; }
.panel__tag { color: var(--muted); margin-top: 4px; font-size: 14px; }
.panel__close {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink);
  transition: transform 0.2s var(--ease), background 0.2s;
}
.panel__close:hover { transform: rotate(90deg); background: var(--yellow); }
.panel__body { padding: 26px 30px 34px; overflow-y: auto; }

/* generic grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 16px; }
.card {
  border-radius: 16px; overflow: hidden; background:#fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card__thumb {
  aspect-ratio: 4/3; display:grid; place-items:center;
  font-family: var(--font-display); font-weight:600; color:#8a7f63; font-size:13px;
  background: linear-gradient(135deg, #FBE9B0, #F6C6B8 55%, #BFD8C6);
}
.card__meta { padding: 12px 14px; }
.card__meta b { font-family: var(--font-display); font-size:14px; }
.card__meta span { display:block; color:var(--muted); font-size:12px; margin-top:2px; }
.chip { display:inline-block; margin-top:8px; font-size:11px; color:#7a6f52; background:#FFF3C2; border-radius:999px; padding:3px 10px; }

/* clickable website cards (laptop → sites) */
.card--link { cursor:pointer; }
.card--link .card__cta { display:block; margin-top:10px; font-size:12px; font-family:var(--font-display); font-weight:600; color:#9a8a45; transition:color .2s, transform .2s var(--ease); }
.card--link:hover .card__cta { color:var(--ink); transform:translateX(3px); }

/* browser layout (laptop) */
.browser { border-radius:16px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-soft); }
.browser__bar { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#EFEDE7; }
.browser__bar i { width:12px; height:12px; border-radius:50%; background:#D6D3CB; display:inline-block; }
.browser__bar i:nth-child(1){background:#F6A6A0} .browser__bar i:nth-child(2){background:#F6D28A} .browser__bar i:nth-child(3){background:#A6D6A9}
.browser__url { flex:1; margin-left:10px; background:#fff; border-radius:999px; padding:6px 14px; font-size:12px; color:var(--muted); }
.browser__body { padding:18px; background:#faf8f3; }

/* phone / reels layout */
.reels { display:flex; justify-content:center; }
.device {
  width: 300px; max-width: 80vw; aspect-ratio: 9/19.5;
  background:#0d0d10; border-radius:40px; padding:12px;
  box-shadow: var(--shadow-lift), inset 0 0 0 2px #26262c;
}
.device__screen {
  width:100%; height:100%; border-radius:30px; overflow-y:auto; scroll-snap-type:y mandatory;
  background:#000;
}
.device__screen::-webkit-scrollbar{ display:none; }
.reel {
  height:100%; scroll-snap-align:start; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
  color:#fff; background: linear-gradient(180deg, #2a2f45, #4a3550 60%, #1c1c22);
}
.reel:nth-child(2n){ background:linear-gradient(180deg,#3a2f2a,#5a4438 60%,#221c18); }
.reel:nth-child(3n){ background:linear-gradient(180deg,#243a30,#375a44 60%,#182219); }
.reel b { font-family:var(--font-display); font-size:18px; }
.reel span { font-size:12px; opacity:0.8; }
.reel__play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,0.18);
  display:grid; place-items:center; backdrop-filter:blur(4px); }
.reel__play::after{ content:""; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }

/* clickable media cards → open a hint on hover */
.card--media { cursor:pointer; position:relative; }
.card__open {
  position:absolute; top:10px; right:10px; z-index:2;
  font-size:11px; font-weight:600; font-family:var(--font-display);
  color:#3a3320; background:rgba(255,255,255,0.9); border-radius:999px;
  padding:4px 10px; opacity:0; transform:translateY(-4px); transition:opacity .2s, transform .2s var(--ease);
}
.card--media:hover .card__open,
.card--media:focus-visible .card__open { opacity:1; transform:translateY(0); }
.card--media:focus-visible { outline:2px solid var(--yellow); outline-offset:2px; }

/* full-screen media viewer (lightbox) */
.lightbox { position:fixed; inset:0; z-index:90; display:none; align-items:center; justify-content:center; padding:5vh 6vw; }
.lightbox.open { display:flex; }
.lightbox__scrim { position:absolute; inset:0; background:rgba(20,18,14,0.62);
  backdrop-filter:blur(20px) saturate(1.1); -webkit-backdrop-filter:blur(20px) saturate(1.1); }
.lightbox__close {
  position:absolute; top:22px; right:26px; z-index:4;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,0.92); color:var(--ink); font-size:22px; line-height:1;
  transition:transform .2s var(--ease);
}
.lightbox__close:hover { transform:rotate(90deg); background:var(--yellow); }
.lightbox__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:4;
  width:54px; height:54px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,0.14); color:#fff; font-size:30px; line-height:1;
  backdrop-filter:blur(6px); transition:background .2s, transform .2s var(--ease);
}
.lightbox__nav:hover { background:rgba(255,255,255,0.28); }
.lightbox__nav--prev { left:22px; } .lightbox__nav--next { right:22px; }
.lightbox__frame { position:relative; z-index:2; width:auto; max-width:96vw; margin:0;
  display:flex; flex-direction:column; gap:14px; align-items:center; }
.lightbox__stage {
  border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lift);
  background:#000; display:flex; align-items:center; justify-content:center; max-width:100%;
}
/* Fit any image/video to the screen (portrait or landscape) without overflow. */
.lightbox__stage img, .lightbox__stage video {
  display:block; width:auto; height:auto;
  max-width:min(1000px, 92vw); max-height:80vh;
  object-fit:contain; background:#000;
}
.lb__ph { width:min(92vw,760px); height:min(70vh,520px); display:flex; flex-direction:column; gap:12px;
  align-items:center; justify-content:center; text-align:center; padding:20px; }
.lb__ph--image { background:linear-gradient(135deg,#FBE9B0,#F6C6B8 55%,#BFD8C6); color:#6b5f45; }
.lb__ph--image span { font-family:var(--font-display); font-size:clamp(24px,4vw,40px); }
.lb__ph--video { background:linear-gradient(135deg,#26262c,#4a3f38); color:#fff; position:relative; }
.lb__ph--video .playbadge { position:static; width:70px; height:70px; }
.lb__ph em { font-style:normal; font-size:13px; opacity:0.7; }
.lightbox__cap { color:#fff; text-align:center; }
.lightbox__cap b { font-family:var(--font-display); font-size:18px; }
.lightbox__cap span { display:block; opacity:0.72; font-size:13px; margin-top:3px; letter-spacing:0.02em; }

@media (max-width:720px) {
  .lightbox { padding:3vh 4vw; }
  .lightbox__nav { width:44px; height:44px; font-size:24px; }
  .lightbox__nav--prev { left:8px; } .lightbox__nav--next { right:8px; }
}

/* phone special: Files app + reel viewer */
.phone-screen {
  position:relative; width:100%; height:100%;
  border-radius:30px; overflow:hidden; background:#F4F4F7;
}
/* --- Files app (folders) --- */
.files { height:100%; overflow-y:auto; padding:14px 14px 20px; }
.files::-webkit-scrollbar{ display:none; }
.files__status { display:flex; justify-content:space-between; align-items:center;
  font-size:12px; font-weight:600; color:#1c1c1e; padding:2px 6px 10px; }
.files__dots { width:42px; height:12px; border-radius:6px;
  background:radial-gradient(circle 3px at 8px 6px,#1c1c1e 99%,transparent),
             radial-gradient(circle 3px at 20px 6px,#1c1c1e 99%,transparent),
             linear-gradient(#1c1c1e,#1c1c1e) 30px 3px/12px 6px no-repeat; background-repeat:no-repeat; }
.files__head { padding:2px 6px 12px; }
.files__head b { font-family:var(--font-display); font-size:26px; color:#1c1c1e; display:block; letter-spacing:-0.02em; }
.files__head span { font-size:12px; color:#8a8a8e; }
.files__search { background:#E6E6EA; color:#8a8a8e; border-radius:12px;
  padding:9px 14px; font-size:14px; margin:0 6px 16px; }
.files__grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 4px; }
.folder {
  border:0; background:transparent; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:6px; padding:4px;
  border-radius:12px; transition:background .18s;
}
.folder:hover { background:rgba(0,0,0,0.04); }
.folder__ico {
  position:relative; width:100%; aspect-ratio:5/3.4; border-radius:12px;
  background:linear-gradient(160deg,#FFE08A,#F6B84B);
  box-shadow:0 6px 14px rgba(200,150,40,0.28);
}
.folder__ico::before { content:""; position:absolute; top:-6px; left:10px;
  width:34%; height:12px; border-radius:6px 6px 0 0; background:#FFE08A; }
.folder__ico::after { content:""; position:absolute; inset:0; border-radius:12px;
  background:linear-gradient(160deg,rgba(255,255,255,0.5),transparent 45%); }
.folder__name { font-size:14px; font-weight:600; color:#1c1c1e; }
.folder__count { font-size:12px; color:#8a8a8e; margin-top:-4px; }

/* --- Instagram-style reel viewer --- */
.reelview { position:absolute; inset:0; background:#000; }
.reelback {
  position:absolute; top:12px; left:12px; z-index:5;
  width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,0.4); color:#fff; font-size:22px; line-height:1;
  backdrop-filter:blur(6px); display:grid; place-items:center;
}
.reelback:hover { background:rgba(0,0,0,0.65); }
.reelfeed { height:100%; overflow-y:auto; scroll-snap-type:y mandatory; }
.reelfeed::-webkit-scrollbar{ display:none; }
.reel__ui { position:absolute; top:14px; left:56px; z-index:4; }
.reel__cat { font-size:12px; color:#fff; background:rgba(255,255,255,0.18);
  padding:4px 10px; border-radius:999px; backdrop-filter:blur(4px); }
.reel__info { position:relative; z-index:2; }
.reel__info b { display:block; font-family:var(--font-display); font-size:18px; }
.reel__info span { display:block; font-size:12px; opacity:0.82; margin-top:2px; }

/* gallery layout (camera) */
.gallery { display:grid; gap:16px; grid-template-columns: repeat(6, 1fr); }
.shot { border-radius:16px; overflow:hidden; min-height:180px; box-shadow:var(--shadow-soft);
  display:flex; align-items:flex-end; padding:16px; color:#fff; position:relative; }
.shot b{ font-family:var(--font-display); font-size:16px;} .shot span{ font-size:12px; opacity:.85; display:block;}
.shot:nth-child(1){ grid-column:span 4; background:linear-gradient(135deg,#7a6a58,#3a332c);}
.shot:nth-child(2){ grid-column:span 2; background:linear-gradient(135deg,#c98d6a,#7a4a34);}
.shot:nth-child(3){ grid-column:span 2; background:linear-gradient(135deg,#8fae8f,#4a5f4a);}
.shot:nth-child(4){ grid-column:span 2; background:linear-gradient(135deg,#9a95a8,#4a4658);}
.shot:nth-child(5){ grid-column:span 2; background:linear-gradient(135deg,#c2a06a,#6a5230);}

/* categories drill-down (posters, cabinet) */
.cats { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
.cat {
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:14px; border:1px solid var(--line); border-radius:16px; background:#fff;
  box-shadow:var(--shadow-soft); cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cat:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.cat__thumbs { position:relative; flex:none; width:56px; height:48px; }
.cat__t {
  position:absolute; top:0; left:0; width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg,#FBE9B0,#F6C6B8 55%,#BFD8C6);
  box-shadow:0 2px 8px rgba(120,110,90,.18); border:2px solid #fff;
}
.cat__t:nth-child(2){ transform:translate(8px,6px) rotate(6deg); background:linear-gradient(135deg,#BFD3E6,#F4D06F);}
.cat__t:nth-child(3){ transform:translate(16px,-2px) rotate(-5deg); background:linear-gradient(135deg,#BFD8C6,#F6C6B8);}
.cat__t.is-video::after{ content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border-left:8px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.cat__meta { flex:1; } .cat__meta b{ font-family:var(--font-display); font-size:15px; display:block; }
.cat__meta span{ color:var(--muted); font-size:12px; }
.cat__arrow { color:var(--muted); font-size:18px; transition:transform .22s var(--ease); }
.cat:hover .cat__arrow { transform:translateX(4px); color:var(--ink); }

.backbtn {
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:8px 16px; font-size:13px; cursor:pointer; color:var(--ink);
  transition:background .2s, transform .2s var(--ease); margin-bottom:16px;
}
.backbtn:hover { background:var(--yellow); transform:translateX(-3px); }
.cat-head { font-family:var(--font-display); font-size:20px; margin-bottom:14px; display:flex; align-items:baseline; gap:10px; }
.cat-head span { font-size:13px; color:var(--muted); font-weight:500; }

/* video treatment on media cards */
.card__thumb.is-video { position:relative; background:linear-gradient(135deg,#3a3a40,#6a5a4a); }
.playbadge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.22); backdrop-filter:blur(3px); }
.playbadge::after { content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%);
  border-left:13px solid #fff; border-top:8px solid transparent; border-bottom:8px solid transparent; }
.chip--video { background:#EAE4F2; color:#5b4e78; }

/* drawers layout (cabinet) */
.drawers { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.drawer {
  border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:#fff;
  display:flex; align-items:center; justify-content:space-between; cursor:pointer;
  box-shadow:var(--shadow-soft); transition:transform .2s var(--ease);
}
.drawer:hover{ transform:translateX(6px); }
.drawer b{ font-family:var(--font-display); } .drawer span{ color:var(--muted); font-size:12px; }
.drawer .pull{ width:34px; height:8px; border-radius:999px; background:var(--oak-2); }

/* ---------------------------------------------------------- MOBILE (top-down stack) */
@media (max-width: 720px) {
  .stage { perspective: none; align-items: start; padding: 90px 16px 40px; }
  .room {
    width: 100%; aspect-ratio: auto; transform: none !important;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  }
  .room__scene { display: none; }
  .obj { position: static; transform: none;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
    padding: 16px 12px 12px; box-shadow: var(--shadow-soft); }
  .obj__parallax { transform: none !important; }
  .obj__art { width: 92px !important; margin: 0 auto; }
  .intro { position: static; transform: none; margin: 0 auto 20px; }
  body.explored .obj__label { opacity:1; } /* keep labels on mobile */
  body.explored .obj__dot { opacity:0; }
  .gallery { grid-template-columns: 1fr; }
  .shot { grid-column: span 1 !important; }
}

/* ---------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .obj__float, .sun, .room__neon, .particles i { animation: none !important; }
  .room, .obj__parallax { transition: none !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   IMAGE + HOTSPOTS MODE  (photoreal scene — the current design)
   ============================================================ */
.mode-image .stage { perspective: 1500px; place-items: center; padding: 0; overflow: hidden; }
/* Blurred, cover-scaled copy of the render fills the whole screen, so the sharp
   image can sit "contained" (fully visible, never cropped) with no hard bars. */
.mode-image .stage::before {
  content: ""; position: absolute; inset: -5%; z-index: 0;
  background: url("../assets/scene.png") center / cover no-repeat;
  filter: blur(38px) brightness(1.04) saturate(1.05);
  transform: scale(1.1);
}
.mode-image .room {
  position: relative; width: 100vw; max-width: none; height: 100vh; aspect-ratio: auto;
  z-index: 1; transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--mx) * -18px), calc(var(--my) * -12px), 0)
    rotateX(calc(var(--my) * -4.5deg))
    rotateY(calc(var(--mx) * 6deg));
  transition: transform 0.2s var(--ease); will-change: transform;
}
/* Whole image visible (contain), full height, centered. `.scene` keeps the
   image's own 4:3 box so hotspots (positioned as % of `.scene`) stay aligned. */
.mode-image .scene {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 100vh; width: auto; aspect-ratio: 1672 / 941;
}
.mode-image .scene__img {
  width: 100%; height: 100%; object-fit: contain; border-radius: 0; box-shadow: none;
}
.scene { position: relative; width: 100%; }
.scene__img {
  width: 100%; height: auto; display: block; border-radius: 20px;
  box-shadow: 0 40px 90px rgba(80,60,30,0.22); background: #ECE6DA;
}
/* placeholder until the render is dropped in at assets/scene.jpg */
.scene__placeholder {
  position: absolute; inset: 0; display: none; flex-direction: column; gap: 10px;
  align-items: center; justify-content: center; text-align: center; color: var(--muted);
  border: 2px dashed rgba(0,0,0,0.18); border-radius: 20px;
  background: repeating-linear-gradient(45deg, #F1EADD, #F1EADD 16px, #ECE4D3 16px, #ECE4D3 32px);
}
body.no-scene .scene { min-height: 62vh; }
body.no-scene .scene__placeholder { display: flex; }
body.no-scene .scene__img { visibility: hidden; }
.scene__placeholder b { font-family: var(--font-display); font-size: 20px; color: var(--ink); }
.scene__placeholder code { background: rgba(0,0,0,0.07); padding: 2px 8px; border-radius: 6px; }

/* hotspots */
.hot {
  position: absolute; border: 0; background: transparent; padding: 0; cursor: pointer;
  border-radius: 14px; -webkit-tap-highlight-color: transparent;
}
.hot__ring {
  position: absolute; inset: 0; border-radius: 14px;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
/* No box for end users — dots only. Keep a ring for keyboard focus (a11y). */
.hot:focus-visible .hot__ring {
  box-shadow: 0 0 0 3px rgba(255,212,0,0.95);
}
.hot__dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 22px; height: 22px; border-radius: 50%; background: var(--yellow);
  border: 3px solid rgba(255,255,255,0.98);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
  animation: pulse 1.8s ease-in-out infinite; pointer-events: none;
  transition: opacity 0.6s ease;
}
body.explored .hot__dot { opacity: 1; }  /* dots stay visible so users always see what's clickable */
.hot__label {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -6px);
  background: rgba(20,18,14,0.92); color: #fff; padding: 6px 12px; border-radius: 10px;
  white-space: nowrap; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none; text-align: center;
}
.hot__label b { font-family: var(--font-display); font-size: 13px; display: block; line-height: 1; }
.hot__label i { font-style: normal; font-size: 11px; color: #cfc9bb; }
.hot:hover .hot__label, .hot:focus-visible .hot__label { opacity: 1; transform: translate(-50%, -12px); }

/* bottom dock */
.dock {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 45;
  display: flex; gap: 4px; padding: 8px; max-width: 96vw; overflow-x: auto;
  background: rgba(255,255,255,0.82); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 20px; box-shadow: var(--shadow-lift);
  scrollbar-width: none;
}
.dock::-webkit-scrollbar { display: none; }
.dock__item {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 90px; padding: 9px 6px; border: 0; background: transparent; border-radius: 14px;
  cursor: pointer; transition: background 0.2s ease, transform 0.2s var(--ease);
}
.dock__item:hover { background: rgba(255,212,0,0.18); transform: translateY(-3px); }
.dock__ico { width: 44px; height: 32px; display: grid; place-items: center; }
.dock__ico svg { width: 100%; height: 100%; }
.dock__txt b { font-family: var(--font-display); font-size: 12px; display: block; line-height: 1.1; color: var(--ink); }
.dock__txt i { font-style: normal; font-size: 10px; color: var(--muted); }
/* dock removed per design — the object dots are the only nav */
.dock { display: none; }

/* calibration overlay (?calibrate=1) */
body.calibrate .hot { background: rgba(255,0,90,0.14); box-shadow: inset 0 0 0 1px rgba(255,0,90,0.75); }
body.calibrate .hot__label { opacity: 1; }
.calibrate-readout {
  position: fixed; top: 12px; right: 12px; z-index: 80; font-family: var(--font-display);
  background: #111; color: #39FF7A; padding: 8px 14px; border-radius: 10px; font-size: 13px;
}

.mode-image .room { display: block; }

/* ---------------------------------------------------------- MOBILE (image mode)
   Phones get a hero image + a tappable grid of services (the dock, restyled),
   instead of the desktop dot-room which is too small to tap accurately. */
@media (max-width: 720px) {
  .mode-image .stage {
    display: block; height: auto; min-height: 100vh; padding: 0;
    overflow: visible; perspective: none; place-items: start;
  }
  .mode-image .stage::before { display: none; }            /* no blur backdrop on mobile */

  .mode-image .room {
    position: relative; display: block; width: 100%; max-width: none; height: auto;
    aspect-ratio: auto; transform: none !important; overflow: hidden;
    border-radius: 0 0 22px 22px; box-shadow: 0 12px 30px rgba(80,60,30,0.12);
  }
  .mode-image .scene {
    position: relative; top: auto; left: auto; transform: none;
    width: 100%; height: auto; aspect-ratio: 1672 / 941;
  }
  .mode-image .scene__img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }

  .hot { display: none; }              /* dots don't work on the small room — grid instead */

  .intro { position: static; transform: none; width: auto; padding: 20px 20px 4px; }
  .intro h1 { font-size: 32px; }
  .intro p { max-width: none; }
  .intro .kbd { display: none; }

  /* services grid — the dock, restyled as tappable cards */
  .dock {
    display: grid !important; position: static; transform: none; left: auto; bottom: auto;
    grid-template-columns: repeat(2, 1fr); gap: 10px;
    width: 100%; max-width: none; padding: 14px 20px 44px;
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    border: 0; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .dock__item {
    width: auto; flex-direction: row; justify-content: flex-start; gap: 12px;
    padding: 14px; background: #fff; border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px; box-shadow: 0 4px 14px rgba(80,60,30,0.07);
  }
  .dock__item:hover { transform: none; background: #fff; }
  .dock__ico { width: 34px; height: 34px; flex: 0 0 34px; }
  .dock__txt { text-align: left; }
}

/* ============================================================
   Website Portfolio — client logo grid (laptop section).
   Each card is a link: click a logo → live website opens in a new tab.
   ============================================================ */
.logos{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  padding: 4px;
}
.logo-card{
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 22px 18px 16px;
  text-decoration: none;
  color: #1c1913;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.logo-card:hover, .logo-card:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.13);
  border-color: rgba(0,0,0,0.16);
  outline: none;
}
.logo-card__img{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 116px;
}
.logo-card__img img{
  max-width: 86%; max-height: 100%; object-fit: contain;
}
.logo-card__name{
  margin-top: 14px;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-weight: 600; font-size: 15px; line-height: 1.2;
}
.logo-card__go{
  margin-top: 5px;
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 500; font-size: 12px; color: #8a7a1e;
  opacity: 0; transform: translateY(2px);
  transition: opacity .18s ease, transform .18s ease;
}
.logo-card:hover .logo-card__go, .logo-card:focus-visible .logo-card__go{
  opacity: 1; transform: none;
}
@media (hover: none){ .logo-card__go{ opacity: 1; transform: none; } }

/* ============================================================
   Real image thumbnails in gallery cards + category previews.
   ============================================================ */
.card--has-img .card__thumb{ position: relative; overflow: hidden; padding: 0; }
.card__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* category preview tiles show the first images */
.cat__t{ background-size: cover; background-position: center; }

/* ============================================================
   Phone reels: keep the whole phone on-screen + play videos inline.
   ============================================================ */
.reels{ align-items:center; }
/* Size the phone to the available height so it's never cut off. */
.device{
  height: min(66vh, 640px);
  width: auto;
  max-width: 90vw;
}
/* Reel video fills the slide behind the caption/overlays. */
.reel__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; background:#000;
}
.reel__ui{ z-index:4; }
.reel__info{ z-index:3; }
.reel__play{ z-index:3; transition:opacity .2s ease; }
.reel.is-playing .reel__play{ opacity:0; pointer-events:none; }

/* Reel sound toggle pill (tap a reel to turn sound on). */
.reel__sound{
  position:absolute; bottom:14px; right:12px; z-index:5;
  background:rgba(0,0,0,0.5); color:#fff; border:none; border-radius:999px;
  font:600 12px/1 var(--font-body,"Inter",sans-serif); padding:9px 13px; cursor:pointer;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.reel__sound .s-on{ display:none; }
.reel.sound-on .reel__sound .s-off{ display:none; }
.reel.sound-on .reel__sound .s-on{ display:inline; }

/* YouTube embed inside the full-screen viewer (Monitor / long-form). */
.lb__yt{
  width: min(1000px, 92vw, calc(80vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000; border-radius: 20px; overflow: hidden;
}
.lb__yt iframe{ width: 100%; height: 100%; display: block; border: 0; }