/* Trialta homepage hero 3D visual (standalone mockup).
   Every selector is scoped to `.hero .visual`; no existing site rule is changed.
   At 980px and below the site's own CSS hides `.visual` (and with it the canvas,
   the click hint and the hidden controls panel). */

/* Taller visual on large desktop screens only (the site's base height is 700px). */
@media (min-width: 981px) {
  .hero .visual { height: clamp(700px, 80vh, 880px); }
}

.hero .visual > .hero3d-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
  touch-action: pan-y;                 /* never trap vertical scrolling on touch screens */
}
.hero .visual.hero3d-ready > .hero3d-canvas { opacity: 1; }

/* No static artwork in .visual: until the first assembled 3D frame has rendered, the area shows only the
   hero's own navy background. If 3D cannot start, it stays that way (no fallback image). */

/* Hover / tap label: rounded label box + leader line to the hovered component (positioned by hero-3d.js) */
.hero .visual > .hero3d-leader {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  display: none;
}
.hero .visual > .hero3d-leader.is-on { display: block; }
.hero .hero3d-leader-line { fill: none; stroke: #fb8b4e; stroke-width: 1.5; stroke-linejoin: round; }
.hero .hero3d-leader-dot { fill: #2bd8e8; stroke: #090c14; stroke-width: 1.5; }
.hero .hero3d-leader-ring { fill: none; stroke: rgba(43, 216, 232, 0.45); stroke-width: 1; }

.hero .visual > .hero3d-callout {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  gap: 3px;
  max-width: min(300px, calc(100% - 24px));
  padding: 10px 14px 11px;
  border-radius: 12px;
  background: rgba(9, 12, 20, 0.9);
  border: 1px solid rgba(251, 139, 78, 0.75);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.hero .visual > .hero3d-callout.is-on { display: flex; }
.hero .hero3d-callout-kind { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2bd8e8; }
.hero .hero3d-callout-title { font-family: 'Space Grotesk', 'Inter', Arial, sans-serif; font-size: 14px; font-weight: 600; color: #f5f7fa; }
.hero .hero3d-callout-detail { font-size: 11.5px; line-height: 1.4; color: #98a2b8; }
/* Controls + disclaimer, along the bottom of the visual */
.hero .visual > .hero3d-panel {
  position: absolute;
  left: 8px;
  right: 96px;                         /* clear of the site's fixed chat button (bottom-right) */
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;                /* only the button takes clicks */
}
.hero .hero3d-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.hero .hero3d-toggle {
  pointer-events: auto;
  font: 600 12.5px/1 'Inter', Arial, sans-serif;
  color: #f5f7fa;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hero .hero3d-toggle:hover { background: rgba(251, 139, 78, 0.14); border-color: #fb8b4e; color: #fb8b4e; }
.hero .hero3d-toggle:focus-visible { outline: 2px solid #2bd8e8; outline-offset: 3px; }
.hero .hero3d-toggle[aria-pressed="true"] { border-color: rgba(43, 216, 232, 0.6); }
.hero .hero3d-hint { font-size: 11.5px; letter-spacing: 0.02em; color: rgba(152, 162, 184, 0.85); }
.hero .hero3d-disclaimer {
  margin: 0;
  max-width: min(100%, 92ch);          /* stays clear of the site's fixed chat button */
  font-size: 11px;
  line-height: 1.45;
  color: rgba(152, 162, 184, 0.9);
}

/* The (invisible) panel keeps the same size before and after the scene is ready, so the very first
   rendered frame uses the final framing: no jump in model position or scale when the canvas fades in.
   Until the scene is ready the toggle keeps its layout box but is hidden and not focusable. */
.hero .hero3d-toggle[hidden] { display: inline-block; visibility: hidden; }

/* Clean hero: no visible text below the model. The panel keeps its layout space so the approved
   model framing (scale and position) is unchanged. The hint and disclaimer are not shown (and are
   not read out); the toggle stays available to keyboard users only, appearing while it has focus.
   Mouse and touch users explode / reassemble by clicking the model itself. */
.hero .hero3d-hint,
.hero .hero3d-disclaimer { visibility: hidden; }
.hero .hero3d-toggle { opacity: 0; pointer-events: none; }
.hero .hero3d-toggle:focus-visible { opacity: 1; pointer-events: auto; }

/* Click hint: small grey icon + text, centred under the model; not a control (clicks pass to the model).
   Shown only once the 3D model is running; the visual (and so the hint) is hidden at 980px and below. */
.hero .visual > .hero3d-clickhint {
  position: absolute;
  left: var(--hero3d-model-cx, 50%);
  top: calc(var(--hero3d-model-bottom, 85%) + 26px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
  align-items: center;
  gap: 7px;
  margin: 0;
  white-space: nowrap;
  font: 500 12px/1 'Inter', Arial, sans-serif;
  letter-spacing: 0.02em;
  color: rgba(152, 162, 184, 0.8);
  pointer-events: none;
  user-select: none;
}
.hero .visual.hero3d-ready > .hero3d-clickhint { visibility: visible; opacity: 1; transition: opacity 0.8s ease, visibility 0s linear 0s; }
.hero .hero3d-clickhint-icon { flex: none; display: block; }
@media (max-width: 980px) { .hero .visual > .hero3d-clickhint { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero .visual > .hero3d-canvas,
  .hero .visual > .hero3d-callout,
  .hero .visual > .hero3d-clickhint,
  .hero .visual.hero3d-ready > .hero3d-clickhint,
  .hero .hero3d-toggle { transition: none; }
}