/* ===========================================================================
   tv3d.css — live 3D / AR viewer for Triovision (Phase 3).
   Wraps a Google <model-viewer>. Roll back by removing tv3d.css/js, the
   <figure class="tv3d"> block, the model-viewer CDN <script>, and the links.
   =========================================================================== */

.tv3d { max-width: 1000px; margin: clamp(40px, 6vw, 72px) auto 0; }

.tv3d-head { text-align: center; margin-bottom: 24px; }
.tv3d-head h3 { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 2.8vw, 30px); letter-spacing: -0.015em; line-height: 1.15; color: var(--text); }
.tv3d-head p { font-size: 15px; color: var(--text-2); margin-top: 10px; max-width: 54ch; margin-inline: auto; line-height: 1.5; }

.tv3d-stage {
  position: relative;
  border-radius: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  background: radial-gradient(120% 95% at 50% 18%, #12333a 0%, #0a1620 58%, #060e16 100%);
  border: 1px solid rgba(69, 214, 180, 0.18);
  box-shadow: 0 34px 84px -38px rgba(0, 0, 0, 0.62), 0 0 100px -34px rgba(69, 214, 180, 0.25);
}

.tv3d-stage model-viewer {
  width: 100%;
  height: clamp(360px, 56vh, 560px);
  display: block;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: #45d6b4;
  --progress-mask: rgba(0, 0, 0, 0);
}

/* AR button — model-viewer only shows the [slot="ar-button"] on AR-capable devices */
.tv3d-ar {
  position: absolute;
  bottom: 16px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 14px; font-weight: 600; color: #052b24;
  background: linear-gradient(180deg, #5fe0c4, #2bbfa2);
  border: none; border-radius: 999px; padding: 11px 20px; cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(43, 191, 162, 0.6);
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}
.tv3d-ar:hover { transform: translateX(-50%) translateY(-1px); filter: brightness(1.05); }
.tv3d-ar svg { width: 17px; height: 17px; }

.tv3d-hint {
  position: absolute; top: 14px; left: 16px;
  font-size: 12px; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}

.tv3d-note { text-align: center; margin-top: 16px; font-size: 14px; color: var(--text-2); }
.tv3d-note b { color: var(--text); font-weight: 600; }

@media (max-width: 520px) { .tv3d-hint { display: none; } }