/* ==========================================================================
   reta-club-hero-fx.css · AKL-2026-RETA-CLUB-WEB-001 · «Nuevo para el repo»
   Entrada del hero: «las canchas se encienden». Aprobada por Emmanuel.
   Componente .hfx-court (cancha vista desde arriba) + escenario .hero-fx.
   Todo sale de colors_and_type.css; los --hfx-* son roles de este componente.
   Regla del peloteo: cada golpe cruza la red (arriba → abajo → arriba → abajo).
   Los jugadores están EXACTAMENTE donde la pelota se detiene: el golpe se ve.
   Sin JS: el hero se ve normal (solo .fx oculta para la entrada).
   Reducir movimiento: todo encendido, pelota quieta, sin ola ni entrada.
   ========================================================================== */
:root{
  --hfx-off:color-mix(in oklch,var(--verde-deep) 72%,#000);              /* apagada: verde-deep oscurecido */
  --hfx-line-off:color-mix(in srgb,var(--crema) 10%,transparent);
  --hfx-glass:color-mix(in srgb,var(--crema) 55%,transparent);
  --hfx-net:color-mix(in srgb,var(--crema) 75%,transparent);
  --hfx-line:color-mix(in srgb,var(--crema) 45%,transparent);
  --hfx-halo:color-mix(in srgb,var(--crema) 16%,transparent);
  --hfx-halo-far:color-mix(in srgb,var(--crema) 7%,transparent);
  --hfx-gap:18px;
  --hfx-radius:6px;
  --hfx-perspective:1400px;
  --hfx-tilt:rotateX(56deg) rotateZ(-24deg);
  --hfx-rise:18px;
  --hfx-in:.7s;
}

/* ── Escenario ── */
.club-page{position:relative}
.club-wrap{position:relative;z-index:1}
.hero-fx{position:absolute;left:0;right:0;top:0;height:max(100svh,720px);overflow:hidden;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,transparent);mask-image:linear-gradient(to bottom,#000 68%,transparent)}
.hero-fx__stage{position:absolute;right:-6%;top:-22%;width:min(980px,95vw);perspective:var(--hfx-perspective)}
.hero-fx__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hfx-gap);transform:var(--hfx-tilt);transform-origin:50% 40%;transform-style:preserve-3d}
.hero-fx__veil{position:absolute;inset:0;background:linear-gradient(90deg,var(--verde-deep) 0%,color-mix(in srgb,var(--verde-deep) 92%,transparent) 34%,color-mix(in srgb,var(--verde-deep) 35%,transparent) 62%,color-mix(in srgb,var(--verde-deep) 12%,transparent) 100%)}
.hero-fx.is-paused .hfx-ball{animation-play-state:paused}

/* ── La cancha ── */
.hfx-court{position:relative;aspect-ratio:1/2;border-radius:var(--hfx-radius);background:var(--hfx-off);box-shadow:inset 0 0 0 1.5px var(--hfx-line-off);transition:background .6s ease,box-shadow .6s ease}
.hfx-court i{position:absolute;background:var(--hfx-line-off);transition:background .6s ease}
.hfx-court__net{left:0;right:0;top:50%;height:2px;margin-top:-1px}
.hfx-court__svc{left:0;right:0;height:1px}
.hfx-court__svc--a{top:15.25%}.hfx-court__svc--b{bottom:15.25%}
.hfx-court__mid{left:50%;width:1px;margin-left:-.5px;top:15.25%;bottom:15.25%}
.hfx-p{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;background:var(--crema);opacity:0;transform:translate(-50%,-50%);transition:opacity .5s ease .3s}
.hfx-p--1{left:30%;top:24%}.hfx-p--2{left:70%;top:31%}   /* arriba */
.hfx-p--3{left:32%;top:71%}.hfx-p--4{left:68%;top:78%}   /* abajo */
.hfx-ball{position:absolute;left:30%;top:24%;width:6%;aspect-ratio:1;border-radius:50%;background:var(--pelota);opacity:0;transform:translate(-50%,-50%);z-index:1}

.hfx-court.is-on{background:radial-gradient(120% 70% at 50% 50%,var(--verde-lift) 0%,var(--verde-mid) 55%,var(--verde-corcuera) 100%);
  box-shadow:inset 0 0 0 1.5px var(--hfx-glass),0 0 38px var(--hfx-halo),0 0 90px var(--hfx-halo-far)}
.hfx-court.is-on .hfx-court__net{background:var(--hfx-net)}
.hfx-court.is-on .hfx-court__svc,.hfx-court.is-on .hfx-court__mid{background:var(--hfx-line)}
.hfx-court.is-on .hfx-p{opacity:.92}
.hfx-court.is-play .hfx-ball{opacity:1;animation:hfx-rally var(--hfx-dur,2.4s) ease-in-out var(--hfx-del,0s) infinite}
.hfx-court.is-flash{animation:hfx-flash .5s ease-out}
/* Cada golpe cruza la red. Pausa = el golpe. */
@keyframes hfx-rally{0%,6%{left:30%;top:24%}25%,31%{left:68%;top:78%}50%,56%{left:70%;top:31%}75%,81%{left:32%;top:71%}100%{left:30%;top:24%}}
@keyframes hfx-flash{0%{box-shadow:inset 0 0 0 2px var(--crema)}35%{box-shadow:inset 0 0 0 2px var(--crema),0 0 70px color-mix(in srgb,var(--crema) 45%,transparent)}100%{}}

/* ── Entrada del texto y el teléfono (solo si corre JS: .fx) ── */
.fx .club-hero__name,.fx .club-hero__say,.fx .club-hero__sub,.fx .club-hero .club-ctas,.fx .club-shot{opacity:0;transform:translateY(var(--hfx-rise));transition:opacity var(--hfx-in) ease,transform var(--hfx-in) cubic-bezier(.2,.8,.2,1)}
.fx.fx-in .club-hero__name,.fx.fx-in .club-hero__say,.fx.fx-in .club-hero__sub,.fx.fx-in .club-hero .club-ctas,.fx.fx-in .club-shot{opacity:1;transform:none}
.fx.fx-in .club-hero__say{transition-delay:.15s}
.fx.fx-in .club-shot{transition-delay:.25s}
.fx.fx-in .club-hero__sub{transition-delay:.3s}
.fx.fx-in .club-hero .club-ctas{transition-delay:.45s}

/* ── Teléfono: detrás del título, más suave, velo de arriba abajo. Tableta usa la composición de escritorio. ── */
@media (max-width:699px){
  .hero-fx{height:760px}
  .hero-fx__stage{right:-70%;top:-16%;width:720px;opacity:.8}
  .hero-fx__veil{background:linear-gradient(180deg,color-mix(in srgb,var(--verde-deep) 5%,transparent) 0%,color-mix(in srgb,var(--verde-deep) 55%,transparent) 30%,color-mix(in srgb,var(--verde-deep) 85%,transparent) 55%,var(--verde-deep) 100%)}
}

@media (min-width:700px) and (max-width:1099px){
  .hero-fx__stage{right:-18%;top:-14%;width:min(900px,110vw)}
  .hero-fx__veil{background:linear-gradient(90deg,var(--verde-deep) 0%,color-mix(in srgb,var(--verde-deep) 88%,transparent) 38%,color-mix(in srgb,var(--verde-deep) 25%,transparent) 70%,transparent 100%)}
}
@media (prefers-reduced-motion:reduce){
  .hfx-court,.hfx-court i,.hfx-p{transition:none}
  .hfx-court.is-play .hfx-ball{animation:none;opacity:1}
  .hfx-court.is-flash{animation:none}
}