/* ============================================================
   VFX.CSS — Cinematic polish layer  (loads LAST → wins cascade)
   Adds, without disturbing the existing beast/futuristic design:
     1. Global film-grain texture
     2. Hero "scroll-reel" HUD  (corner brackets, REC tag,
        live FRAME counter + scrub bar, scanlines)
     3. "New" badge on featured project cards
     4. A few finishing touches (scroll hint, reduced-motion)
   Palette stays on-brand: blue #007bff  /  cyan #00d4ff
   ============================================================ */

:root{
  --vfx-cyan:#00d4ff;
  --vfx-blue:#007bff;
  --vfx-ink:#05101f;
  --vfx-mono:'JetBrains Mono','Courier New',monospace;
}

/* ───────────────────────────────────────────────────────────
   1 · GLOBAL FILM GRAIN
   A single fixed, non-interactive layer. Static (no animation)
   so it stays cheap on an already effect-heavy page.
   ─────────────────────────────────────────────────────────── */
.vfx-grain{
  position:fixed; inset:0;
  z-index:9990;
  pointer-events:none;
  opacity:.045;            /* plain alpha — no mix-blend (keeps compositing cheap) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* Skip grain on touch devices (perf) */
@media (hover:none){ .vfx-grain{ display:none; } }

/* ───────────────────────────────────────────────────────────
   2 · HERO "SCROLL-REEL" HUD
   Lives inside .shv-video-box (position:relative; overflow:hidden).
   Desktop only — keeps the mobile hero clean.
   ─────────────────────────────────────────────────────────── */
.shv-hud{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:4;
}
@media (max-width:1099px){ .shv-hud{ display:none; } }

/* L-shaped corner brackets */
.shv-hud-corner{
  position:absolute; width:30px; height:30px;
  border:2px solid rgba(0,212,255,.9);
  filter:drop-shadow(0 0 6px rgba(0,180,255,.55));
}
.shv-hud-corner.tl{ top:16px; left:16px;  border-right:0; border-bottom:0; border-top-left-radius:6px; }
.shv-hud-corner.tr{ top:16px; right:16px; border-left:0;  border-bottom:0; border-top-right-radius:6px; }
.shv-hud-corner.bl{ bottom:16px; left:16px;  border-right:0; border-top:0; border-bottom-left-radius:6px; }
.shv-hud-corner.br{ bottom:16px; right:16px; border-left:0;  border-top:0; border-bottom-right-radius:6px; }

/* Mono HUD chips (REC · resolution · frame counter) */
.shv-hud-rec,.shv-hud-res,.shv-hud-frame{
  position:absolute;
  font-family:var(--vfx-mono);
  font-size:10px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase;
  color:#eaf6ff;
  background:rgba(4,16,31,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(0,180,255,.28);
  padding:5px 10px; border-radius:7px;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.shv-hud-res{   top:18px; left:54px; }
.shv-hud-rec{   top:18px; right:54px; }
.shv-hud-frame{ bottom:18px; left:54px; color:#9fe3ff; }
.shv-hud-frame b{ color:#fff; font-weight:800; }

/* Blinking REC dot */
.shv-hud-rec i{
  width:7px; height:7px; border-radius:50%;
  background:#ff3b5c; box-shadow:0 0 8px #ff3b5c;
  animation:vfxRecBlink 1.2s steps(1) infinite;
}
@keyframes vfxRecBlink{ 50%{ opacity:.2; } }

/* Top-edge scrub / progress bar (width driven by JS) */
.shv-hud-scrub{
  position:absolute; top:0; left:0; right:0; height:3px;
  background:rgba(0,80,160,.18); overflow:hidden;
}
.shv-hud-scrub b{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--vfx-blue),var(--vfx-cyan));
  box-shadow:0 0 10px rgba(0,200,255,.85);
  transition:width .08s linear;
}

/* Faint scanlines over the footage */
.shv-hud-scan{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,
    rgba(0,40,80,.06) 0 1px, transparent 1px 3px);
  opacity:.55;
}

/* Restyle the existing "scroll down" hint to match the HUD */
#shv-hint{
  background:rgba(4,16,31,.55)!important;
  border:1px solid rgba(0,180,255,.28);
  color:#cfeeff!important;
  font-family:var(--vfx-mono)!important;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* ───────────────────────────────────────────────────────────
   3 · "NEW" BADGE on featured project cards
   Uses a dedicated .proj-new element so it never collides with
   the card's ::before (gradient border) / ::after (veil).
   ─────────────────────────────────────────────────────────── */
.colorlib-work .project.featured .proj-new{
  position:absolute; top:14px; right:14px;
  z-index:4;
  font-family:var(--vfx-mono);
  font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:#eafff8;
  padding:6px 12px; border-radius:999px;
  background:rgba(4,18,28,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(0,255,170,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.28), 0 0 14px rgba(0,255,160,.28);
  animation:vfxNewFloat 2.6s ease-in-out infinite;
}
@keyframes vfxNewFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

/* ───────────────────────────────────────────────────────────
   5 · HEADING SIZE TRIMS (user request)
   "Recent Work", "Simulations & Achievements", and the
   30+/102/Zero fact-quote were oversized (~75–89px). Trim them.
   ─────────────────────────────────────────────────────────── */
.colorlib-heading{
  font-size:clamp(22px,3.2vw,38px)!important;
  line-height:1.14!important;
}
.heading-meta{ font-size:12px!important; letter-spacing:3px!important; }
.ck-fact-quote{
  font-size:clamp(24px,4.4vw,50px)!important;
  line-height:1.2!important;
}

/* ───────────────────────────────────────────────────────────
   4 · ACCESSIBILITY — honour reduced-motion
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .shv-hud-rec i,
  .colorlib-work .project.featured .proj-new{ animation:none; }
  .shv-hud-scrub b{ transition:none; }
  .vfx-progress > b{ transition:none; }
}

/* ───────────────────────────────────────────────────────────
   6 · SCROLL-PROGRESS BAR (top of page) — width set via JS
   ─────────────────────────────────────────────────────────── */
.vfx-progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:9991; pointer-events:none; background:rgba(0,90,180,.08);
}
.vfx-progress > b{
  display:block; height:100%; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#0070ff,#00d4ff 55%,#7be9ff);
  box-shadow:0 0 12px rgba(0,200,255,.75); will-change:transform;
}

/* ───────────────────────────────────────────────────────────
   7 · (Aurora intentionally NOT added — sections already use a
   deliberate cream/white rhythm from cinema.css / slides.css;
   overlaying a blue mesh would clash and break that rhythm.)
   ─────────────────────────────────────────────────────────── */

/* ───────────────────────────────────────────────────────────
   8 · MARQUEE edge fade (premium falloff at both ends)
   ─────────────────────────────────────────────────────────── */
.fx-marquee{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent);
}

/* ───────────────────────────────────────────────────────────
   9 · HIGH-END FINISHING — custom scrollbar + text selection
   ─────────────────────────────────────────────────────────── */
::selection{ background:rgba(0,160,255,.22); color:#04121f; }
html::-webkit-scrollbar{ width:11px; height:11px; }
html::-webkit-scrollbar-track{ background:#eaf1fa; }
html::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#0a86ff,#00c8ff);
  border-radius:999px; border:2px solid #eaf1fa;
}
html::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#0070ff,#00a8ff); }

/* ───────────────────────────────────────────────────────────
   10 · SKILLS — icon chips + animated fill bars (JS-driven)
   ─────────────────────────────────────────────────────────── */
.colorlib-skills .progress-wrap h3{
  display:flex; align-items:center; gap:10px;
  font-size:15px!important; font-weight:700!important;
}
.colorlib-skills .skill-ico{
  width:30px; height:30px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px;
  background:linear-gradient(135deg,#eaf4ff,#ffffff);
  border:1px solid rgba(0,120,255,.18);
  box-shadow:0 4px 10px rgba(0,80,200,.08), inset 0 0 0 1px rgba(255,255,255,.7);
  font-size:14px;
}
.colorlib-skills .skill-ico i{
  background:linear-gradient(135deg,#007bff,#00d4ff);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* Fill animation — width is toggled 0 → target by JS on scroll-in */
.colorlib-skills .progress{ overflow:hidden; border-radius:999px; background:rgba(0,90,180,.08)!important; }
.colorlib-skills .progress-bar{
  transition:width 1.3s cubic-bezier(.2,.8,.2,1);
  border-radius:999px;
  box-shadow:0 0 10px rgba(0,160,255,.35);
  position:relative; overflow:hidden;
}
/* moving sheen along the filled portion */
.colorlib-skills .progress-bar::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-100%);
  animation:vfxBarSheen 2.6s ease-in-out 1.2s infinite;
}
@keyframes vfxBarSheen{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }
@media (prefers-reduced-motion:reduce){
  .colorlib-skills .progress-bar{ transition:none; }
  .colorlib-skills .progress-bar::after{ animation:none; display:none; }
}

/* ───────────────────────────────────────────────────────────
   11 · ACCORDION entry icons (Experience + Education) + smaller text
   ─────────────────────────────────────────────────────────── */
.colorlib-experience .panel-title a,
.colorlib-education  .panel-title a{ font-size:15px!important; }
.acc-ico{
  width:34px; height:34px; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  vertical-align:middle; margin-right:11px;
  border-radius:10px;
  background:linear-gradient(135deg,#eaf4ff,#ffffff);
  border:1px solid rgba(0,120,255,.18);
  box-shadow:0 4px 10px rgba(0,80,200,.08), inset 0 0 0 1px rgba(255,255,255,.7);
  color:#007bff; font-size:15px;
}
.acc-ico i{
  background:linear-gradient(135deg,#007bff,#00d4ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.edu-logo{ background:#fff; padding:5px; overflow:hidden; }
.edu-logo img{ width:100%; height:100%; object-fit:contain; }
.edu-logo i{ display:none; font-size:15px; }
/* compact, aesthetic body text in Experience / Education / Academic Projects */
.colorlib-experience .panel-body, .colorlib-education .panel-body,
.colorlib-experience .panel-body li, .colorlib-education .panel-body li,
.colorlib-experience .panel-body p, .colorlib-education .panel-body p{
  font-size:13.5px!important; line-height:1.65!important;
}

/* ───────────────────────────────────────────────────────────
   12 · HIRE block — swap the blue "ring light" for soft blue SMOKE
   ─────────────────────────────────────────────────────────── */
.ck-hire-rings{ display:none !important; }            /* remove the rotating ring light */
.colorlib-about .hire::after{ display:none !important; }   /* KILL the insane.css rotating conic blue glow (the "blue light") */
.colorlib-about .hire{
  background:linear-gradient(180deg,#eef4fb 0%,#f4f8fd 100%) !important;
  isolation:isolate; overflow:hidden;
}
/* Smoke BODY — soft blue clouds across the card (injected .hire-smoke element) */
.hire-smoke{
  position:absolute; inset:-28%; z-index:0; pointer-events:none;
  background:
    radial-gradient(26% 36% at 16% 28%, rgba(40,120,235,.40), transparent 64%),
    radial-gradient(32% 40% at 80% 20%, rgba(90,160,255,.32), transparent 66%),
    radial-gradient(38% 46% at 60% 84%, rgba(120,185,255,.34), transparent 64%),
    radial-gradient(24% 32% at 38% 66%, rgba(60,140,235,.28), transparent 66%),
    radial-gradient(28% 34% at 92% 62%, rgba(150,205,255,.30), transparent 64%);
  filter:blur(44px); will-change:transform;
  animation:ckSmokeDrift 30s ease-in-out infinite alternate;
}
/* Smoke TEXTURE — desaturated fractal-noise wisps blended over the clouds
   (this grain is what makes it read as drifting smoke, not a glow) */
.hire-smoke-tex{
  position:absolute; inset:-30%; z-index:1; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.018' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E") center/cover;
  opacity:.42; mix-blend-mode:soft-light; will-change:transform;
  animation:ckSmokeTex 36s ease-in-out infinite alternate;
}
@keyframes ckSmokeDrift{ 0%{transform:translate(-3%,-2%)} 50%{transform:translate(3%,3%)} 100%{transform:translate(-1%,2%)} }
@keyframes ckSmokeTex{ 0%{transform:translate(-5%,3%)} 100%{transform:translate(5%,-4%)} }
.ck-hire-orbs{ z-index:3 !important; }                          /* tech orbs above the smoke */
.ck-hire-content{ position:relative; z-index:4 !important; }    /* text above everything */
@media (prefers-reduced-motion:reduce){ .hire-smoke, .hire-smoke-tex{ animation:none; } }

/* ───────────────────────────────────────────────────────────
   14 · LAZY-LOAD heavy project GIFs (perf)
   The !important:none keeps the browser from fetching the inline
   background gif on load; JS re-applies it (inline !important) only
   when the card nears the viewport. Cuts initial load ~55MB → few MB.
   ─────────────────────────────────────────────────────────── */
.colorlib-work .project{ background-image:none !important; background-color:#0a1730; }
.colorlib-work .project::after{ /* keep beast.css veil readable on the placeholder */ }

/* ───────────────────────────────────────────────────────────
   15 · "1+ Year Real Industry Experience" counter — the "+" via ::after
   (survives the countTo plugin overwriting the number text)
   ─────────────────────────────────────────────────────────── */
.colorlib-counters .exp-counter::after{
  content:'+'; color:#fff;
  font-family:'Playfair Display',serif; font-weight:800;
  margin-left:1px;
}

/* ───────────────────────────────────────────────────────────
   13 · Manifesto statement — smaller, calmer text
   ─────────────────────────────────────────────────────────── */
.ck-manifesto-statement{
  font-size:clamp(20px,2.8vw,36px)!important;
  line-height:1.22!important;
  margin-bottom:40px!important;
}
.ck-sign-name{ font-size:13px!important; }