/* =======================================================================
   hero3d.css — Estilos de la escena 3D del hero (loader + canvas).
   Scopeado con IDs/clases propias para NO interferir con el CSS de la web.
   ======================================================================= */

/* ── Canvas incrustado dentro de #hero-3d ─────────────────────────────── */
#hero-3d {
  position: relative;
  /* ancla el canvas absoluto de abajo */
}

#hero3d-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ── Bloqueo de scroll mientras el loader está visible ────────────────── */
html.hero3d-loading,
html.hero3d-loading body {
  overflow: hidden !important;
}

/* ── Fallback si WebGL no está disponible ─────────────────────────────── */
#webgl-fallback {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: grid;
  place-items: center;
  padding: 6vw;
  text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, #150a26, #0a0a0a);
  color: rgba(244, 238, 233, 0.7);
  font-family: "Space Grotesk", system-ui, sans-serif;
  line-height: 1.7;
}

/* CRÍTICO: que el atributo HTML `hidden` realmente oculte (display:grid lo anula). */
#webgl-fallback[hidden] {
  display: none;
}

/* ── Loader a pantalla completa ───────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #0a0a0a;
  background-image: radial-gradient(120% 120% at 50% 35%,
      rgba(58, 31, 107, 0.18),
      transparent 60%);
}

#loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 5vh, 52px);
}

/* Logo animado (clip-reveal + fade) */
#loader-logo {
  text-align: center;
  opacity: 0;
  animation: hero3d-logoIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

#loader-logo svg {
  width: clamp(220px, 42vw, 420px);
  height: auto;
  display: block;
  margin: 0 auto;
  clip-path: inset(0 100% 0 0);
  animation: hero3d-wipe 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.loader-wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 64px;
  letter-spacing: 0.14em;
  fill: #f4eee9;
}

@keyframes hero3d-logoIn {
  to {
    opacity: 1;
  }
}

@keyframes hero3d-wipe {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Anillo de progreso */
#loader-progress {
  position: relative;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
}

.loader-ring-bg {
  fill: none;
  stroke: rgba(244, 238, 233, 0.12);
  stroke-width: 3;
}

#loader-ring-progress {
  fill: none;
  stroke: #f5c542;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(245, 197, 66, 0.45));
  transition: stroke-dashoffset 0.1s linear;
}

#loader-number {
  position: absolute;
  font-family: "Fraunces", Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  color: #f4eee9;
  font-variant-numeric: tabular-nums;
}

.loader-hint {
  margin: 0;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: rgba(244, 238, 233, 0.62);
  text-transform: uppercase;
}

/* Pulso de espera mientras cargan los CDN (antes de que el JS tome el anillo) */
#loader-ring-progress:not([style*="stroke-dashoffset"]) {
  animation: hero3d-ringPulse 1.8s ease-in-out infinite;
}

@keyframes hero3d-ringPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.85;
  }
}

/* Reduced motion: sin animaciones agresivas */
@media (prefers-reduced-motion: reduce) {

  #loader-logo,
  #loader-logo svg {
    animation: none;
    opacity: 1;
    clip-path: none;
  }
}

/* ============== Overlay del hero (texto sobre la escena 3D) ============== */
.hero3d-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  /* sobre el canvas, bajo el header de la página */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* ancla el contenido abajo del hero */
  padding: 0 clamp(20px, 4vw, 56px) clamp(48px, 9vh, 100px);
  pointer-events: none;
  /* deja pasar el ratón al canvas (parallax) */
  font-family: "Space Grotesk", system-ui, sans-serif;
}

.hero3d-overlay-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.hero3d-overlay a,
.hero3d-overlay button {
  pointer-events: auto;
}

/* Oculto antes de la revelación (GSAP lo muestra) */
.hero3d-overlay [data-reveal] {
  opacity: 0;
}

.hero3d-lead {
  max-width: 60ch;
}

.hero3d-aside {
  text-align: right;
  max-width: 38ch;
}

.hero-pill {
  font-family: var(--font-sans-regular);
  display: inline-block;
  font-size: 14px;
  letter-spacing: 0.24em;
  color: #f4eee9;
  padding: 8px 16px;
  margin-bottom: clamp(16px, 2.4vh, 26px);
}

.hero-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1.0;
  margin: 0;
  letter-spacing: -0.02em;
  color: #f4eee9;
  text-shadow: 0 8px 50px rgba(0, 0, 0, 0.5);
}

/* "posgrados" en amarillo ESAM, SIN itálica ni serif */
.hero-title em {
  font-style: normal;
  font-weight: 500;
  color: #f5c542;
}

/* Enlaces del hero (lado derecho) */
.hero3d-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-end;
}

.hero3d-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  color: #f4eee9;
  text-decoration: none;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(244, 238, 233, 0.16);
  transition: color 0.35s ease, border-color 0.35s ease;
}

.hero3d-link svg {
  color: #f5c542;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero3d-link:hover,
.hero3d-link:focus-visible {
  color: #f5c542;
  border-color: #f5c542;
}

.hero3d-link:hover svg,
.hero3d-link:focus-visible svg {
  transform: translateX(4px);
}

/* Móvil: todo a la izquierda y apilado */
@media (max-width: 860px) {

  /* Composición A: texto apilado y anclado abajo */
  .hero3d-overlay {
    padding: 0 clamp(18px, 5vw, 28px) clamp(28px, 6vh, 56px);
  }

  .hero3d-overlay-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .hero3d-lead {
    max-width: 100%;
  }

  .hero-title {
    font-size: clamp(38px, 11vw, 60px);
  }

  .hero3d-aside {
    text-align: left;
    max-width: 100%;
  }

  .hero3d-links {
    align-items: flex-start;
    width: 100%;
  }

  /* Degradado de legibilidad (DESACTIVADO por defecto).
     Si el texto no se lee bien sobre el isotipo, cambia opacity a 1. */
  .hero3d-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(10, 8, 20, 0.85) 0%,
        rgba(10, 8, 20, 0.5) 35%,
        transparent 60%);
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    /* ← cámbialo a 1 para activar el degradado */
    transition: opacity 0.3s ease;
  }
}