/* ===================================================================
   CanchaLive — capa premium (oct-2026), compartida por ES y EN.
   Hero con video de Higgsfield, nav de vidrio, marcador vivo y
   revelados al hacer scroll. Sin JS todo queda visible y estático.
   =================================================================== */
:root {--cl-ease:cubic-bezier(.16,1,.3,1);}

/* ---------- Nav fija de vidrio ---------- */
.nav {position:fixed;transition:background .35s ease,border-color .35s ease,height .35s var(--cl-ease),transform .45s var(--cl-ease);}
.nav.is-scrolled {height:70px;background:rgba(2,13,10,.72);border-bottom-color:rgba(185,255,56,.16);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);}
.nav.is-hidden {transform:translateY(-100%);}
.nav-links a:not(.nav-cta) {position:relative;}
.nav-links a:not(.nav-cta)::after {content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--pitch);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--cl-ease);}
.nav-links a:not(.nav-cta):hover::after {transform:scaleX(1);}
.nav-cta {transition:transform .25s var(--cl-ease),box-shadow .25s ease;}
.nav-cta:hover {transform:translateY(-2px);box-shadow:0 14px 30px rgba(185,255,56,.25);}

/* ---------- Hero con video ---------- */
.hero {min-height:100vh;min-height:max(100svh,760px);}
.hero-media {position:absolute;inset:0;z-index:-2;overflow:hidden;}
.hero-media video {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center;opacity:0;transform:scale(1.08);transition:opacity 1.4s ease,transform 3s var(--cl-ease);filter:saturate(.95) contrast(1.06);}
.hero-media video.is-ready {opacity:1;transform:scale(1);}
.hero::before {transition:transform 3s var(--cl-ease);}
.hero.is-in::before {transform:scale(1);}
.floodlight {position:absolute;inset:-20% -10% auto;height:120%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:conic-gradient(from 200deg at 78% -8%,transparent 0deg,rgba(220,255,200,.16) 8deg,transparent 18deg,transparent 30deg,rgba(185,255,56,.08) 36deg,transparent 46deg);
  animation:cl-sweep 9s ease-in-out infinite alternate;}
.hero-grain {position:absolute;inset:-50%;z-index:-1;opacity:.06;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:cl-grain 1.2s steps(4) infinite;}

/* Titular con revelado por líneas */
h1.display .l {display:block;overflow:hidden;padding-bottom:.05em;}
h1.display .l>span {display:inline-block;}
.signal i {animation:cl-ping 1.8s ease-out infinite;}
.js-cl .hero [data-in] {opacity:0;transform:translateY(24px);transition:opacity 1s var(--cl-ease),transform 1s var(--cl-ease);transition-delay:calc(var(--d,0) * 1ms);}
.js-cl h1.display .l>span {transform:translateY(112%);transition:transform 1.1s var(--cl-ease);transition-delay:calc(var(--d,0) * 1ms);}
.js-cl .hero.is-in [data-in] {opacity:1;transform:none;}
.js-cl .hero.is-in h1.display .l>span {transform:none;}

/* Composición del hero: piezas flotando */
.score-float {animation:cl-float-a 6s ease-in-out infinite;}
.destinations {animation:cl-float-b 7s ease-in-out infinite;}
.landscape-device {transition:transform .6s var(--cl-ease);}
.hero-visual:hover .landscape-device {transform:rotate(-.5deg) scale(1.01);}
.score b {transition:transform .4s var(--cl-ease),background .4s ease;}
.score b.is-bump {transform:scale(1.25);background:#fff;}
.destination {opacity:1;}
.js-cl .destination {opacity:0;transform:translateX(12px);transition:opacity .6s var(--cl-ease),transform .6s var(--cl-ease);}
.js-cl .hero.is-in .destination {opacity:1;transform:none;}
.js-cl .hero.is-in .destination:nth-of-type(1) {transition-delay:1.3s;}
.js-cl .hero.is-in .destination:nth-of-type(2) {transition-delay:1.55s;}
.js-cl .hero.is-in .destination:nth-of-type(3) {transition-delay:1.8s;}
.destination span:last-child::before {content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--pitch);vertical-align:1px;animation:pulse 1.6s infinite;}
.store-button {position:relative;overflow:hidden;}
.store-button::after {content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(185,255,56,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--cl-ease);pointer-events:none;}
.store-button:hover::after {transform:translateX(120%);}

.scroll-cue {position:absolute;left:50%;bottom:28px;z-index:3;display:grid;place-items:center;width:30px;height:48px;margin-left:-15px;border:1px solid rgba(255,255,255,.3);border-radius:20px;}
.scroll-cue i {width:3px;height:9px;border-radius:3px;background:var(--pitch);animation:cl-scroll 1.8s var(--cl-ease) infinite;}

/* ---------- Riel de plataformas: barrido de señal ---------- */
.broadcast-rail {position:relative;overflow:hidden;}
.broadcast-rail::after {content:"";position:absolute;top:0;bottom:0;width:30%;left:-30%;background:linear-gradient(90deg,transparent,rgba(185,255,56,.09),transparent);animation:cl-rail 5.5s linear infinite;pointer-events:none;}
.platform-pill {transition:transform .3s var(--cl-ease),border-color .3s ease;}
.platform-pill:hover {transform:translateY(-3px);border-color:rgba(185,255,56,.5);}

/* ---------- Revelados al hacer scroll ---------- */
.js-cl .cl-reveal {opacity:0;transform:translateY(36px);transition:opacity .9s var(--cl-ease),transform .9s var(--cl-ease);transition-delay:calc(var(--d,0) * 1ms);}
.js-cl .cl-reveal.is-visible {opacity:1;transform:none;}
.js-cl .price-card.featured.cl-reveal.is-visible {transform:translateY(-14px);}
.stage-phone {animation:cl-float-a 7s ease-in-out infinite;}
.feature,.route-node,.price-card,.tutorial-card {transition:transform .5s var(--cl-ease),box-shadow .5s var(--cl-ease);}
.route-node:hover,.tutorial-card:hover {transform:translateY(-6px);}
.wide-shot-image img {transition:transform 1.2s var(--cl-ease);}
.wide-shot:hover .wide-shot-image img {transform:scale(1.04);}
.final-card {background:radial-gradient(120% 140% at 0% 0%,#14a35b 0%,#0e6b3d 45%,#06301c 100%);}
.final-card::before {content:"";position:absolute;inset:-50%;z-index:1;background:conic-gradient(from 0deg,transparent,rgba(185,255,56,.18),transparent 30%);animation:cl-spin 14s linear infinite;pointer-events:none;}

/* ---------- Keyframes ---------- */
@keyframes cl-ping {0% {box-shadow:0 0 0 0 rgba(185,255,56,.6);} 80%,100% {box-shadow:0 0 0 10px rgba(185,255,56,0);}}
@keyframes cl-float-a {0%,100% {translate:0 0;} 50% {translate:0 -10px;}}
@keyframes cl-float-b {0%,100% {translate:0 0;} 50% {translate:0 8px;}}
@keyframes cl-sweep {0% {transform:rotate(-6deg);} 100% {transform:rotate(6deg);}}
@keyframes cl-grain {0% {transform:translate(0,0);} 25% {transform:translate(-4%,3%);} 50% {transform:translate(3%,-2%);} 75% {transform:translate(-2%,-4%);} 100% {transform:translate(0,0);}}
@keyframes cl-scroll {0% {transform:translateY(-8px);opacity:0;} 40% {opacity:1;} 100% {transform:translateY(12px);opacity:0;}}
@keyframes cl-rail {to {left:100%;}}
@keyframes cl-spin {to {transform:rotate(360deg);}}

@media (max-width: 980px) {
  .hero {min-height:auto;}
  .hero-media video {object-position:70% center;}
  .scroll-cue {display:none;}
}
@media (max-width: 660px) {
  .nav.is-scrolled {height:62px;}
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video {display:none;}
  .floodlight,.hero-grain,.score-float,.destinations,.stage-phone,.broadcast-rail::after,.final-card::before {animation:none;}
  .js-cl .hero [data-in],.js-cl h1.display .l>span,.js-cl .destination,.js-cl .cl-reveal {opacity:1;transform:none;transition:none;}
}