/* ═══════════════════════════════════════════════════════════════
   hero.css — Wrapper + rays effect (una sola capa animada)
═══════════════════════════════════════════════════════════════ */

/* ─── HERO WRAPPER ─────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-block-start: var(--nav-h);
  isolation: isolate;
}

.hero__stars {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─── HERO LOGO ─────────────────────────────────────────────── */
.hero__logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__logo {
  width: clamp(240px, 66.5vw, 840px);
  height: auto;
  object-fit: contain;
  animation: heroLogoIn 1s var(--ease-out) 0.3s both;
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)     scale(1);   }
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo { animation: none; }
}

/* ─── RAYS ─────────────────────────────────────────────── */
/*
  Una sola capa — sin overlay, sin mix-blend-mode.
  El problema anterior: stripes white + difference = inversion de color
  (|#fff - var(--hue-blue)| = amarillo, etc.)

  Solucion:
    - Stripes en rgba(255 255 255 / 0.18) — textura sin manchar el color
    - Rainbow usa los tokens del proyecto directamente
    - Animacion en la misma capa, no en un overlay separado
    - Filter: blur + opacity + saturate sobre los colores reales
    - Mask: revela solo esquina top-right, fade suave hacia adentro
*/
.rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      100deg,
      rgba(255 255 255 / var(--rays-stripe-opacity, 0.18))  0%,
      rgba(255 255 255 / var(--rays-stripe-opacity, 0.18))  7%,
      transparent                                           10%,
      transparent                                           12%,
      rgba(255 255 255 / var(--rays-stripe-opacity, 0.18)) 16%
    ),
    repeating-linear-gradient(
      100deg,
      var(--hue-blue)    10%,
      var(--hue-indigo)  16%,
      var(--hue-violet)  22%,
      var(--hue-magenta) 28%,
      var(--hue-purple)  34%,
      var(--hue-cyan)    40%,
      var(--hue-blue)    46%
    );

  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;

  filter:
    blur(var(--rays-blur, 10px))
    opacity(var(--rays-opacity, 55%))
    saturate(var(--rays-saturate, 180%));

  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
          mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

  animation: sruxRays var(--rays-duration, 60s) linear infinite;
}

/* ─── KEYFRAME ───────────────────────────────────────────────── */
@keyframes sruxRays {
  from { background-position:  50% 50%,  50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}

/* ─── REDUCED MOTION ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rays { animation: none; }
}