/* =====================================================
   hero.css — Cyber Grid + Parallax + Terminal + Glass Card
   Mobile-first · 60fps · GPU-accelerated
   ===================================================== */

.hero {
  position: relative;
  min-height: 100svh; /* small viewport (mobile-friendly) */
  display: flex;
  align-items: center;
  padding-block: var(--space-9) var(--space-8);
  padding-top: calc(var(--header-height-sm) + var(--space-6));
  overflow: hidden;
  isolation: isolate;
}

/* Fade al fondo del hero: la cuadrícula + orbs se desvanecen
   suavemente hacia bg-primary antes de pasar a la siguiente sección.
   z-index: 5 (encima de bg layers, debajo del contenido a z-index 10). */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--bg-primary) 100%
  );
  pointer-events: none;
  z-index: 5;
}

@media (min-width: 768px) {
  .hero {
    min-height: 100vh;
    padding-top: calc(var(--header-height) + var(--space-7));
    padding-block: var(--space-10) var(--space-9);
  }
}

/* ---------- Background grid (layer 1: SVG-ish perspective grid) ---------- */
.hero__bg-grid {
  position: absolute;
  inset: -10% -5% -5% -5%;
  z-index: -2;
  background-image:
    linear-gradient(rgba(73, 197, 182, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73, 197, 182, 0.15) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  /* 3D del grid (perspective + tilt + offset + escala).
     ⚠️ JS NO debe escribir `style.transform` aquí — lo sobrescribiría.
     El parallax se aplica vía la propiedad individual `translate`
     (ver más abajo), que se compone con este `transform` sin pisarlo. */
  transform: perspective(800px) rotateX(60deg) translateY(15%) scale(1.4);
  transform-origin: center bottom;
  will-change: transform, translate;
  /* Parallax vertical: --parallax-bg-y se actualiza desde JS en cada scroll.
     Como `translate` se evalúa ANTES que `transform`, la traslación ocurre
     en espacio de pantalla y el resto del 3D (rotateX/scale) la proyecta
     sobre el plano inclinado → mantiene el efecto "scroll sobre grid 3D". */
  translate: 0 var(--parallax-bg-y, 0px);
}

@media (min-width: 768px) {
  .hero__bg-grid {
    background-size: 72px 72px;
  }
}

/* ---------- Big blurred radial that follows the cursor (layer 2) ---------- */
.hero__bg-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(73, 197, 182, 0.55) 0%,
    rgba(73, 197, 182, 0.25) 35%,
    transparent 70%
  );
  filter: blur(100px);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
  /* JS sets transform: translate3d(...) each frame (lerped) */
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
  transition: opacity var(--dur-slow) var(--ease-smooth);
}

@media (min-width: 1024px) {
  .hero__bg-blur {
    width: 560px;
    height: 560px;
    opacity: 0.7;
  }
}

/* ---------- Ambient color blobs (layer 3: drift slowly) ---------- */
.hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  pointer-events: none;
  z-index: -1;
  animation: orb-drift 20s ease-in-out infinite alternate;
}

.hero__bg-orb--1 {
  top: 10%;
  left: -10%;
  width: 320px;
  height: 320px;
  background: var(--accent-color);
}

.hero__bg-orb--2 {
  bottom: -10%;
  right: -10%;
  width: 380px;
  height: 380px;
  background: var(--accent-hover);
  animation-delay: -8s;
  animation-duration: 25s;
}

@keyframes orb-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(40px, -30px, 0) scale(1.1); }
}

/* ---------- Content wrapper (parallax target 0.08x) ---------- */
.hero__inner {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
  will-change: translate;
  /* Parallax sutil del contenido: usa la propiedad individual `translate`
     (idempotente con cualquier `transform` que se añada en hover/animaciones).
     JS escribe la variable --parallax-content-y en cada frame. */
  translate: 0 var(--parallax-content-y, 0px);
}

/* ---------- Glass card (sostiene el contenido) ---------- */
.hero__card {
  position: relative;
  padding: var(--space-4) var(--space-3);
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.04),
    0 8px 32px -8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  isolation: isolate;
}

/* Spotlight glow (cursor-following).
   Variables --mouse-x / --mouse-y son actualizadas por initSpotlight()
   en animations.js. Pointer-events:none → no bloquea clicks.
   z-index:0 → queda DEBAJO del contenido (que tiene z-index:1). */
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 320px
      at calc(var(--mouse-x, 50%) * 1px)
      calc(var(--mouse-y, 50%) * 1px),
    rgba(73, 197, 182, 0.5),
    rgba(73, 197, 182, 0.1) 40%,
    transparent 65%
  );
  filter: blur(40px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--dur-base) var(--ease-smooth);
  will-change: opacity, background;
}

.hero__card:hover::before {
  opacity: 0.9;
}

/* Contenido del card por encima del spotlight */
.hero__card > * {
  position: relative;
  z-index: 1;
}

/* ===== Border Glow (data-sweep) — REACTIVO AL MOUSE =====
   ::after con conic-gradient + mask para mostrar sólo el borde.
   El ángulo se controla con la CSS var --border-angle (actualizada por JS
   según la posición del cursor sobre la card). El "punto verde" del
   gradiente se posiciona justo donde está el cursor. */
.hero__card::after,
.metric-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0deg,
    transparent 70deg,
    var(--accent-color) 100deg,
    var(--accent-soft) 110deg,
    var(--accent-color) 120deg,
    transparent 150deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  will-change: background;
  transition: opacity var(--dur-base) var(--ease-smooth);
}

.hero__card:hover::after,
.metric-card:hover::after {
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  .hero__card::after,
  .metric-card::after { display: none; }
  /* Spotlight desactivado: sin halo reactivo al cursor */
  .hero__card::before,
  .metric-card::before {
    opacity: 0 !important;
    filter: none;
  }
}

/* ---------- Hero tag / kicker ---------- */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-5);
  background: rgba(73, 197, 182, 0.08);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--accent-color);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__kicker::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* ---------- H1 principal ---------- */
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-5);
  color: var(--text-main);
  text-wrap: balance;
}

/* Primera línea del H1: nowrap para que "Alto Rendimiento" baje
   solo en su línea accentuation, no por wrap natural.
   En móvil se permite wrap porque la fuente Display (Orbitron) es
   demasiado ancha para 31 chars en <540px (overflow horizontal). */
.hero__title > span:first-child {
  white-space: nowrap;
}

@media (max-width: 540px) {
  .hero__title > span:first-child {
    white-space: normal;
  }
}

.hero__title-accent {
  display: block;
  color: var(--accent-color);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: 0 0 32px var(--accent-glow);
}

/* ---------- Subtítulo ---------- */
.hero__subtitle {
  max-width: 64ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

/* ---------- Terminal typing ---------- */
.hero__terminal {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
  background: rgba(11, 15, 25, 0.6);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--accent-color);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 20px rgba(73, 197, 182, 0.04);
}

.hero__terminal-prompt {
  color: var(--accent-soft);
  font-weight: 700;
  user-select: none;
}

.hero__terminal-target {
  color: var(--text-main);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero__terminal-cursor {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--accent-color);
  box-shadow: 0 0 6px var(--accent-glow);
  animation: blink 1s steps(2) infinite;
  margin-left: 2px;
  flex-shrink: 0;
}

@keyframes blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---------- Metric cards (value proposition) ---------- */
.hero__metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .hero__metrics {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-4);
  background: rgba(11, 15, 25, 0.55);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    background var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth);
}

.metric-card::before {
  /* Spotlight glow (cursor-following).
     --mouse-x / --mouse-y actualizadas por initSpotlight() */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle 180px
      at calc(var(--mouse-x, 50%) * 1px)
      calc(var(--mouse-y, 50%) * 1px),
    rgba(73, 197, 182, 0.55),
    rgba(73, 197, 182, 0.1) 40%,
    transparent 60%
  );
  filter: blur(40px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--dur-base) var(--ease-smooth);
  will-change: opacity, background;
}

.metric-card:hover::before {
  opacity: 1;
}

/* Contenido de la metric-card por encima del spotlight */
.metric-card > * {
  position: relative;
  z-index: 1;
}

.metric-card:hover {
  transform: translateY(-3px);
  background: rgba(11, 15, 25, 0.75);
  border-color: var(--accent-border-strong);
}

.metric-card__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--accent-color);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.metric-card__value {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.5vw + 0.875rem, 1.625rem);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.metric-card__desc {
  font-size: var(--fs-small);
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---------- CTAs ---------- */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-smooth),
    background var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth);
}

/* primary: filled green */
.hero__cta--primary {
  background: var(--accent-color);
  color: var(--bg-primary);
  box-shadow: var(--shadow-glow);
}

.hero__cta--primary:hover {
  color: var(--bg-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-strong);
  background: var(--accent-soft);
}

/* secondary: ghost with border */
.hero__cta--secondary {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--accent-border-strong);
}

.hero__cta--secondary:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
  background: rgba(73, 197, 182, 0.05);
}

.hero__cta-arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out-expo);
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(4px);
}

/* ---------- Scroll indicator (desktop only) ---------- */
.hero__scroll {
  display: none;
  position: absolute;
  bottom: var(--space-5);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.hero__scroll-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--accent-color), transparent);
  animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =====================================================
   TABLET (≥ 768px)
   ===================================================== */
@media (min-width: 768px) {
  .hero__card {
    padding: var(--space-7) var(--space-6);
  }

  .hero__subtitle {
    font-size: var(--fs-body);
    max-width: 56ch;
  }

  .hero__terminal {
    max-width: 480px;
  }
}

/* =====================================================
   DESKTOP (≥ 1024px)
   ===================================================== */
@media (min-width: 1024px) {
  .hero {
    padding-top: calc(var(--header-height) + var(--space-8));
  }

  .hero__card {
    max-width: 1000px;
    padding: var(--space-9) var(--space-8);
  }

  .hero__scroll {
    display: flex;
  }

  .hero__terminal {
    max-width: 520px;
  }
}

/* =====================================================
   WIDE (≥ 1280px)
   ===================================================== */
@media (min-width: 1280px) {
  .hero__card {
    max-width: 1080px;
  }
}

/* =====================================================
   MOBILE PERFORMANCE (≤ 1024px)
   Los filtros y backdrop-filters del hero son los principales
   retardadores de LCP en gama media (cada blur 40–100px requiere
   recomposición por scroll y redibujado del card). En pantallas
   pequeñas los atenuamos o desactivamos sin perder la estética.
   ===================================================== */
@media (max-width: 1024px) {
  /* halo radial que sigue al cursor — reduce blur y opacidad */
  .hero__bg-blur {
    filter: blur(50px);
    opacity: 0.4;
    width: 360px;
    height: 360px;
  }

  /* orbes ambientales (también blur(80px) → 36px) */
  .hero__bg-orb {
    filter: blur(40px);
    opacity: 0.18;
  }
}

@media (max-width: 768px) {
  /* backdrop-filter es el #1 LCP-killer en móvil — lo desactivamos
     y compensamos con un fondo más opaco para mantener contraste */
  .hero__card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(17, 24, 39, 0.92);
  }
}

@media (max-width: 540px) {
  /* en pantallas muy chicas, el orbe + el halo grande compiten con
     el H1 por LCP — los ocultamos totalmente */
  .hero__bg-blur,
  .hero__bg-orb {
    display: none;
  }
}