/* TDA Studio — interactive homepage styles (loads only on the TDA Studio page template) */
:root{
  --ink:#f4efe9; --muted:#c9bfda; --warm:#b5a838; --glow:#e3d77e;
  --panel:#171717; --panel2:#0a0a0a; --edge:#3d2f5c; --accent:#39d5c9;
  --bg:#000;
  /* brand type system (shared with the subpages) */
  --tda-display:'Fraunces',Georgia,'Times New Roman',serif;
  --tda-sans:'Hanken Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --tda-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
.tda-studio-page *{box-sizing:border-box}
html body.tda-studio-page{margin:0;min-height:100%;background:#000 !important;
  color:var(--ink);font-family:var(--tda-sans)}
.wrap{max-width:1320px;margin:0 auto;padding:24px 20px 60px}

.frame{position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.stage{position:relative}
#hero{width:100%;height:auto;display:block}
.overlay{position:absolute;inset:0;width:100%;height:100%}

/* hotspots */
.hotspot{cursor:pointer}
.hotspot .glow{opacity:0;transition:opacity .28s;mix-blend-mode:screen}
.hotspot .ring{opacity:0;transition:opacity .28s}
.hotspot .hit{fill:#fff;fill-opacity:0}
.hotspot:hover .glow{opacity:.45}
body.cal .hotspot .ring{opacity:.55}
body.cal .hotspot .glow{opacity:.22}
body.cal .hotspot .tagno{opacity:1}
.tagno{opacity:0;font:700 30px 'Segoe UI',sans-serif;fill:#fff;paint-order:stroke;
  stroke:#000;stroke-width:5px;text-anchor:middle;letter-spacing:.5px}

/* spotlight — on hover the room dims and the hovered zone stays lit */
.fx-dim,.fx-focus{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .5s ease}
.fx-dim{background:#000}
.fx-focus{overflow:hidden}
.fx-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(1.07) saturate(1.05)}
.frame.spot .fx-dim{opacity:.5}
.frame.spot .fx-focus{opacity:1}
.topbar,.hint{transition:opacity .5s ease}
.frame.spot .topbar,.frame.spot .hint{opacity:.45}

/* top bar */
.topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  align-items:flex-start;padding:22px 26px;line-height:1.2;
  background:linear-gradient(180deg,rgba(10,6,18,.55),rgba(10,6,18,0))}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;cursor:pointer;
  background:rgba(12,8,20,.40);padding:11px 18px;border-radius:12px;
  border:0;backdrop-filter:blur(9px);
  box-shadow:0 8px 26px rgba(0,0,0,.32);transition:background .16s}
.brand:hover{background:rgba(20,14,30,.5)}
.logo{height:34px;width:auto;display:block;flex:none}
.brand h1{margin:0;font-family:var(--tda-sans);font-size:17px;letter-spacing:.16em;font-weight:700;
  text-shadow:0 2px 10px rgba(0,0,0,.6);color:var(--ink)}
.brand .tag{font-family:var(--tda-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);margin-top:6px}
.nav{display:flex;gap:8px}
.nav a,.nav button{font-family:var(--tda-mono);font-size:14px;letter-spacing:.05em;color:var(--ink);cursor:pointer;
  text-decoration:none;display:inline-block;
  background:rgba(16,11,24,.34);border:0;border-radius:10px;
  padding:9px 16px;backdrop-filter:blur(9px);box-shadow:0 6px 20px rgba(0,0,0,.30);
  text-shadow:0 1px 6px rgba(0,0,0,.5);transition:.16s}
.nav a:hover,.nav button:hover{background:rgba(34,24,46,.52);color:var(--warm)}

.hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:center;
  line-height:1.5;max-width:calc(100% - 28px);text-align:center;
  font-family:var(--tda-mono);font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:#f0e9dd;text-shadow:0 2px 8px rgba(0,0,0,.8);
  background:rgba(10,6,18,.32);padding:8px 16px;border-radius:999px;backdrop-filter:blur(4px)}
.hint b{color:var(--warm)}
.hint kbd{border:1px solid rgba(255,255,255,.4);border-radius:5px;padding:1px 6px;font-size:11px}

/* floating label */
#label{position:fixed;z-index:20;pointer-events:none;transform:translate(-50%,-135%);
  background:linear-gradient(180deg,#2c2145,#20183a);border:1px solid var(--edge);
  padding:8px 14px;border-radius:11px;font-size:13.5px;white-space:nowrap;opacity:0;
  transition:opacity .12s;box-shadow:0 12px 26px rgba(0,0,0,.5)}
#label .k{color:var(--warm);font-weight:700}
#label .s{color:var(--muted);font-size:11px;display:block;margin-top:1px;letter-spacing:.05em}

/* panel */
#scrim{position:fixed;inset:0;background:rgba(8,5,16,.55);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:.28s;z-index:30}
#scrim.on{opacity:1;visibility:visible}
#panel{position:fixed;top:0;right:0;height:100%;width:min(470px,94vw);z-index:31;
  background:linear-gradient(180deg,var(--panel),var(--panel2));border-left:1px solid var(--edge);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.8,.25,1);
  box-shadow:-24px 0 60px rgba(0,0,0,.5);display:flex;flex-direction:column}
#panel.on{transform:translateX(0)}
.p-head{padding:32px 30px 18px;border-bottom:1px solid var(--edge);position:relative}
.p-head .ey{font-family:var(--tda-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--warm)}
.p-head h2{margin:11px 0 0;font-family:var(--tda-display);font-weight:400;font-size:30px;line-height:1.1;color:var(--ink)}
.p-body{padding:24px 30px 44px;overflow-y:auto;line-height:1.65;font-size:16px}
.p-body p{color:var(--muted);margin:0 0 16px}
.p-body h3{font-family:var(--tda-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;margin:24px 0 12px;color:var(--warm)}
.card{display:block;text-decoration:none;color:var(--ink);border:1px solid var(--edge);
  border-radius:12px;padding:14px 16px;margin-bottom:10px;background:rgba(255,255,255,.02);transition:.16s}
.card:hover{border-color:var(--warm);background:rgba(181,168,56,.09);transform:translateX(3px)}
.card .t{font-family:var(--tda-display);font-weight:400;font-size:17px;line-height:1.2;display:block}
.card .m{font-family:var(--tda-mono);color:var(--muted);font-size:12px;margin-top:4px;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.chip{font-family:var(--tda-mono);font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--warm);border:1px solid var(--edge);border-radius:999px;padding:6px 12px}
.cta{display:inline-block;margin-top:12px;font-family:var(--tda-sans);background:linear-gradient(90deg,#e3d77e,#b5a838);
  color:#20200a;font-weight:700;text-decoration:none;padding:12px 20px;border-radius:10px;font-size:14px}
.close{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--edge);background:none;color:var(--ink);cursor:pointer;font-size:17px}
.close:hover{border-color:var(--warm);color:var(--warm)}

/* dynamic (REST-loaded) cards */
.dyn{margin:2px 0 6px}
.dyn-note{color:var(--muted);font-size:13px;font-style:italic;margin:0 0 12px}
.card-proj{display:flex;align-items:center;gap:12px}
.card-proj .cimg{width:56px;height:56px;object-fit:cover;border-radius:8px;flex:none;background:#222}

/* mobile tap menu (hidden on desktop) */
.mobilemenu{display:none}
.mm-head{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--warm);margin:26px 2px 2px}
.mm-div{height:1px;background:var(--edge);opacity:.6;margin:16px 0 4px}
.mobilemenu button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;margin-top:10px;
  background:rgba(255,255,255,.05);border:0;border-radius:12px;padding:15px 17px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);backdrop-filter:blur(6px);transition:background .15s}
.mobilemenu button:hover{background:rgba(255,255,255,.08)}
.mobilemenu button:active{background:rgba(181,168,56,.16)}
.mobilemenu .mt{font-size:16px;font-weight:600}
.mobilemenu .ms{font-size:12px;color:var(--muted);letter-spacing:.02em}

.site-foot{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.08em;
  padding:22px 20px 8px;margin-top:22px;border-top:1px solid rgba(255,255,255,.07)}

/* desktop: the scene covers the whole window — no gaps, no scroll (slight edge crop).
   --avail is the usable height; it subtracts the WP admin bar for logged-in users
   so the bottom of the scene is never pushed off-screen. */
@media (min-width:601px){
  html,body.tda-studio-page{height:100%;overflow:hidden}
  .tda-studio-page .wrap{--avail:100vh;--avail:100dvh;
    max-width:none;padding:0;height:var(--avail)}
  body.admin-bar.tda-studio-page .wrap{--avail:calc(100vh - 32px);--avail:calc(100dvh - 32px)}
  .tda-studio-page .frame{width:100vw;height:100%;border-radius:0;box-shadow:none}
  .tda-studio-page .stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    width:max(100vw,calc(var(--avail)*2600/1418));
    height:max(var(--avail),calc(100vw*1418/2600))}
  .tda-studio-page #hero{width:100%;height:100%}
  .tda-studio-page .site-foot{display:none}
}
@media (min-width:601px) and (max-width:782px){
  body.admin-bar.tda-studio-page .wrap{--avail:calc(100vh - 46px);--avail:calc(100dvh - 46px)}
}

/* small screens */
@media (max-width:600px){
  .wrap{padding:16px 14px 48px}
  .topbar{padding:16px}
  .brand h1{font-size:15px}
  .logo{height:26px}
  .nav{display:none}
  .hint{display:none}
  .mobilemenu{display:block}
}