/* =========================================================
   SHAKTHI G — BLOODY SWEET CYBER UNIVERSE
   Static portfolio stylesheet
   ========================================================= */

:root{
  --blood:#ff0033;
  --blood-deep:#8a0010;
  --neon:#00f7ff;
  --toxic:#39ff14;
  --purple:#7a00ff;
  --grey:#9aa3ad;
  --ink:#05060a;
  --ink-2:#0a0d14;
  --panel:rgba(10,14,22,.72);
  --border:rgba(0,247,255,.35);
  --shadow-neon:0 0 18px rgba(0,247,255,.55), 0 0 40px rgba(0,247,255,.25);
  --shadow-blood:0 0 18px rgba(255,0,51,.55), 0 0 60px rgba(255,0,51,.25);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;background:#000;color:#eaf6ff;
  font-family:'Rajdhani','Orbitron',system-ui,sans-serif;cursor:none;}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:none}

/* ---------- BACKGROUND STACK ---------- */
.bg-stack{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 800px at 70% 30%, rgba(122,0,255,.18), transparent 60%),
  radial-gradient(900px 700px at 20% 80%, rgba(255,0,51,.22), transparent 65%),
  linear-gradient(180deg,#02030a 0%, #060814 60%, #000 100%);}
.bg-stack::before{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(0,247,255,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,247,255,.06) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(ellipse at center,#000 40%,transparent 80%);
  animation:gridShift 18s linear infinite;}
.bg-stack::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;pointer-events:none;}
@keyframes gridShift{from{background-position:0 0,0 0}to{background-position:42px 42px,42px 42px}}

#bg-particles, #bg-rain, #bg-fog, #bg-city{position:fixed;inset:0;z-index:-1;pointer-events:none;}
#bg-city{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600'><g fill='%23000' opacity='.9'><polygon points='0,600 0,340 60,340 60,290 110,290 110,340 160,340 160,260 220,260 220,340 280,340 280,310 340,310 340,220 410,220 410,340 470,340 470,280 530,280 530,200 600,200 600,340 670,340 670,250 740,250 740,340 820,340 820,180 900,180 900,340 980,340 980,260 1050,260 1050,300 1120,300 1120,210 1200,210 1200,340 1280,340 1280,280 1350,280 1350,330 1430,330 1430,250 1520,250 1520,340 1600,340 1600,600'/></g><g fill='%2300f7ff' opacity='.35'><rect x='75' y='305' width='6' height='6'/><rect x='180' y='280' width='6' height='6'/><rect x='300' y='325' width='6' height='6'/><rect x='430' y='240' width='6' height='6'/><rect x='560' y='220' width='6' height='6'/><rect x='700' y='270' width='6' height='6'/><rect x='850' y='200' width='6' height='6'/><rect x='1000' y='275' width='6' height='6'/><rect x='1150' y='230' width='6' height='6'/><rect x='1300' y='295' width='6' height='6'/><rect x='1470' y='270' width='6' height='6'/></g></svg>") bottom center / cover no-repeat;
  filter:drop-shadow(0 -10px 24px rgba(255,0,51,.25));opacity:.85;}

/* ---------- VIGNETTE / SCANLINES ---------- */
.vignette{position:fixed;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%, rgba(0,0,0,.85) 100%);}
.scanlines{position:fixed;inset:0;z-index:41;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);mix-blend-mode:multiply;opacity:.45;}

/* ---------- CUSTOM CURSOR ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);will-change:transform;}
.cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--blood);box-shadow:0 0 10px var(--blood);}
.cursor-ring{width:36px;height:36px;border:1px solid var(--neon);border-radius:50%;
  box-shadow:0 0 14px rgba(0,247,255,.55), inset 0 0 8px rgba(0,247,255,.35);
  transition:width .2s, height .2s, border-color .2s;}
.cursor-ring.hot{width:54px;height:54px;border-color:var(--blood);box-shadow:0 0 18px var(--blood);}

/* ---------- TOP HUD ---------- */
.hud{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
  align-items:center;padding:14px 22px;font-family:'Orbitron',sans-serif;letter-spacing:2px;
  background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);}
.hud .brand{display:flex;align-items:center;gap:10px;color:var(--neon);text-shadow:var(--shadow-neon);}
.hud .brand i{color:var(--blood);text-shadow:var(--shadow-blood);}
.hud .meta{display:flex;gap:18px;font-size:12px;color:#9fb}
.hud .meta span b{color:var(--blood)}
.hud .controls{display:flex;gap:10px}
.hud .controls button{background:rgba(0,247,255,.08);border:1px solid var(--border);color:var(--neon);
  padding:6px 10px;font-size:11px;letter-spacing:2px;border-radius:4px;
  transition:.2s;text-transform:uppercase;}
.hud .controls button:hover{background:var(--neon);color:#000;box-shadow:var(--shadow-neon)}
.hud .controls button.active{background:var(--blood);color:#fff;border-color:var(--blood);box-shadow:var(--shadow-blood);}

/* ---------- BOTTOM HUD ---------- */
.hud-bottom{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
  align-items:center;padding:10px 22px;font-family:'Orbitron',sans-serif;font-size:11px;letter-spacing:2px;
  color:#7fa; background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);}
.hud-bottom .signal{display:flex;gap:6px;align-items:center}
.hud-bottom .signal i{width:6px;height:14px;background:var(--toxic);box-shadow:0 0 6px var(--toxic);display:inline-block;animation:bar 1.2s infinite}
.hud-bottom .signal i:nth-child(2){animation-delay:.15s;height:10px}
.hud-bottom .signal i:nth-child(3){animation-delay:.3s;height:18px}
.hud-bottom .signal i:nth-child(4){animation-delay:.45s;height:8px}
@keyframes bar{0%,100%{opacity:.3}50%{opacity:1}}

/* ---------- PAGE LAYOUT (NO SCROLL) ---------- */
.stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:90px 5vw 70px;}
.scene{width:min(1280px,100%);max-height:calc(100vh - 160px);overflow:hidden;
  position:relative;}

/* ---------- TYPOGRAPHY ---------- */
.kicker{font-family:'Orbitron',sans-serif;letter-spacing:6px;color:var(--neon);
  font-size:12px;text-transform:uppercase;text-shadow:var(--shadow-neon)}
.title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(40px,7vw,96px);line-height:.95;
  text-transform:uppercase;letter-spacing:2px;
  background:linear-gradient(180deg,#fff 0%, #d9eaff 40%, #5d6f88 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 18px rgba(0,247,255,.35));}
.title .blood{background:linear-gradient(180deg,#ffd6d6,#ff0033 70%,#5a000c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(255,0,51,.55));}
.subtitle{font-family:'Orbitron';letter-spacing:8px;font-size:13px;color:#9fb;margin-top:14px}
.lead{max-width:680px;color:#c8d4e2;font-size:16px;line-height:1.6;margin-top:14px}

/* ---------- NEON BUTTON ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;
  font-family:'Orbitron',sans-serif;letter-spacing:3px;text-transform:uppercase;
  font-size:12px;padding:14px 22px;color:#dffaff;background:rgba(0,247,255,.05);
  border:1px solid var(--border);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:.2s;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(0,247,255,.25),transparent 70%);
  transform:translateX(-100%);transition:.6s}
.btn:hover{color:#000;background:var(--neon);box-shadow:var(--shadow-neon);border-color:var(--neon)}
.btn:hover::before{transform:translateX(100%)}
.btn.blood{border-color:rgba(255,0,51,.55);color:#ffd6d6;background:rgba(255,0,51,.06)}
.btn.blood:hover{background:var(--blood);color:#fff;box-shadow:var(--shadow-blood);border-color:var(--blood)}
.btn.toxic{border-color:rgba(57,255,20,.55);color:#d9ffd0;background:rgba(57,255,20,.06)}
.btn.toxic:hover{background:var(--toxic);color:#000;box-shadow:0 0 18px var(--toxic);border-color:var(--toxic)}
.btn i{font-size:14px}

.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}

/* ---------- NAV PANEL (PORTAL MENU) ---------- */
.portal-menu{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,rgba(5,6,12,.92),rgba(0,0,0,.98));backdrop-filter:blur(8px);}
.portal-menu.open{display:flex;animation:fadeIn .4s ease}
.portal-menu .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;width:min(1100px,92vw)}
.portal-menu a{display:block;padding:22px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(0,247,255,.05),rgba(255,0,51,.05));
  font-family:'Orbitron';letter-spacing:3px;font-size:14px;color:#dffaff;position:relative;overflow:hidden;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);transition:.25s}
.portal-menu a:hover{background:var(--blood);color:#fff;box-shadow:var(--shadow-blood);border-color:var(--blood)}
.portal-menu a small{display:block;color:var(--neon);font-size:10px;letter-spacing:5px;margin-bottom:8px}
.portal-menu a:hover small{color:#fff}
.portal-close{position:absolute;top:22px;right:22px;background:transparent;border:1px solid var(--blood);color:var(--blood);
  padding:8px 14px;letter-spacing:3px;font-family:'Orbitron';font-size:11px}

/* ---------- BOOT SEQUENCE (index) ---------- */
.boot{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--blood);font-family:'Orbitron';letter-spacing:6px;text-align:center;padding:30px}
.boot .warn{font-size:clamp(28px,5vw,56px);text-shadow:var(--shadow-blood);animation:glitch 1.2s infinite}
.boot .ticker{margin-top:18px;color:var(--neon);font-size:12px;letter-spacing:4px;min-height:18px}
.boot .bar{margin-top:24px;width:min(520px,80vw);height:6px;background:rgba(255,0,51,.18);border:1px solid rgba(255,0,51,.4);position:relative;overflow:hidden}
.boot .bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--blood),var(--neon));box-shadow:0 0 18px var(--neon)}
.boot .scan{position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--blood),transparent);animation:scan 2.2s linear infinite}
@keyframes scan{0%{top:0}100%{top:100%}}
@keyframes glitch{
  0%,100%{text-shadow:2px 0 var(--blood), -2px 0 var(--neon)}
  20%{text-shadow:-3px 0 var(--blood), 3px 0 var(--neon);transform:translate(2px,-1px)}
  40%{text-shadow:2px 0 var(--toxic), -2px 0 var(--blood)}
  60%{text-shadow:-2px 0 var(--neon), 2px 0 var(--blood);transform:translate(-2px,1px)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.fade-out{animation:fadeOut .8s forwards}

/* ---------- HOLOGRAM ID CARD ---------- */
.id-card{position:relative;width:min(420px,90%);padding:24px;border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(0,247,255,.08),rgba(255,0,51,.06));
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  box-shadow:0 0 40px rgba(0,247,255,.15), inset 0 0 30px rgba(0,247,255,.08);}
.id-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--neon);box-shadow:var(--shadow-neon);animation:scan 3.5s linear infinite}
.id-card .avatar{width:130px;height:130px;border-radius:50%;border:2px solid var(--neon);
  background:radial-gradient(circle at 30% 30%, #1a2533, #05070d 70%);
  display:flex;align-items:center;justify-content:center;font-family:'Orbitron';font-size:42px;color:var(--neon);
  text-shadow:var(--shadow-neon);margin:0 auto 14px;position:relative;overflow:hidden}
.id-card .avatar::after{content:"";position:absolute;inset:-2px;border:1px dashed rgba(0,247,255,.4);border-radius:50%;animation:spin 12s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.id-card .row{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#9fb;padding:6px 0;border-bottom:1px dashed rgba(0,247,255,.2)}
.id-card .row b{color:#fff;font-weight:600}
.id-card h2{font-family:'Orbitron';letter-spacing:4px;text-align:center;color:#fff;margin-bottom:14px}

/* ---------- GRID PANELS ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.panel{padding:20px;background:var(--panel);border:1px solid var(--border);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  backdrop-filter:blur(6px);}
.panel h3{font-family:'Orbitron';letter-spacing:3px;color:var(--neon);margin-bottom:10px;text-shadow:var(--shadow-neon)}
.panel p{color:#c8d4e2;font-size:14px;line-height:1.6}

/* ---------- CHECKPOINT TIMELINE ---------- */
.path{position:relative;padding:20px 10px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.path{grid-template-columns:repeat(2,1fr)}}
.checkpoint{padding:18px;border:1px solid rgba(57,255,20,.4);background:rgba(57,255,20,.05);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  position:relative;transition:.25s}
.checkpoint:hover{transform:translateY(-4px);box-shadow:0 0 26px rgba(57,255,20,.4)}
.checkpoint .ico{width:42px;height:42px;border:1px solid var(--toxic);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--toxic);margin-bottom:10px;box-shadow:0 0 16px rgba(57,255,20,.4)}
.checkpoint h4{font-family:'Orbitron';letter-spacing:2px;color:#dfffd0;font-size:14px;margin-bottom:6px}
.checkpoint small{color:#9fb;letter-spacing:2px;font-size:11px}
.checkpoint p{color:#bcd;font-size:12px;margin-top:6px;line-height:1.5}

/* ---------- SKILLS GRID ---------- */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.skill{padding:18px;border:1px solid var(--border);background:rgba(0,247,255,.04);position:relative;text-align:center;transition:.25s;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);}
.skill:hover{background:rgba(255,0,51,.06);border-color:var(--blood);transform:translateY(-4px);box-shadow:var(--shadow-blood)}
.skill .ring{width:70px;height:70px;border-radius:50%;border:2px solid var(--neon);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;
  color:var(--neon);font-size:26px;box-shadow:0 0 18px rgba(0,247,255,.4) inset, var(--shadow-neon);position:relative}
.skill:hover .ring{border-color:var(--blood);color:var(--blood);box-shadow:0 0 18px rgba(255,0,51,.4) inset, var(--shadow-blood)}
.skill .ring i{animation:spin 14s linear infinite}
.skill h4{font-family:'Orbitron';letter-spacing:2px;font-size:13px;color:#fff;margin-bottom:4px}
.skill small{color:#9fb;font-size:11px;letter-spacing:2px}

/* ---------- MISSION CARDS ---------- */
.missions{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.mission{padding:18px;background:linear-gradient(160deg,rgba(0,247,255,.06),rgba(255,0,51,.04));
  border:1px solid var(--border);position:relative;transition:.25s;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);}
.mission::before{content:"CLASSIFIED";position:absolute;top:10px;right:14px;font-family:'Orbitron';font-size:9px;letter-spacing:3px;color:var(--blood)}
.mission .img{height:120px;background:repeating-linear-gradient(45deg,#0a1018 0 8px,#0d1622 8px 16px);
  border:1px dashed rgba(0,247,255,.3);margin-bottom:10px;display:flex;align-items:center;justify-content:center;color:var(--neon);font-size:34px;text-shadow:var(--shadow-neon)}
.mission h4{font-family:'Orbitron';letter-spacing:2px;color:#fff;margin-bottom:6px}
.mission p{font-size:12px;color:#c8d4e2;line-height:1.5;margin-bottom:10px}
.mission .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.mission .tags span{font-size:10px;letter-spacing:2px;padding:3px 8px;border:1px solid rgba(0,247,255,.3);color:var(--neon);background:rgba(0,247,255,.05)}
.mission:hover{transform:translateY(-4px);box-shadow:0 0 26px rgba(0,247,255,.3)}

/* ---------- GALLERY ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.gal{aspect-ratio:1/1;border:1px solid var(--border);background:linear-gradient(160deg,#0c1320,#1a0410);
  position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-family:'Orbitron';letter-spacing:3px;color:var(--neon);text-shadow:var(--shadow-neon);
  transition:.3s;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);}
.gal::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(255,0,51,.35));}
.gal:hover{transform:scale(1.05) rotate(.5deg);box-shadow:var(--shadow-neon)}
.gal small{position:absolute;bottom:8px;left:10px;font-size:10px;letter-spacing:2px;color:#fff;z-index:2}

/* ---------- FORM ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .full{grid-column:1/-1}
.form label{display:block;font-family:'Orbitron';font-size:11px;letter-spacing:3px;color:var(--neon);margin-bottom:6px}
.form input,.form textarea{width:100%;padding:12px 14px;background:rgba(0,247,255,.04);border:1px solid var(--border);color:#eaf6ff;font-family:inherit;font-size:14px;outline:none;transition:.2s;cursor:none}
.form input:focus,.form textarea:focus{border-color:var(--blood);box-shadow:var(--shadow-blood);background:rgba(255,0,51,.05)}
.form textarea{min-height:110px;resize:none}

/* ---------- BLOODY SWEET SCREEN ---------- */
.bloody-stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}
.bloody-title{font-family:'Orbitron';font-weight:900;font-size:clamp(56px,12vw,180px);line-height:.9;letter-spacing:6px;
  background:linear-gradient(180deg,#fff,#ff264a 55%,#3a0008);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(255,0,51,.65));animation:shake 2.6s ease-in-out infinite}
@keyframes shake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}50%{transform:translate(2px,-2px)}75%{transform:translate(-2px,-1px)}}
.bloody-tag{margin-top:14px;font-family:'Orbitron';color:#ffaeae;letter-spacing:8px;font-size:13px}

/* ---------- UTIL ---------- */
.center{text-align:center}
.glow-blood{color:var(--blood);text-shadow:var(--shadow-blood)}
.glow-neon{color:var(--neon);text-shadow:var(--shadow-neon)}
.glow-toxic{color:var(--toxic);text-shadow:0 0 12px rgba(57,255,20,.6)}

/* ---------- MODES ---------- */
body.zombie-mode{filter:hue-rotate(-15deg) saturate(1.4) contrast(1.05)}
body.cyber-mode{filter:hue-rotate(40deg) saturate(1.3) brightness(1.05)}
body.light-mode{filter:invert(1) hue-rotate(180deg)}

/* small screens */
@media(max-width:640px){
  .hud .meta{display:none}
  .stage{padding:80px 4vw 70px}
}