/* =========================================================
   CAI · Animación de entrada del logotipo
   Secuencia (~4.6 s):
   1. Fondo verde oscuro → carbón; pistas de circuito convergen
   2. Las piezas del logo aparecen de borroso a nítido, una a una,
      con un acercamiento lento de cámara
   3. Un haz de luz recorre el logo de izquierda a derecha
   4. Se desvanece suavemente y revela el sitio
   ========================================================= */
:root{--ci-fondo:radial-gradient(ellipse 80% 75% at 50% 46%,#1e2a0d 0%,#151d0a 40%,#171914 72%,#252320 100%)}
html.ci-pending body::before{content:"";position:fixed;inset:0;z-index:9999;background:var(--ci-fondo)}

.ci{position:fixed;inset:0;z-index:9998;overflow:hidden;background:var(--ci-fondo);cursor:pointer;
  --verde:#A9C23F;--ease-out:cubic-bezier(.16,1,.3,1);--cam:cubic-bezier(.25,.6,.15,1)}
.ci *{box-sizing:border-box}

/* Textura de puntos sutil */
.ci-dots{position:absolute;inset:0;opacity:0;background-image:radial-gradient(rgba(255,255,255,.05) 1.2px,transparent 1.3px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse at center,transparent 25%,#000 85%);mask-image:radial-gradient(ellipse at center,transparent 25%,#000 85%)}
.ci.hit .ci-dots{animation:ciFade 1s .2s forwards}

/* Pistas de circuito */
.ci-traces{position:absolute;inset:0;width:100%;height:100%}
.ci-traces .tr{fill:none;stroke:var(--verde);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.55;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:ciDraw .9s var(--ease-out) forwards;animation-delay:var(--d)}
.ci-traces .pulse{fill:none;stroke:#eaffa0;stroke-width:3;stroke-linecap:round;opacity:0;filter:drop-shadow(0 0 6px #d7f56b);
  stroke-dasharray:36 var(--len);stroke-dashoffset:36;animation:ciPulse 1s cubic-bezier(.5,0,.75,0) forwards;animation-delay:calc(var(--d) + .25s)}
.ci-traces .node{fill:#151d0a;stroke:var(--verde);stroke-width:2;opacity:0;animation:ciFade .3s forwards;animation-delay:calc(var(--d) + .7s)}
.ci.hit .ci-traces .tr{opacity:.28;transition:opacity .8s}
.ci.hit .ci-traces .node{opacity:.45;transition:opacity .8s}
.ci.hit .ci-traces .pulse{display:none}
@keyframes ciDraw{to{stroke-dashoffset:0}}
@keyframes ciPulse{0%{opacity:1;stroke-dashoffset:0}90%{opacity:1}100%{opacity:0;stroke-dashoffset:calc(var(--len) * -1)}}
@keyframes ciFade{to{opacity:1}}

/* ---------- Logo: revelado elegante + haz de luz ---------- */
.ci-stage{position:absolute;inset:0;display:grid;place-items:center}
.ci-cam{animation:ciPush 4.6s cubic-bezier(.3,.1,.2,1) both}
@keyframes ciPush{from{transform:scale(.93)}to{transform:scale(1)}}
.ci-logo{position:relative;width:min(760px,84vw);aspect-ratio:2.7991}

/* Cada pieza pasa de borrosa a nítida mientras sube suavemente */
.ci-p{position:absolute;display:block;opacity:0;
  filter:blur(var(--b,0px)) drop-shadow(0 3px 5px rgba(0,0,0,.32)) drop-shadow(0 0 0 rgba(0,0,0,0));
  animation:ciReveal 1.1s cubic-bezier(.22,.8,.25,1) forwards;animation-delay:var(--d)}
@keyframes ciReveal{
  from{opacity:0;transform:translateY(26px);filter:blur(14px) drop-shadow(0 3px 5px rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0))}
  to{opacity:1;transform:none;filter:blur(0px) drop-shadow(0 3px 5px rgba(0,0,0,.32)) drop-shadow(0 0 0 rgba(0,0,0,0))}}
.ci-p.punto{animation-name:ciDot}
@keyframes ciDot{
  from{opacity:0;transform:translateY(-34px);filter:blur(10px) drop-shadow(0 3px 5px rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0))}
  to{opacity:1;transform:none;filter:blur(0px) drop-shadow(0 3px 5px rgba(0,0,0,.32)) drop-shadow(0 0 0 rgba(0,0,0,0))}}
.ci-p.texto{animation:ciText 1.2s cubic-bezier(.22,.8,.25,1) forwards;animation-delay:var(--d)}
@keyframes ciText{
  from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-10px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}

/* Relleno de cada pieza con el haz de luz que la recorre */
.ci-p i{position:absolute;inset:0;display:block;
  -webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;
  background:linear-gradient(105deg,var(--c) 0%,var(--c) 38%,var(--hl) 45%,var(--pk,#fff) 50%,var(--hl) 55%,var(--c) 62%,var(--c) 100%);
  background-size:400% 100%;background-position:100% 0}
.ci.shine .ci-p i{animation:ciShine 1.5s cubic-bezier(.45,0,.25,1) forwards;animation-delay:var(--sd,0s)}
@keyframes ciShine{from{background-position:100% 0}to{background-position:0 0}}

/* Colores sobre el fondo oscuro */
.ci-p.sonda{--c:#ffffff;--hl:#c9cbc4;--pk:#ffffff}
.ci-p.u,.ci-p.punto{--c:#a55a9f;--hl:#e7a9df;--pk:#fbe6f8}
.ci-p.c,.ci-p.a,.ci-p.i{--c:#ffffff;--hl:#c9cbc4;--pk:#ffffff}
.ci-p.texto{--c:#ffffff;--hl:#c9cbc4;--pk:#ffffff}

/* Reflejo suave que cruza la escena al mismo tiempo que el haz */
.ci-beam{position:absolute;top:-20%;bottom:-20%;left:0;width:22vw;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(214,240,130,.07) 40%,rgba(255,255,255,.10) 50%,rgba(214,240,130,.07) 60%,transparent);
  transform:translateX(-30vw) skewX(-18deg)}
.ci.shine .ci-beam{animation:ciBeam 1.9s cubic-bezier(.45,0,.25,1) forwards}
@keyframes ciBeam{0%{opacity:0;transform:translateX(-30vw) skewX(-18deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(110vw) skewX(-18deg)}}

/* Botón saltar */
.ci-skip{position:absolute;right:20px;bottom:20px;z-index:2;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:8px 16px;font:500 .78rem Rubik,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(4px)}
.ci-skip:hover{background:rgba(0,0,0,.45)}

/* Salida: todo se desvanece suavemente para revelar la página */
.ci.out{animation:ciOut 1.2s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
.ci.out .ci-stage{animation:ciLift 1.2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ciOut{0%{opacity:1}100%{opacity:0}}
@keyframes ciLift{to{transform:scale(1.04);filter:blur(4px)}}
.ci.quick{transition:opacity .6s ease;opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){.ci{display:none}}