/* =========================================================
   FX — animaciones y transiciones de TESKADEV
   Se activa desde js/fx.js. Todo respeta prefers-reduced-motion.
   ========================================================= */

:root { --g: #00ff41; --ease: cubic-bezier(.2, .7, .2, 1); }

/* ---------- Barra de progreso de scroll ---------- */
#progress {
    position: fixed; top: 0; left: 0; width: 100%; height: 2px;
    background: var(--g); box-shadow: 0 0 10px var(--g);
    transform-origin: left; transform: scaleX(0);
    z-index: 70; pointer-events: none;
}

/* ---------- Cursor (solo mouse) ---------- */
#cursor {
    position: fixed; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px;
    border: 1px solid rgba(0, 255, 65, .7); border-radius: 50%;
    pointer-events: none; z-index: 70; opacity: 0;
    transition: width .25s, height .25s, margin .25s, background .25s, opacity .3s;
}
#cursor.on { opacity: 1; }
#cursor.hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(0, 255, 65, .08); }

/* ---------- Pantalla de arranque ---------- */
#boot {
    position: fixed; inset: 0; z-index: 100; background: #020502;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: opacity .5s ease, visibility .5s ease;
    animation: bootFail .01s 4s forwards; /* seguro: se oculta sola aunque falle el JS */
}
#boot.out { opacity: 0; visibility: hidden; }
@keyframes bootFail { to { opacity: 0; visibility: hidden; } }
.boot-inner { width: min(86vw, 420px); }
#boot-log { color: var(--g); font-size: 12px; line-height: 1.9; min-height: 120px; white-space: pre-wrap; text-shadow: 0 0 8px rgba(0, 255, 65, .4); }
.boot-bar { height: 2px; background: rgba(0, 255, 65, .15); margin-top: 16px; }
.boot-bar i { display: block; height: 100%; width: 0; background: var(--g); box-shadow: 0 0 10px var(--g); transition: width .25s linear; }

/* ---------- Hero ---------- */
#rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; opacity: .5; pointer-events: none; }

html.js:not(.ready) .hero-in { opacity: 0; }
.hero-in { animation: fxIn .85s var(--d, 0s) var(--ease) backwards; }

.hero-title {
    translate: calc(var(--px, 0) * 16px) calc(var(--py, 0) * 9px);
    transition: translate .3s ease-out;
    animation: glitch 7s 3s infinite;
}
@keyframes glitch {
    0%, 90%, 100% { transform: none; filter: none; clip-path: none; }
    91% { transform: translateX(-5px) skewX(-6deg); filter: drop-shadow(4px 0 0 rgba(255, 0, 64, .8)) drop-shadow(-4px 0 0 rgba(0, 229, 255, .8)); }
    93% { transform: translateX(6px); clip-path: inset(18% 0 55% 0); filter: drop-shadow(-4px 0 0 rgba(0, 229, 255, .8)); }
    95% { transform: translateX(-3px) skewX(4deg); clip-path: inset(60% 0 8% 0); filter: drop-shadow(4px 0 0 rgba(255, 0, 64, .8)); }
    97% { transform: translateX(2px); clip-path: none; filter: none; }
}

.cursor-blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group span {
    font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase;
    font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1; padding: 0 1.4rem; letter-spacing: -.03em;
    color: transparent; -webkit-text-stroke: 1px var(--g);
}
.marquee-group span:nth-child(4n+3) { color: #fff; -webkit-text-stroke: 0; }
.marquee-group i { color: var(--g); font-style: normal; font-size: 1.2rem; opacity: .7; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Reveals al hacer scroll ---------- */
@keyframes fxIn { from { opacity: 0; translate: 0 26px; } }
@keyframes fxWipe { from { clip-path: inset(-20px 100% -20px 0); } to { clip-path: inset(-20px); } }

.js .fx-reveal:not(.in) { opacity: 0; }
.fx-reveal.in { animation: fxIn .75s var(--d, 0s) var(--ease) backwards; }

.js .fx-wipe:not(.in) { clip-path: inset(-20px 100% -20px 0); }
.fx-wipe.in { animation: fxWipe .9s var(--d, 0s) var(--ease) backwards; }

.fx-failsafe .fx-reveal, .fx-failsafe .fx-wipe { opacity: 1 !important; clip-path: none !important; }

/* línea que barre el borde superior de cada sección */
.fx-sec { position: relative; }
.fx-sec::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--g), transparent);
    transform: scaleX(0); opacity: 0;
}
.fx-sec.in::before { animation: scanline 1.4s var(--ease) forwards; }
@keyframes scanline { 0% { transform: scaleX(0); opacity: 1; } 70% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- Tarjetas: tilt 3D + brillo que sigue al mouse ---------- */
.card-tech {
    position: relative;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: border-color .3s, background-color .3s, transform .25s ease-out;
}
.card-tech::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 255, 65, .13), transparent 65%);
}
.card-tech:hover::before { opacity: 1; }

/* ---------- Timeline del proceso ---------- */
.proc-line { transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease) .35s; }
.proc-num { transition: background-color .4s .2s, color .4s .2s, box-shadow .4s .2s; }
.fx-reveal.in .proc-line { transform: scaleX(1); }
.fx-reveal.in .proc-num { background: var(--g); color: #000; box-shadow: 0 0 18px rgba(0, 255, 65, .5); }
.fx-failsafe .proc-line { transform: scaleX(1); }

/* ---------- Nav: sección activa ---------- */
.nav-link { position: relative; transition: color .3s; }
.nav-link::after {
    content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; background: var(--g);
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link.active { color: var(--g); }

/* ---------- Ecualizador (música) ---------- */
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; margin-left: 14px; vertical-align: middle; }
.eq i { width: 3px; height: 100%; background: var(--g); opacity: .7; transform-origin: bottom; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; animation-duration: .8s; }
.eq i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.2s; }
.eq i:nth-child(4) { animation-delay: -.15s; animation-duration: .9s; }
@keyframes eq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

/* ---------- Especialidades: mini visuales ---------- */
.viz-wave { display: flex; align-items: center; gap: 4px; height: 72px; }
.viz-wave i {
    width: 4px; background: var(--g); opacity: .75; transform-origin: center;
    animation: eq 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.11s);
}
.viz-wave i:nth-child(3n) { animation-duration: .9s; }
.viz-wave i:nth-child(4n) { animation-duration: 1.5s; }
.card-tech:hover .viz-wave i { animation-duration: .55s; }

.viz-grid { display: grid; grid-template-columns: repeat(4, 18px); gap: 6px; }
.viz-grid i {
    width: 18px; height: 18px; border: 1px solid rgba(0, 255, 65, .45);
    animation: gridlit 3.6s linear infinite; animation-delay: calc(var(--i) * .3s);
}
@keyframes gridlit {
    0% { background: var(--g); box-shadow: 0 0 12px var(--g); }
    14%, 100% { background: transparent; box-shadow: none; }
}

.viz-liss { width: 240px; height: 96px; max-width: 100%; }

/* ---------- Menú móvil ---------- */
#menu-toggle { width: 40px; height: 40px; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
#menu-toggle span { display: block; width: 22px; height: 2px; background: var(--g); transition: transform .3s var(--ease), opacity .2s; }
#menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
#menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 768px) { #menu-toggle { display: none; } } /* el id le gana a md:hidden */

#mobile-menu {
    position: fixed; top: 64px; left: 0; width: 100%; z-index: 39;
    background: rgba(2, 5, 2, .96); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 255, 65, .2);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s var(--ease), visibility .3s;
}
#mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
#mobile-menu a {
    display: block; padding: 18px 24px; border-top: 1px solid rgba(0, 255, 65, .08);
    font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: #a0f0a0;
}
#mobile-menu a:active { background: rgba(0, 255, 65, .08); color: var(--g); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
    .viz-wave i, .viz-grid i { animation: none; }
    #mobile-menu, #menu-toggle span { transition: none; }
    .hero-title, .marquee-track, .eq i, .cursor-blink, .fx-sec.in::before { animation: none; }
    .hero-in { animation: none; }
    .proc-line { transform: scaleX(1); transition: none; }
    #cursor { display: none; }
}
@media (pointer: coarse) { #cursor { display: none; } }