/**
 * Objeto a - Public styles
 *
 * Hoja de estilos específica del plugin [objeto_a].
 * Se encola de forma condicional solo en las páginas que usan el shortcode.
 */

/* Variables de diseño */
:root {
  --oa-bg: #0a0a0a;
  --oa-text: #e5e5e5;
  --oa-font-body: 'Inter', sans-serif;
  --oa-font-title: 'Playfair Display', serif;
}

/* Reset del contenedor */
.objeto-a-app {
  background-color: var(--oa-bg);
  color: var(--oa-text);
  font-family: var(--oa-font-body);
  scroll-behavior: smooth;
}

.objeto-a-app h1,
.objeto-a-app h2,
.objeto-a-app h3,
.objeto-a-app .title-font {
  font-family: var(--oa-font-title);
}

/* Tarjetas glassmorphism */
.objeto-a-app .glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s ease;
}

.objeto-a-app .glass-card:hover {
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.1);
}

/* Objeto flotante (botón "Entrar al Vacío") */
.objeto-a-app .floating-obj {
  animation: oa-floating 4s ease-in-out infinite;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
  filter: blur(0.5px);
  user-select: none;
  -webkit-user-select: none;
}

.objeto-a-app .floating-obj:hover {
  filter: blur(0);
}

@keyframes oa-floating {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Revelado al scroll */
.objeto-a-app .scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.5, 0, 0, 1), transform 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.objeto-a-app .scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fallback: gradiente iridiscente */
.objeto-a-app .objeto-a-hero-gradient {
  position: relative;
  background-color: #050505;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.35) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(168, 85, 247, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(34, 211, 238, 0.28) 0%, transparent 40%),
    radial-gradient(circle at 30% 80%, rgba(236, 72, 153, 0.25) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(250, 204, 21, 0.12) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #1a0a2e 50%, #0a0a0a 100%);
  background-blend-mode: screen, screen, screen, screen, normal, normal;
}

.objeto-a-app .objeto-a-hero-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 60px, rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 61px),
    repeating-linear-gradient(-45deg, transparent 0, transparent 60px, rgba(255,255,255,0.02) 60px, rgba(255,255,255,0.02) 61px);
  pointer-events: none;
}

/* Tooltips de LaTeX */
.objeto-a-app .latex-tooltip {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 16rem;
  font-size: 0.875rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background: #fff;
  color: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  z-index: 20;
}

.objeto-a-app .latex-wrapper:hover .latex-tooltip {
  opacity: 1;
}

/* Canvas de Three.js */
.objeto-a-app [data-objeto-a="canvas-container"] {
  position: relative;
}

.objeto-a-app [data-objeto-a="canvas-container"] canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* Mejoras de accesibilidad: reducir movimiento */
@media (prefers-reduced-motion: reduce) {
  .objeto-a-app .floating-obj,
  .objeto-a-app .scroll-reveal,
  .objeto-a-app .glass-card {
    animation: none;
    transition: none;
  }

  .objeto-a-app .scroll-reveal {
    opacity: 1;
    transform: none;
  }
}

/* Mobile: desactivar tooltips al tocar donde no hay hover */
@media (hover: none) and (pointer: coarse) {
  .objeto-a-app .latex-tooltip {
    display: none;
  }
}