/**
 * Dupla Portfolio V3 - Interactive 3D GLB Logo (Three.js WebGL)
 * Reacts to cursor movement with realistic 3D tilt, dynamic specular lighting,
 * and idle floating/breathing animation.
 */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hero-logo-3d-wrapper {
  display: block;
  position: relative;
  width: 100%;
  max-width: clamp(280px, 38vw, 540px);
  margin-top: 1.25rem;
  margin-bottom: 2rem;
}

.hero-logo-3d-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  outline: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}

.hero-logo-3d-link:active {
  cursor: grabbing;
}

.hero-logo-3d-link:focus-visible {
  outline: 2px solid var(--text, #000000);
  outline-offset: 6px;
}

.logo-3d-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 940;
  display: block;
  filter: drop-shadow(0px 10px 22px rgba(0, 0, 0, 0.10));
}

.logo-3d-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
}

.logo-3d-canvas.is-ready {
  opacity: 1;
}

.logo-3d-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo-3d-fallback.is-hidden {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .logo-3d-canvas {
    transition: none !important;
  }
}

/* Ajustes Responsive Móvil */
@media screen and (max-width: 767px) {
  .hero-logo-3d-wrapper {
    max-width: 100%;
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
  }
}