/* ==========================================================================
   ChacoNET · Movimiento
   Un único lenguaje de animación para todo el sitio.
   ========================================================================== */

/* ---------- 1. Revelado al hacer scroll ---------- */
[data-reveal]{
  opacity:0;
  transition:
    opacity var(--d-slow) var(--e-emphasis),
    transform var(--d-slow) var(--e-emphasis),
    filter var(--d-slow) var(--e-emphasis);
  transition-delay:calc(var(--stagger,0) * 1ms);
  will-change:opacity,transform;
}
[data-reveal="up"]{ transform:translate3d(0,42px,0); }
[data-reveal="down"]{ transform:translate3d(0,-32px,0); }
[data-reveal="left"]{ transform:translate3d(-46px,0,0); }
[data-reveal="right"]{ transform:translate3d(46px,0,0); }
[data-reveal="scale"]{ transform:scale(.93); }
[data-reveal="blur"]{ filter:blur(14px); transform:translate3d(0,24px,0); }
[data-reveal="fade"]{ }
[data-reveal="clip"]{ clip-path:inset(0 0 100% 0); opacity:1; transform:none; }

[data-reveal].is-in{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:inset(0 0 0 0);
  will-change:auto;
}

/* Revelado de palabras dentro de un titular */
.words span{ display:inline-block; overflow:hidden; vertical-align:bottom; }
.words i{
  display:inline-block; font-style:normal;
  transform:translateY(105%);
  transition:transform 1s var(--e-emphasis);
  transition-delay:calc(var(--stagger,0) * 1ms);
}
.words.is-in i{ transform:translateY(0); }

/* ---------- 2. Hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  padding-top:calc(var(--header-h) + 60px); padding-bottom:80px;
  overflow:hidden; isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero__bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(58,33,153,.55),transparent 60%),
    radial-gradient(90% 60% at 85% 20%,rgba(0,212,255,.16),transparent 62%),
    radial-gradient(70% 60% at 8% 78%,rgba(255,201,74,.10),transparent 66%),
    var(--bg);
}
.hero__grid{
  position:absolute; inset:-10% -10% -20%;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(80% 62% at 50% 34%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(80% 62% at 50% 34%,#000 0%,transparent 78%);
  transform:perspective(700px) rotateX(46deg) translateY(-6%);
  transform-origin:50% 0;
  opacity:.75;
  animation:grid-drift 22s linear infinite;
}
@keyframes grid-drift{ to{ background-position:0 64px,64px 0; } }

.aurora{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; mix-blend-mode:screen; }
.aurora--1{ width:46vw; height:46vw; left:-8vw; top:-6vw; background:radial-gradient(circle,#5B37F0,transparent 66%); animation:aurora-a 20s var(--e-inout) infinite; }
.aurora--2{ width:40vw; height:40vw; right:-6vw; top:4vw; background:radial-gradient(circle,#00D4FF,transparent 66%); animation:aurora-b 26s var(--e-inout) infinite; }
.aurora--3{ width:34vw; height:34vw; left:34vw; bottom:-12vw; background:radial-gradient(circle,#FFC94A,transparent 68%); animation:aurora-c 32s var(--e-inout) infinite; opacity:.34; }
@keyframes aurora-a{ 50%{ transform:translate3d(9vw,5vh,0) scale(1.16); } }
@keyframes aurora-b{ 50%{ transform:translate3d(-8vw,7vh,0) scale(1.22); } }
@keyframes aurora-c{ 50%{ transform:translate3d(5vw,-7vh,0) scale(1.1); } }

.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; opacity:.85; }

.hero__content{ position:relative; z-index:2; display:flex; flex-direction:column; gap:var(--sp-6); max-width:960px; }
.hero__content > .chip,
.hero__content > .eyebrow{ align-self:flex-start; }
.hero__title{ font-size:var(--fs-display-1); line-height:.94; font-weight:800; letter-spacing:-.048em; }
.hero__title em{ font-style:normal; display:block; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero__facts{ display:flex; flex-wrap:wrap; gap:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }
.hero__fact b{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:800; letter-spacing:-.045em; line-height:1; }
.hero__fact span{ font-size:var(--fs-xs); color:var(--text-3); }

.hero__orb{
  position:absolute; right:max(4vw,20px); top:50%; translate:0 -50%;
  width:min(38vw,470px); aspect-ratio:1; z-index:1; pointer-events:none;
}
@media (max-width:1120px){ .hero__orb{ display:none; } }

.ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.13); }
.ring::after{
  content:""; position:absolute; top:-3px; left:50%; width:6px; height:6px; border-radius:50%;
  background:var(--cyan-400); box-shadow:0 0 14px 3px rgba(0,212,255,.85);
}
.ring--1{ animation:spin 18s linear infinite; }
.ring--2{ inset:14%; animation:spin 26s linear infinite reverse; border-style:dashed; opacity:.7; }
.ring--3{ inset:28%; animation:spin 34s linear infinite; opacity:.55; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.orb__core{
  position:absolute; inset:38%; border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.9),var(--brand-400) 34%,var(--brand-700) 68%,#0A0620 100%);
  box-shadow:0 0 90px -6px rgba(122,91,255,.85),inset 0 0 40px rgba(0,0,0,.5);
  animation:core-breathe 7s var(--e-inout) infinite;
}
@keyframes core-breathe{ 50%{ transform:scale(1.06); box-shadow:0 0 130px 6px rgba(122,91,255,.95),inset 0 0 40px rgba(0,0,0,.5); } }

/* Indicador de scroll */
.scroll-hint{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:var(--fs-2xs); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-3);
}
.scroll-hint__rail{ width:1px; height:46px; background:linear-gradient(180deg,var(--line-2),transparent); position:relative; overflow:hidden; }
.scroll-hint__rail::after{
  content:""; position:absolute; inset:0 auto auto 0; width:1px; height:16px;
  background:var(--cyan-400); animation:rail-run 2.2s var(--e-inout) infinite;
}
@keyframes rail-run{ 0%{ transform:translateY(-18px); opacity:0; } 40%{ opacity:1; } 100%{ transform:translateY(48px); opacity:0; } }
@media (max-height:760px),(max-width:900px){ .scroll-hint{ display:none; } }

/* ---------- 3. Paralaje ---------- */
[data-parallax]{ will-change:transform; }
[data-parallax-speed]{ will-change:transform; }

/* ---------- 4. Sección anclada: velocímetro ---------- */
.pin-track{ position:relative; height:230vh; }
.pin-viewport{
  position:sticky; top:0; height:100svh;
  display:flex; align-items:center; overflow:hidden;
}
.speedo{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--sp-8); align-items:center; width:100%; }
@media (max-width:980px){ .speedo{ grid-template-columns:1fr; gap:var(--sp-6); } }

.speedo__number{
  font-family:var(--font-display); font-weight:800; letter-spacing:-.06em; line-height:.82;
  font-size:clamp(5rem,19vw,15rem);
  font-variant-numeric:tabular-nums;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.speedo__unit{ font-size:clamp(1rem,2.4vw,1.7rem); font-weight:700; color:var(--cyan-300); letter-spacing:.04em; margin-left:.2em; }

.speedo__bars{ display:flex; align-items:flex-end; gap:9px; height:150px; }
.speedo__bar{
  flex:1; height:100%; border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--cyan-400),var(--brand-500));
  transform-origin:50% 100%; transform:scaleY(.12);
  transition:transform var(--d-slow) var(--e-out);
  box-shadow:0 0 22px -6px rgba(0,212,255,.6);
}
.speedo__meta{ display:flex; flex-direction:column; gap:var(--sp-4); }
.speedo__steps{ display:flex; flex-wrap:wrap; gap:8px; }
.speedo__steps .chip{ transition:background-color var(--d-base) var(--e-out),border-color var(--d-base) var(--e-out),color var(--d-base) var(--e-out); }
.speedo__steps .chip.is-active{ background:var(--brand-500); border-color:transparent; color:#fff; }

/* ---------- 5. Banda "fibra" ---------- */
.fiber{ position:relative; height:2px; background:var(--line); overflow:hidden; border-radius:2px; }
.fiber::after{
  content:""; position:absolute; inset:0; width:34%;
  background:linear-gradient(90deg,transparent,var(--cyan-400),transparent);
  animation:fiber-run 3.4s var(--e-inout) infinite;
}
@keyframes fiber-run{ 0%{ transform:translateX(-100%); } 100%{ transform:translateX(360%); } }

/* ---------- 6. Inclinación 3D ---------- */
[data-tilt]{ transform-style:preserve-3d; transition:transform var(--d-base) var(--e-out); }
[data-tilt] > *{ transform:translateZ(24px); }

/* ---------- 7. Contadores ---------- */
[data-count]{ font-variant-numeric:tabular-nums; }

/* ---------- 8. Aparición de páginas ---------- */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation:vt-out .28s var(--e-out) both; }
::view-transition-new(root){ animation:vt-in .42s var(--e-out) both; }
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(14px); } }

body{ animation:page-in .6s var(--e-out) both; }
@keyframes page-in{ from{ opacity:0; } }

/* ---------- 9. Entrada del hero (escalonada) ---------- */
.hero-anim{ opacity:0; transform:translateY(30px); animation:hero-in 1.05s var(--e-emphasis) both; animation-delay:calc(var(--stagger,0) * 1ms); }
@keyframes hero-in{ to{ opacity:1; transform:none; } }

/* ---------- 10. Utilidades ---------- */
.float-slow{ animation:floaty 9s var(--e-inout) infinite; }
@keyframes floaty{ 50%{ transform:translateY(-14px); } }
.spin-slow{ animation:spin 26s linear infinite; }
.live-dot{ width:8px; height:8px; border-radius:50%; background:#FF5A5A; box-shadow:0 0 10px 2px rgba(255,90,90,.7); }

@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .words i{ transform:none !important; }
  .hero-anim{ opacity:1; transform:none; }
  .hero__grid,.aurora,.ring,.orb__core,.marquee__track,.fiber::after,.scroll-hint__rail::after{ animation:none !important; }
}