/* ============================================================
   GHOST CC — CYBER UX ENHANCEMENT LAYER
   Additive only. Does not modify/remove existing styles/features.
   Theme: Ghost • Cyber • Dark • Horror • Hacker
   ============================================================ */
:root{
  --neon:var(--primary, #00ff66);
  --neon-soft:rgba(0,255,102,.14);
  --neon-hard:rgba(0,255,102,.55);
  --ghost-red:#ff2244;
  --fx-z:3;
}

/* ---------- Reduced motion / low-end safety ---------- */
.cy-disabled *{animation-duration:.001s!important;animation-iteration-count:1!important}
.cy-disabled .cy-layer,.cy-disabled .cy-ghost,.cy-disabled .cy-eye,.cy-disabled .cy-cursor{display:none!important}
@media (prefers-reduced-motion:reduce),(pointer:coarse){
  .cy-cursor,.cy-cursor-fx,.cy-shadow-ghost,.cy-eye{display:none!important}
}

/* ============================================================
   CINEMATIC LOADING SCREEN
   ============================================================ */
.cy-loader{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 120% at 50% 40%,#04240f 0%,#020606 55%,#000 100%);overflow:hidden;transition:opacity .65s ease,visibility .65s}
.cy-loader.done{opacity:0;visibility:hidden;pointer-events:none}
.cy-loader{animation:cyLoaderAutoHide 0s linear 3.2s forwards}
@keyframes cyLoaderAutoHide{to{opacity:0;visibility:hidden;pointer-events:none}}
.cy-loader .cl-matrix{position:absolute;inset:0;opacity:.22}
.cy-loader .cl-core{position:relative;text-align:center;max-width:520px;width:90%}
.cy-loader .cl-ghost{width:110px;height:110px;margin:0 auto 22px;position:relative;animation:clFade 2s ease-in-out infinite}
.cy-loader .cl-ghost svg{width:100%;height:100%;filter:drop-shadow(0 0 26px var(--neon-hard))}
.cy-loader .cl-scan{position:absolute;inset:-10%;background:linear-gradient(180deg,transparent 46%,rgba(0,255,102,.28) 50%,transparent 54%);background-size:100% 6px;animation:clScan 1.6s linear infinite;mix-blend-mode:screen}
@keyframes clScan{from{background-position:0 0}to{background-position:0 60px}}
.cy-loader .cl-title{font-family:var(--mono);font-size:24px;font-weight:900;letter-spacing:8px;color:var(--neon);text-shadow:0 0 24px var(--neon-hard);animation:clPulse 1.6s ease-in-out infinite}
.cy-loader .cl-bar{height:3px;width:100%;background:rgba(255,255,255,.08);border-radius:3px;margin:18px 0 12px;overflow:hidden;position:relative}
.cy-loader .cl-fill{height:100%;width:0;background:linear-gradient(90deg,var(--neon),#fff,var(--neon));box-shadow:0 0 16px var(--neon-hard);transition:width .25s ease}
.cy-loader .cl-pct{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--text-dim)}
.cy-loader .cl-term{font-family:var(--mono);font-size:12.5px;color:var(--primary);height:96px;line-height:1.75;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;overflow:hidden}
.cy-loader .cl-term .cl{opacity:0;animation:clLine .3s ease forwards}
@keyframes clLine{to{opacity:.9}}
@keyframes clPulse{0%,100%{opacity:.75}50%{opacity:1}}

/* ============================================================
   ANIMATED BACKGROUND LAYERS
   ============================================================ */
.fx-stack{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.fx-layer{position:absolute;inset:0;opacity:var(--bg-opacity,.5)}
.fx-matrix,.fx-binary,.fx-code{position:absolute;inset:0;opacity:.5}
.fx-neural{position:absolute;inset:0;opacity:.18}
.fx-fog{position:absolute;filter:blur(42px);mix-blend-mode:screen;will-change:transform,opacity}
.fx-fog.f1{width:60vw;height:55vh;left:-12vw;top:8vh;background:radial-gradient(circle,rgba(0,255,102,.16),transparent 62%);animation:foG 34s ease-in-out infinite}
.fx-fog.f2{width:52vw;height:48vh;right:-14vw;bottom:4vh;background:radial-gradient(circle,rgba(0,255,102,.12),transparent 60%);animation:foG 42s ease-in-out infinite reverse}
.fx-fog.f3{width:34vw;height:42vh;left:38vw;top:44vh;background:radial-gradient(circle,rgba(0,255,102,.1),transparent 58%);animation:foG 51s ease-in-out infinite}
@keyframes foG{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vw,-4vh) scale(1.08)}66%{transform:translate(-5vw,3vh) scale(.94)}}
.fx-scanlines{position:absolute;inset:0;opacity:.06;background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,255,102,.5) 2px 3px);mix-blend-mode:overlay}
.fx-noise{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");animation:noiseShift .9s steps(4) infinite}
@keyframes noiseShift{0%{transform:translate(0,0)}25%{transform:translate(-4px,3px)}50%{transform:translate(3px,-4px)}75%{transform:translate(-2px,-3px)}100%{transform:translate(0,0)}}
.fx-sparks{position:absolute;inset:0}
.fx-spark{position:absolute;width:9px;height:26px;border-radius:99px;background:linear-gradient(180deg,transparent,#fff 30%,var(--neon));filter:blur(.4px);box-shadow:0 0 12px var(--neon-hard);opacity:0;animation:spark 1.1s ease-out infinite}
@keyframes spark{0%{transform:translateY(18px) rotate(0);opacity:0}12%{opacity:.9}70%{opacity:.2}100%{transform:translateY(-38px) rotate(8deg);opacity:0}}
.fx-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.82) 100%)}

/* ============================================================
   WARNING STRIP (rotating system messages)
   ============================================================ */
.cy-warn-strip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:10px;justify-content:center;padding:6px 16px;font-family:var(--mono);font-size:10.5px;letter-spacing:2px;color:var(--neon);background:rgba(4,6,4,.6);border:1px solid rgba(0,255,102,.25);border-radius:30px;backdrop-filter:blur(8px);opacity:0;pointer-events:none;animation:warnIn 1s ease .8s forwards;box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 18px rgba(0,255,102,.1)}
@keyframes warnIn{to{opacity:.9}}
.cy-warn-strip .w-dot{width:7px;height:7px;border-radius:50%;background:var(--neon);box-shadow:0 0 10px var(--neon-hard);animation:blink 1.1s steps(1) infinite;flex-shrink:0}
.cy-warn-strip .w-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;transition:opacity .32s ease}

/* ============================================================
   GHOST SILHOUETTES
   ============================================================ */
.cy-ghost-wrap{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.cy-ghost{position:absolute;opacity:0;color:var(--neon);filter:blur(1px) drop-shadow(0 0 14px rgba(0,255,102,.25));animation:ghostFade 16s ease-in-out infinite;user-select:none;will-change:transform,opacity}
.cy-ghost svg{width:100%;height:100%;display:block}
@keyframes ghostFade{0%{opacity:0;transform:translateY(14px) scale(.94) rotate(-2deg)}12%{opacity:.13}38%{opacity:.08;transform:translateY(8px) scale(1) rotate(1deg)}72%{opacity:.1;transform:translateY(-10px) scale(1.04) rotate(-1deg)}100%{opacity:0;transform:translateY(-22px) scale(1)}
}

/* ============================================================
   SHADOW GHOST (rare crossing silhouette)
   ============================================================ */
.cy-shadow{position:fixed;top:0;left:-30vw;width:26vw;height:100vh;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.82) 55%,rgba(0,255,102,.06) 100%);transform:skewX(-8deg);opacity:0;will-change:transform}
.cy-shadow.run{animation:shadowCross 1s cubic-bezier(.5,0,.7,1) forwards}
@keyframes shadowCross{0%{left:-30vw;opacity:0}25%{opacity:.9}70%{opacity:.55}100%{left:105vw;opacity:0}}

/* ============================================================
   EYES IN DARKNESS
   ============================================================ */
.cy-eye{position:absolute;z-index:2;pointer-events:none;opacity:0;will-change:transform,opacity}
.cy-eye .eye-inner{position:relative;width:78px;height:34px}
.cy-eye .eyeball{position:absolute;top:0;bottom:0;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(0,255,102,.9),rgba(0,255,102,.25) 40%,transparent 70%);box-shadow:0 0 22px rgba(0,255,102,.8);animation:eyeBlink 4.5s ease-in-out infinite}
.cy-eye .eyeball::after{content:'';position:absolute;inset:12px;border-radius:50%;background:radial-gradient(circle,#000 0 34%,transparent 60%)}
.cy-eye .eyeball.r{left:0}
.cy-eye .eyeball.rg{right:0;left:auto;animation-delay:.12s}
.cy-eye .eyeball.red{background:radial-gradient(circle at 50% 45%,rgba(255,0,68,.9),rgba(255,0,68,.22) 40%,transparent 70%);box-shadow:0 0 22px rgba(255,0,68,.75)}
.cy-eye.appear{animation:eyeIn 3.2s ease-in-out forwards}
.cy-eye.sleep{animation:eyeOut .9s ease forwards}
@keyframes eyeIn{0%{opacity:0;transform:scale(.5)}15%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(1.05)}}
@keyframes eyeOut{from{opacity:1}to{opacity:0}}
@keyframes eyeBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.06)}}

/* ============================================================
   CURSOR EFFECT (desktop fine pointer)
   ============================================================ */
.cy-cursor{position:fixed;top:0;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border:1.5px solid var(--neon);border-radius:50%;z-index:999;pointer-events:none;mix-blend-mode:screen;transition:width .16s,height .16s,margin .16s,background .16s,border-color .16s;will-change:transform;box-shadow:0 0 12px rgba(0,255,102,.55)}
.cy-cursor.over{width:30px;height:30px;margin:-15px 0 0 -15px;background:rgba(0,255,102,.12);border-color:#fff}
.cy-trail{position:fixed;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--neon);pointer-events:none;mix-blend-mode:screen;opacity:.85;box-shadow:0 0 8px var(--neon-hard);z-index:998;animation:trailFade .5s ease forwards;will-change:transform}
@keyframes trailFade{to{opacity:0;transform:scale(.4)}}

/* ============================================================
   BUTTONS — neon, pulse, electric border, glitch, ripple
   ============================================================ */
.btn,.a-btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before,.a-btn::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.75),var(--neon) 80%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .25s;z-index:-1}
.btn:hover::before,.a-btn:hover::before{opacity:.85;animation:btnWash 2.4s linear infinite}
@keyframes btnWash{0%{background-position:0 0}100%{background-position:58px 0}}
.btn::after,.a-btn::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.45);transform:translate(-50%,-50%);opacity:1;pointer-events:none}
.btn:active::after,.a-btn:active::after{animation:ripple .6s ease-out forwards}
.btn-primary{animation:btnPulse 2.6s ease-in-out infinite;box-shadow:0 0 14px rgba(0,255,102,.35)}
@keyframes btnPulse{0%,100%{box-shadow:0 0 10px rgba(0,255,102,.25)}50%{box-shadow:0 0 24px rgba(0,255,102,.6)}}
@keyframes ripple{to{width:340px;height:340px;margin:-170px 0 0 -170px;opacity:0}}
.btn-glitch:hover{animation:btnGlitch .5s steps(2) infinite}
@keyframes btnGlitch{0%{transform:translate(0)}25%{transform:translate(2px,-1px) skewX(4deg)}50%{transform:translate(-2px,1px)}75%{transform:translate(1px,2px) skewX(-3deg)}100%{transform:translate(0)}}

/* ============================================================
   CARDS — 3D hover, neon borders, scan, glitch
   ============================================================ */
.product-card,.cat-card,.why-card,.testi-card,.faq-item,.a-card,.a-panel{backface-visibility:hidden;position:relative}
.product-card:hover,.cat-card:hover,.why-card:hover,.testi-card:hover{transform:translateY(-8px) rotateX(.6deg) scale(1.015);border-color:var(--neon);box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 22px rgba(0,255,102,.28),0 0 60px rgba(0,255,102,.1)}
.product-card::before,.cat-card::before{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-24deg);opacity:0;pointer-events:none}
.product-card:hover::before,.cat-card:hover::before{animation:cardShine .9s ease forwards}
@keyframes cardShine{to{left:120%;opacity:.7}}
.product-card{border:1px solid rgba(0,255,102,.18)}
.product-card:hover{perspective:900px}
.a-card,.a-panel{box-shadow:inset 0 0 40px rgba(0,255,102,.03)}
.a-card::after,.a-panel::after{content:'';position:absolute;left:0;top:-120%;width:100%;height:70%;background:linear-gradient(180deg,transparent,rgba(0,255,102,.06),transparent);pointer-events:none;animation:scanPass 7s ease-in-out infinite}
@keyframes scanPass{0%,70%{top:-120%}100%{top:120%}}

/* ============================================================
   IMAGE EFFECTS
   ============================================================ */
.product-thumb img,.pd-main img,.media-item img,.cat-card img{transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .6s}
.product-card:hover .product-thumb img,.pd-wrap:hover .pd-main img{transform:scale(1.1) rotate(.4deg);filter:contrast(1.12) brightness(1.05)}
.product-thumb::after,.pd-main::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,255,102,.04) 4px);mix-blend-mode:overlay}

/* ============================================================
   TEXT EFFECTS — neon glow / flicker / terminal
   ============================================================ */
.section-title,.hero h1,.auth-card h1,.cms-body h1{text-shadow:0 0 18px rgba(0,255,102,.35),0 0 60px rgba(0,255,102,.12)}
.hero h1 .ghost-line{animation:lineFlicker 5s linear infinite}
@keyframes lineFlicker{0%,100%{opacity:1}3%{opacity:.55}6%{opacity:1}52%{opacity:1}54%{opacity:.4}56%{opacity:1}}
.cy-type{overflow:hidden;white-space:pre-wrap;word-break:break-word}
.cy-type::after{content:'▊';color:var(--neon);animation:blink 1s steps(1) infinite;margin-left:2px}
.cy-glitch{position:relative}
.cy-glitch::before,.cy-glitch::after{content:attr(data-text);position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none}
.cy-glitch.flash::before{color:var(--ghost-red);transform:translate(-3px,-2px);opacity:.6;animation:glitchSplitA 80ms steps(2) 2}
.cy-glitch.flash::after{color:#0af;transform:translate(3px,2px);opacity:.6;animation:glitchSplitB 90ms steps(2) 2}
@keyframes glitchSplitA{0%{clip-path:inset(0 0 55% 0)}50%{clip-path:inset(45% 0 0 0)}100%{clip-path:inset(20% 0 60% 0)}}
@keyframes glitchSplitB{0%{clip-path:inset(60% 0 0 0)}50%{clip-path:inset(0 0 55% 0)}100%{clip-path:inset(30% 0 50% 0)}}

/* terminal widgets reuse */
.hero-terminal,.cy-term{box-shadow:0 20px 70px rgba(0,0,0,.7),0 0 34px rgba(0,255,102,.15);border:1px solid rgba(0,255,102,.3)}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.cy-reveal{opacity:0;transform:translateY(26px) scale(.985);filter:blur(4px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1),filter .7s;will-change:opacity,transform}
.cy-reveal.in{opacity:1;transform:none;filter:none}
.cy-reveal[data-dir=left]{transform:translateX(-34px)}
.cy-reveal[data-dir=right]{transform:translateX(34px)}
.cy-reveal[data-dir=zoom]{transform:scale(.86)}

/* ============================================================
   HEADER / FOOTER
   ============================================================ */
.site-header{background:rgba(6,6,6,.55)!important;border-bottom:1px solid rgba(0,255,102,.22);backdrop-filter:blur(18px) saturate(1.3)}
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,102,.55),transparent);animation:netPulse 4s ease-in-out infinite;opacity:.7}
@keyframes netPulse{0%,100%{transform:scaleX(.6);opacity:.35}50%{transform:scaleX(1);opacity:.9}}
.site-header.scrolled{background:rgba(4,4,4,.82);box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 26px rgba(0,255,102,.12)}
.site-footer{background:linear-gradient(0deg,var(--bg-1),rgba(10,10,10,.92))}
.site-footer::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,255,102,.5),transparent)}
.footer-bottom .mono{text-shadow:0 0 10px rgba(0,255,102,.4)}
footer{position:relative}
.fx-footer{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.35;font-family:var(--mono)}
.fx-footer b{position:absolute;color:var(--neon);animation:binFloat 14s linear infinite;font-size:11px;opacity:.8}
@keyframes binFloat{0%{transform:translateY(110%)}100%{transform:translateY(-130%)}}

/* ============================================================
   AUTH PAGE — neon form / fog avatar
   ============================================================ */
.auth-card{background:rgba(12,12,12,.82);backdrop-filter:blur(16px);border:1px solid rgba(0,255,102,.28);box-shadow:0 30px 90px rgba(0,0,0,.65),0 0 60px rgba(0,255,102,.08)}
.auth-card::before{background:linear-gradient(90deg,var(--neon),var(--ghost-red),var(--neon));animation:authline 6s linear infinite}
.cy-auth-ghost{position:absolute;top:-46px;left:50%;width:92px;height:92px;transform:translateX(-50%);filter:drop-shadow(0 0 22px var(--neon-hard));animation:authGhost 5s ease-in-out infinite;opacity:.9}
@keyframes authGhost{0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg)}50%{transform:translateX(-50%) translateY(-12px) rotate(4deg)}}
.auth-card .cy-float-eyes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cy-glow-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.4;animation:blobMove 14s ease-in-out infinite}
@keyframes blobMove{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.2)}}

/* ============================================================
   404 HORROR PAGE
   ============================================================ */
.cy-404{position:relative;text-align:center;padding:80px 16px 60px;overflow:hidden}
.cy-404 .big-ghost{position:relative;width:150px;height:150px;margin:0 auto 26px;animation:ghost404 6s ease-in-out infinite;filter:drop-shadow(0 0 34px rgba(0,255,102,.4))}
@keyframes ghost404{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-18px) rotate(3deg)}}
.cy-404 .code{font-family:var(--mono);font-size:clamp(70px,16vw,150px);font-weight:900;line-height:1;color:var(--neon);text-shadow:0 0 30px var(--neon-hard),0 0 90px rgba(0,255,102,.3);letter-spacing:6px}
.cy-404 .sig{font-family:var(--mono);letter-spacing:6px;color:var(--ghost-red);text-shadow:0 0 18px rgba(255,0,68,.6);font-size:clamp(14px,2.4vw,19px);margin-top:6px}

/* ============================================================
   ADMIN — GLASS / LIVE / GLOW
   ============================================================ */
.admin-body{background:linear-gradient(160deg,#060907,#040404 55%,#070909)}
.admin-side{background:rgba(9,10,9,.75);backdrop-filter:blur(18px)}
.admin-topbar{background:rgba(6,7,7,.6);backdrop-filter:blur(18px) saturate(1.3);border-bottom:1px solid rgba(0,255,102,.2)}
.a-card{background:rgba(16,18,16,.55);backdrop-filter:blur(12px);border:1px solid rgba(0,255,102,.16)}
.a-card:hover{border-color:var(--neon);box-shadow:0 0 24px rgba(0,255,102,.25);transform:translateY(-3px)}
.a-panel{background:rgba(15,17,15,.5);backdrop-filter:blur(14px);border:1px solid rgba(0,255,102,.14)}
.a-card .ac-value,.a-live{text-shadow:0 0 14px var(--neon-hard)}
.a-table tbody tr:hover td,.data-table tr:hover td{background:rgba(0,255,102,.04)}
.cy-admin-eye{position:fixed;top:80px;right:20px;z-index:5;pointer-events:none;opacity:.5}

/* ============================================================
   RESPONSIVE / PERF
   ============================================================ */
@media (max-width:768px){
  .cy-loader .cl-ghost{width:84px;height:84px}
  .cy-warn-strip{font-size:10px;padding:4px 8px}
  .fx-fog{filter:blur(30px)}
}
@media (max-width:560px){
  .cy-ghost{display:none!important}
  .cy-trail{display:none}
}