/**
 * TÄLU · Medalla TERNERO 3D · Diego 2026-05-09
 *
 * Reemplaza el <img class="seal-ternero"> estático por un <model-viewer>
 * que rota suavemente en Y + vaivén pitch via JS + cardan wobble via CSS.
 *
 * Triple capa de movimiento (cero interacción):
 *  1. auto-rotate Y interno del model-viewer
 *  2. camera-orbit dinámico (pitch sinusoidal, en seal-medallion-3d.js)
 *  3. cardan-breath: rotación X sutil del contenedor (efecto profundidad)
 *
 * Uso:
 *   <link rel="stylesheet" href="../styles/seal-medallion-3d.css">
 *   <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
 *   <script src="../scripts/seal-medallion-3d.js" defer></script>
 *
 *   <model-viewer ... class="seal-ternero is-medallion-3d"></model-viewer>
 */

model-viewer.is-medallion-3d{
  display: block;
  background: transparent !important;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  /* SIN interacción posible */
  pointer-events: none !important;
  /* Wobble cardan exterior — multiplica la sensación 3D */
  animation: cardan-breath 7s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
  /* Fade in cuando carga (Diego nota: sombra negra el primer segundo) */
  opacity: 1;
  transition: opacity .35s ease;
}
/* Antes de cargar: invisible (no muestra sombra negra default).
   Usamos data-mv-loaded que setea el JS al disparar el evento 'load' (el atributo [loaded] nativo no es público). */
model-viewer.is-medallion-3d:not([data-mv-loaded]){
  opacity: 0;
}
model-viewer.is-medallion-3d[data-mv-loaded]{
  opacity: 1;
}

/* Default 140x140 — usado por hero-seal y otros contextos sin override.
   Sin !important para que .por-que-seal-wrap, .hero-seal-massive, etc puedan dar otro tamaño. */
model-viewer.is-medallion-3d.seal-ternero{
  width: 140px;
  height: 140px;
  min-width: 140px;
  min-height: 140px;
}

/* hero-seal: parent es position:absolute sin dimensiones — forzar 140 */
.hero-seal model-viewer.is-medallion-3d{
  width: 140px !important;
  height: 140px !important;
  min-width: 140px;
  min-height: 140px;
}

/* por-que-seal-wrap: 320×320 (Diego nota: estaba mostrandose 140 muy chiquito) */
.por-que-seal-wrap model-viewer.is-medallion-3d{
  width: 320px !important;
  height: 320px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}
@media (max-width: 900px){
  .por-que-seal-wrap model-viewer.is-medallion-3d{
    width: 220px !important; height: 220px !important;
  }
}

/* hero-seal-massive (ternero.html): 320×320 grande */
.hero-seal-massive.is-medallion-3d,
model-viewer.is-medallion-3d.hero-seal-massive{
  width: 320px !important;
  height: 320px !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* cta-card "Empieza tu rito" (ternero.html): 90×90 chico arriba del título */
.cta-card model-viewer.is-medallion-3d{
  width: 90px !important;
  height: 90px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 auto 24px;
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.5));
}

/* Pack-familia .hero-fam-seal: 56% del padre (preservar) */
.hero-fam-seal.is-medallion-3d,
model-viewer.is-medallion-3d.hero-fam-seal{
  width: 56% !important;
  height: 56% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: center;
}

@keyframes cardan-breath{
  0%, 100% { transform: perspective(1200px) rotateX(0deg) rotateY(0deg); }
  25%      { transform: perspective(1200px) rotateX(3deg) rotateY(-2deg); }
  50%      { transform: perspective(1200px) rotateX(0deg) rotateY(0deg); }
  75%      { transform: perspective(1200px) rotateX(-3deg) rotateY(2deg); }
}
/* Pack-familia: el medalla está en absolute con translate, así que el cardan-breath debe respetar el translate */
.hero-fam-seal.is-medallion-3d{
  animation: cardan-breath-centered 7s ease-in-out infinite;
}
@keyframes cardan-breath-centered{
  0%, 100% { transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) rotateY(0deg); }
  25%      { transform: translate(-50%, -50%) perspective(1200px) rotateX(3deg) rotateY(-2deg); }
  50%      { transform: translate(-50%, -50%) perspective(1200px) rotateX(0deg) rotateY(0deg); }
  75%      { transform: translate(-50%, -50%) perspective(1200px) rotateX(-3deg) rotateY(2deg); }
}

@media (prefers-reduced-motion: reduce){
  model-viewer.is-medallion-3d{
    animation: none;
  }
}