/* =======================================================================
   Hero del eclipse — zero-chaos.com
   Sustituye al hero de partículas antiguo (.hero-particles, .hero-glow,
   .hero--animated-bg). Se carga después de style.css.
   ======================================================================= */

/* --- la escena, detrás de todo ----------------------------------------- */
#eclipse{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; z-index:0;
  background:#0a0a1a;   /* = --bg-primary */
  touch-action:pan-y;          /* el scroll vertical sigue siendo del usuario */
  will-change:opacity;
}
@media (hover:hover){
  #eclipse{cursor:grab}
  #eclipse.dragging{cursor:grabbing}
}

/* Velo entre la escena y el texto: la escena sigue viva detrás, pero el
   contenido conserva contraste. Su opacidad la controla el scroll. */
.eclipse-veil{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,
              rgba(10,10,26,0) 0%,
              rgba(10,10,26,.72) 26%,
              rgba(10,10,26,.82) 100%);
  will-change:opacity;
}

/* --- lectura de estado, arriba a la derecha ---------------------------- */
.eclipse-readout{
  position:fixed; right:22px; top:calc(var(--nav-height) + 28px); z-index:3; text-align:right;
  font-family:"JetBrains Mono", ui-monospace, Consolas, monospace;
  font-size:.62rem; font-weight:300; letter-spacing:.13em; color:#74747f;
  line-height:2; pointer-events:none; user-select:none;
  transition:opacity .4s;
}
.eclipse-readout b{
  font-weight:500; color:#e9e9ef; font-variant-numeric:tabular-nums;
}
.eclipse-readout .totality{
  opacity:0; transition:opacity .5s; color:#fff; letter-spacing:.22em;
}
.eclipse-readout .totality.on{opacity:1}

/* --- el hero ------------------------------------------------------------ */
/* Se neutraliza el decorado del hero anterior. */
.hero::before,
.hero--animated-bg::after,
.hero-glow,
.hero-particles{ display:none !important; content:none !important; }

.hero{
  position:relative; z-index:2;
  min-height:100svh;
  /* Se conserva el centrado del sitio, pero el bloque baja: el eclipse
     se dibuja en la mitad superior y no debe quedar detrás del texto. */
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-end;
  padding:calc(var(--nav-height) + 40px) 24px 5vh;
  background:transparent;
  overflow:visible;
  /* Los gestos sobre el hueco van al canvas; el contenido los recupera. */
  pointer-events:none;
}
.hero__content{ pointer-events:none; position:relative; }
.hero__content > *{ pointer-events:auto; }

/* El hero real lleva mucha copia y el disco queda justo detras. En vez de
   apagar la escena, se oscurece solo lo que hay detras del texto. */
.hero__content::before{
  content:''; position:absolute; inset:-48px -72px; z-index:-1;
  pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse at center,
              rgba(10,10,26,.93) 0%,
              rgba(10,10,26,.86) 45%,
              rgba(10,10,26,.55) 72%,
              rgba(10,10,26,0) 100%);
}

/* El nombre lo escriben las partículas: este elemento existe para que el
   motor lo mida y rasterice, y toma el relevo al completarse el eclipse. */
.hero__wordmark{
  margin:0 0 .28em; opacity:0;
  font-family:"Playfair Display", Georgia, serif; font-weight:700;
  font-size:clamp(1.9rem, 5.4vw, 3.6rem); letter-spacing:-.015em; line-height:1;
  background:linear-gradient(174deg,#fdfdfd 0%,#b9b9c4 22%,#5c5c66 46%,
                             #efeff5 58%,#87878f 74%,#2f2f36 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.2))
         drop-shadow(0 8px 30px rgba(0,0,0,.9));
  user-select:none; white-space:nowrap;
}
.no-motion .hero__wordmark{opacity:1}

.hero__title{
  /* El typewriter ya no lo toca: se muestra sin más. */
  visibility:visible !important;
  font-family:"Playfair Display", Georgia, serif; font-weight:700;
  font-size:clamp(1.5rem, 4.2vw, 2.5rem); line-height:1.22;
  letter-spacing:-.01em; margin:0 0 18px; color:#e9e9ef;
  text-shadow:0 2px 18px rgba(10,10,26,.95);
}
.hero__subtitle{
  font-size:.86rem; font-weight:300; line-height:1.95; color:#b7b7c2;
  max-width:56ch; margin:0 auto 28px;
  text-shadow:0 2px 14px rgba(10,10,26,.9);
}
.hero__cta{ margin:0 0 26px; }
.hero__anchor{
  margin:26px auto 0; padding:18px 0 0; max-width:52ch;
  background:none; border:0; border-radius:0;
  border-top:1px solid rgba(139,92,246,.28);
  font-size:.78rem; font-weight:300; line-height:1.9; color:#74747f;
  transition:color .6s, border-color .6s;
  text-shadow:0 2px 14px rgba(10,10,26,.9);
}
.hero__anchor[data-state="ordered"]{
  color:#cfcfd8; border-top-color:rgba(139,92,246,.75);
}

.eclipse-cue{
  margin:26px 0 0; font-family:"JetBrains Mono", ui-monospace, monospace;
  font-size:.6rem; font-weight:300; letter-spacing:.2em; color:#74747f;
  transition:opacity .4s;
}

/* --- la primera sección deja ver la escena ----------------------------- */
/* #orden es .section--alt y su fondo propio taparía el eclipse entero. */
#orden{ background:transparent; position:relative; z-index:2; }
#orden h2, #orden h3, #orden p, #orden li{
  text-shadow:0 2px 14px rgba(10,10,26,.9);
}

/* El resto de la página va por encima del velo con normalidad. */
main, .section{ position:relative; z-index:2; }

@media (max-width:640px){
  .eclipse-readout{top:calc(var(--nav-height) + 16px); right:16px; font-size:.56rem}
  .hero{padding-bottom:6vh}
  .hero__anchor{font-size:.74rem}
}