/* The interactive 3D stage inside the hero card (see js/hero3d.js). */
.hero3d { position: relative; height: 620px;
  background: radial-gradient(closest-side at 50% 48%, rgba(255, 244, 220, 0.07), transparent 70%); }
.hero3d-stage { position: absolute; inset: 0; display: grid; place-items: center; cursor: grab;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.hero3d-stage.is-dragging { cursor: grabbing; }
.hero3d-stage:focus-visible { box-shadow: inset 0 0 0 3px rgba(91, 141, 239, 0.7); border-radius: 32px; }
.hero3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.hero3d.is-ready .hero3d-canvas { opacity: 1; }

.hero3d-ring { position: relative; width: min(520px, 84%); aspect-ratio: 1; pointer-events: none; will-change: transform;
  opacity: 0; transition: opacity 500ms ease; }
.hero3d.is-ready .hero3d-ring { opacity: 1; }
.hero3d-ring text { fill: rgba(255, 255, 255, 0.86); font: 500 22px Inter, system-ui, sans-serif; letter-spacing: 0.32em; }

.hero3d-hint { position: absolute; left: 50%; bottom: 20px; margin: 0; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px; font-size: 13px; color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  pointer-events: none; opacity: 0; transition: opacity 300ms ease; }
.hero3d.is-ready .hero3d-hint { opacity: 1; }
.hero3d.is-ready .hero3d-hint.is-hidden { opacity: 0; }

@media (max-width: 760px) {
  .hero3d { height: 380px; }
  .hero3d-ring { width: min(310px, 84%); }
  .hero3d-ring text { font-size: 24px; }
  .hero3d-hint { bottom: 10px; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero3d-hint { background: #2a2c33; -webkit-backdrop-filter: none; backdrop-filter: none; }
}