/* ============================================================
   CYBER ZONE — SUPER MEGA ULTRA ANIMATIONS
   ============================================================ */

/* ---------- LOADING SCREEN ---------- */
#cz-loader {
    position: fixed; inset: 0; z-index: 99999;
    background: #0a0a0f;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    transition: opacity .6s ease, visibility .6s ease;
}
#cz-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.loader-hex-grid {
    position: absolute; inset: 0; overflow: hidden; opacity: .3;
}
.loader-hex-grid svg { width: 100%; height: 100%; }

.loader-ring {
    width: 160px; height: 160px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #00d9ff;
    border-bottom-color: #ff00ea;
    animation: loaderSpin 1.2s linear infinite;
    position: relative; z-index: 1;
}
.loader-ring::before {
    content: '';
    position: absolute; inset: 10px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #00ffcc;
    border-right-color: #ff00ea;
    animation: loaderSpin 1.8s linear infinite reverse;
}
.loader-ring::after {
    content: '';
    position: absolute; inset: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #ff00ea;
    animation: loaderSpin .9s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

.loader-logo-text {
    font-family: 'Orbitron', monospace;
    font-size: clamp(1.6rem, 5vw, 3rem);
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #00d9ff, #ff00ea);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: loaderGlitch 2.5s infinite;
    margin-top: 30px; position: relative; z-index: 1;
}
@keyframes loaderGlitch {
    0%,90%,100% { text-shadow: none; transform: none; }
    92% { text-shadow: -3px 0 #00d9ff, 3px 0 #ff00ea; transform: skewX(-3deg); }
    94% { text-shadow:  3px 0 #00ffcc,-3px 0 #ff00ea; transform: skewX( 3deg); }
    96% { text-shadow: -3px 0 #ff00ea, 3px 0 #00d9ff; transform: skewX(-2deg); }
}

.loader-bar-wrap {
    width: 260px; height: 4px;
    background: rgba(255,255,255,.1);
    border-radius: 4px; margin-top: 30px;
    overflow: hidden; position: relative; z-index: 1;
}
.loader-bar {
    height: 100%;
    background: linear-gradient(90deg, #00d9ff, #ff00ea, #00ffcc);
    background-size: 200%;
    border-radius: 4px;
    width: 0%;
    animation: loaderBarFill 2s ease-out forwards, loaderBarShimmer 1s linear infinite;
}
@keyframes loaderBarFill { to { width: 100%; } }
@keyframes loaderBarShimmer { to { background-position: 200%; } }

.loader-status {
    font-family: 'Orbitron', monospace;
    font-size: .75rem; letter-spacing: .15em;
    color: rgba(255,255,255,.5);
    margin-top: 14px; position: relative; z-index: 1;
}

/* ---------- GLITCH TITLE ---------- */
.glitch-title {
    position: relative;
    animation: glitchMain 6s infinite;
}
.glitch-title::before,
.glitch-title::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0; width: 100%;
    background: linear-gradient(135deg, #00d9ff, #ff00ea);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.glitch-title::before {
    animation: glitchBefore 6s infinite;
    clip-path: polygon(0 0,100% 0,100% 33%,0 33%);
}
.glitch-title::after {
    animation: glitchAfter 6s infinite;
    clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
}
@keyframes glitchMain {
    0%,88%,100% { transform: none; }
    90% { transform: skewX(-2deg) translateX(2px); }
    92% { transform: skewX( 2deg) translateX(-2px); }
    94% { transform: none; }
}
@keyframes glitchBefore {
    0%,88%,100% { transform: none; opacity: 0; }
    90% { transform: translateX(-4px); opacity: .8; }
    92% { transform: translateX( 3px); opacity: .6; }
    94% { opacity: 0; }
}
@keyframes glitchAfter {
    0%,88%,100% { transform: none; opacity: 0; }
    90% { transform: translateX( 4px); opacity: .7; }
    92% { transform: translateX(-3px); opacity: .5; }
    94% { opacity: 0; }
}

/* ---------- SCAN LINE ---------- */
.scanline {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%, #00d9ff 20%, #00ffcc 50%, #ff00ea 80%, transparent 100%);
    opacity: .6; pointer-events: none; z-index: 8;
    animation: scanMove 4s linear infinite;
    box-shadow: 0 0 12px #00d9ff, 0 0 30px rgba(0,217,255,.4);
}
@keyframes scanMove {
    0%   { top: -2px; opacity: 0; }
    5%   { opacity: .6; }
    95%  { opacity: .6; }
    100% { top: 100%; opacity: 0; }
}

/* ---------- ELECTRIC BORDER ON CARDS ---------- */
@keyframes electricPulse {
    0%,100% { box-shadow: 0 0 5px #00d9ff, 0 0 10px rgba(0,217,255,.3), inset 0 0 5px rgba(0,217,255,.05); }
    50%      { box-shadow: 0 0 15px #00d9ff, 0 0 30px rgba(0,217,255,.5), 0 0 50px rgba(0,217,255,.2), inset 0 0 10px rgba(0,217,255,.1); }
}
.tariff-featured { animation: electricPulse 2s ease-in-out infinite; }

/* ---------- HOLOGRAPHIC SHIMMER ---------- */
.feature-card-3d,.info-box,.tariff-card {
    overflow: hidden;
}
.feature-card-3d::after,.info-box::after {
    content: '';
    position: absolute; top: -100%; left: -60%;
    width: 40%; height: 300%;
    background: linear-gradient(105deg,
        transparent 40%,
        rgba(255,255,255,.12) 50%,
        transparent 60%);
    transform: rotate(15deg);
    transition: none;
    pointer-events: none;
    animation: holoShimmer 5s ease-in-out infinite;
}
@keyframes holoShimmer {
    0%,100% { left: -60%; top: -100%; }
    50%      { left: 120%; top: -100%; }
}

/* ---------- NEON FLICKER ---------- */
.section-title {
    animation: neonFlicker 8s infinite;
}
@keyframes neonFlicker {
    0%,95%,100% { filter: none; }
    96% { filter: drop-shadow(0 0 8px #00d9ff) brightness(1.3); }
    97% { filter: none; }
    98% { filter: drop-shadow(0 0 20px #ff00ea) brightness(1.6); }
    99% { filter: none; }
}

/* ---------- SCROLL REVEAL ---------- */
.reveal-hidden {
    opacity: 0;
    transform: translateY(60px) rotateX(15deg);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
    transform-origin: top center;
}
.reveal-hidden.revealed {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-80px) rotateY(-20deg);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
    transform-origin: left center;
}
.reveal-left.revealed { opacity: 1; transform: translateX(0) rotateY(0); }
.reveal-right {
    opacity: 0;
    transform: translateX(80px) rotateY(20deg);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
    transform-origin: right center;
}
.reveal-right.revealed { opacity: 1; transform: translateX(0) rotateY(0); }

/* stagger children */
.reveal-stagger > * {
    opacity: 0;
    transform: translateY(40px) scale(.95);
    transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.reveal-stagger.revealed > *:nth-child(1) { opacity:1; transform:none; transition-delay:.1s; }
.reveal-stagger.revealed > *:nth-child(2) { opacity:1; transform:none; transition-delay:.22s; }
.reveal-stagger.revealed > *:nth-child(3) { opacity:1; transform:none; transition-delay:.34s; }
.reveal-stagger.revealed > *:nth-child(4) { opacity:1; transform:none; transition-delay:.46s; }
.reveal-stagger.revealed > *:nth-child(5) { opacity:1; transform:none; transition-delay:.58s; }
.reveal-stagger.revealed > *:nth-child(6) { opacity:1; transform:none; transition-delay:.70s; }
.reveal-stagger.revealed > *:nth-child(7) { opacity:1; transform:none; transition-delay:.82s; }
.reveal-stagger.revealed > *:nth-child(8) { opacity:1; transform:none; transition-delay:.94s; }

/* ---------- PARTICLE CANVAS ---------- */
#particle-canvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
    opacity: .55;
}

/* ---------- CLICK SPARKS ---------- */
.spark {
    position: fixed;
    width: 6px; height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: sparkFly var(--dur,.8s) ease-out forwards;
}
@keyframes sparkFly {
    0%   { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx,0px), var(--ty,0px)) scale(0); }
}

/* ---------- TYPING CURSOR ---------- */
.typing-cursor {
    display: inline-block;
    width: 3px; height: 1.1em;
    background: #00d9ff;
    margin-left: 4px;
    vertical-align: middle;
    animation: blinkCursor .7s step-end infinite;
}
@keyframes blinkCursor { 0%,100%{opacity:1} 50%{opacity:0} }

/* ---------- ENERGY COUNTER ---------- */
.stat-num { display: inline-block; }

/* ---------- FLOATING ORBS EXTRA ---------- */
.hero-container .glowing-orb {
    transition: none;
}