/* 3D viewer facade — poster first, WebGL only on request.
   Used by resources/views/partials/three-d-facade.blade.php */

.v3d{margin:0}
.v3d-frame{position:relative;width:100%;min-height:clamp(320px,62vh,720px);background:#0B0B0B;overflow:hidden}
.v3d-poster{min-height:clamp(320px,62vh,720px);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:36px 24px;text-align:center;color:#fff;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,205,5,.14), transparent 58%),
    linear-gradient(160deg,#0B0B0B 0%,#161513 55%,#0B0B0B 100%)}
.v3d-glyph{font-size:38px;line-height:1;color:#FFCD05;opacity:.85}
.v3d-name{margin:0;font-family:"Fraunces",Georgia,serif;font-size:clamp(22px,3.2vw,34px);font-weight:500;letter-spacing:-.01em}
.v3d-hint{margin:0;max-width:46ch;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.v3d-load{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;margin-top:8px;
  padding:12px 22px;border-radius:99px;border:1px solid var(--v3d-accent,#FFCD05);
  color:var(--v3d-accent,#FFCD05);font:600 13.5px/1 system-ui,-apple-system,sans-serif;
  transition:background .16s,color .16s}
.v3d-load:hover,.v3d-load:focus-visible{background:var(--v3d-accent,#FFCD05);color:#0B0B0B}
.v3d-load:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v3d-size{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;opacity:.7;
  border-left:1px solid currentColor;padding-left:9px}
.v3d-note{margin:2px 0 0;font-size:11.5px;line-height:1.5;color:rgba(255,255,255,.42);max-width:44ch}
.v3d-note a{color:#FFCD05}
.v3d-canvas{display:block;width:100%;height:clamp(320px,62vh,720px);border:0}
.v3d-canvas[hidden]{display:none}
.v3d.is-loading .v3d-poster{opacity:.35;transition:opacity .2s}
.v3d.is-loaded .v3d-poster{display:none}

/* TAB 1 — minimalist centered progress ring; the frame never flashes white */
.v3d-loader{display:none;position:absolute;inset:0;z-index:5;place-items:center;background:#0B0B0B}
.v3d.is-loading .v3d-loader{display:grid}
.v3d-ring{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,205,5,.22);border-top-color:#FFCD05;animation:v3dspin .9s linear infinite}
@keyframes v3dspin{to{transform:rotate(360deg)}}

/* TAB 1 — immersive mode: WebGL canvas behind everything (z-0), glass HUD floats above */
.v3d.is-live .v3d-frame{position:fixed;inset:0;z-index:120;min-height:0}
.v3d.is-live .v3d-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0}
body.v3d-live{overflow:hidden}
.v3d-hud{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:6;
  display:flex;align-items:center;gap:12px;padding:8px 10px 8px 18px;border-radius:999px;
  background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-size:13px;max-width:min(92vw,640px)}
.v3d-hud-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}
.v3d-close{all:unset;cursor:pointer;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.12);
  color:#fff;font:600 12.5px/1 system-ui,-apple-system,sans-serif;white-space:nowrap}
.v3d-close:hover{background:#FFCD05;color:#0B0B0B}
.v3d-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* One-time gesture hint when the scene goes live */
.v3d-gesture-hint{display:none;position:absolute;bottom:calc(150px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:6;
  background:rgba(0,0,0,.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;padding:8px 14px;border-radius:999px;white-space:nowrap}
.v3d.is-live .v3d-gesture-hint{display:block}

/* Mobile: HUD drops to the thumb zone (clear of the bottom tab bar), close gets a 48px target */
@media(max-width:820px){
  .v3d-hud{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:9px 10px 9px 16px}
  .v3d-close{min-height:48px;padding:12px 18px;font-size:13.5px}
}

/* Lightweight mode: the poster stays, the button remains, but nothing prefetches. */
.kicc-never .v3d-load{background:transparent}

@media(prefers-reduced-motion:reduce){.v3d-load{transition:none}.v3d-ring{animation-duration:2.2s}}
@media(max-width:640px){
  .v3d-poster{padding:28px 18px}
  .v3d-hint{font-size:12.5px}
}