/*
Theme Name: Neural Ninjas Simulation Lab
Theme URI: https://neuralninjas.in
Author: Jhatura
Description: Dark, tech-toned animated theme for Neural Ninjas — a large hero image carousel under a glowing animated wordmark, and two 3D shuffling card decks for Blog Articles and Simulation Labs. Built for AI/ML education content with Indian-context examples.
Version: 2.1
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: neural-ninjas
*/

:root{
  --void:#050505;
  --void-2:#0f0525;
  --surface:rgba(255,255,255,0.03);
  --border:rgba(34,211,238,0.2);

  /* NEON & VIBRANT PALETTE */
  --cyan:#22d3ee;
  --blue:#7b2cbf;
  --indigo:#3c096c;
  --teal:#a855f7;
  --hot-pink:#f472b6;
  --lime:#a3e635;

  --ink:#ffffff;
  --ink-dim:#a0a0a0;

  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}

/* ----- BODY: DARK GRADIENT + IMAGE (blend-mode: screen) ----- */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, #1a0a2e 0%, #0a0515 40%, #020810 70%, #000000 100%),
        radial-gradient(circle at 80% 70%, #1a0a2e 0%, #050a14 50%, #000000 100%),
        url('https://neuralninjas.in/wp-content/uploads/2026/07/106.jpg');
    background-size: cover, cover, cover;
    background-position: center, center, center;
    background-attachment: fixed, fixed, fixed;
    background-blend-mode: screen, screen, normal;
    background-color: #000000;
    color: var(--ink);
    font-family: var(--font-body);
    overflow-x:hidden;
}

a{ color:inherit; }
img{ max-width:100%; display:block; }

/* ---------------- AMBIENT TECH GRID + GLOW ---------------- */
.bg-grid {
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size:64px 64px;
    opacity: 0.25;
}

.bg-glow {
    position: fixed; inset: 0; z-index: -3; pointer-events: none;
    background:
        radial-gradient(circle at 15% 30%, rgba(123, 44, 191, 0.25) 0%, transparent 60%),
        radial-gradient(circle at 85% 70%, rgba(34, 211, 238, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(244, 114, 182, 0.12) 0%, transparent 50%),
        linear-gradient(135deg, rgba(10, 5, 21, 0.8) 0%, rgba(2, 8, 16, 0.9) 100%);
    opacity: 1;
}

.bg-glow span{
    position:absolute;
    border-radius:50%;
    filter:blur(150px);
    opacity:0.4;
    animation:drift 28s ease-in-out infinite;
}
.bg-glow span:nth-child(1){
    width:800px; height:800px;
    background:linear-gradient(135deg, #7b2cbf, #3c096c);
    top:-25%; left:-20%;
}
.bg-glow span:nth-child(2){
    width:700px; height:700px;
    background:linear-gradient(225deg, #22d3ee, #0a5c6e);
    top:30%; right:-25%;
    animation-delay:-10s;
}
.bg-glow span:nth-child(3){
    width:600px; height:600px;
    background:linear-gradient(45deg, #f472b6, #7b2cbf);
    bottom:-20%; left:20%;
    animation-delay:-18s;
}
@keyframes drift{
    0%,100%{ transform:translate(0,0) scale(1);}
    50%{ transform:translate(60px,-50px) scale(1.15);}
}

/* ---------------- HEADER ---------------- */
.site-header{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px; background:rgba(4,7,17,0.6);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.site-header--overlay{
  position:absolute; top:0; left:0; right:0;
  background:linear-gradient(180deg, rgba(4,7,17,0.6), transparent);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  border-bottom:none;
}
.site-header--overlay .site-nav a{ text-shadow:0 1px 6px rgba(0,0,0,0.6); }
.site-logo--icon{ gap:0; }
.site-logo{
  font-family:var(--font-display); font-weight:800; font-size:1.05rem; text-decoration:none;
  display:flex; align-items:center; gap:9px;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime), var(--teal), var(--cyan));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 4s linear infinite;
}
.site-logo .dot{
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--cyan), var(--hot-pink));
  box-shadow:0 0 20px 6px rgba(34,211,238,0.3);
  animation:blink 1.2s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:0.3; } }
.site-nav ul{ list-style:none; display:flex; gap:28px; }
.site-nav a{
  text-decoration:none;
  color:var(--ink-dim);
  font-size:0.88rem;
  font-weight:500;
  background:linear-gradient(120deg, var(--cyan), var(--hot-pink));
  background-size:0% 2px;
  background-repeat:no-repeat;
  background-position:0% 100%;
  transition: background-size 0.3s, color 0.2s;
}
.site-nav a:hover{
  background-size:100% 2px;
  color:var(--ink);
}

/* ---------------- HERO IMAGE CAROUSEL ---------------- */
.hero-carousel{ position:relative; height:100vh; overflow:hidden; }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease; }
.hero-slide.active{ opacity:1; }

.hero-slide.image-slide img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(0.3) brightness(0.5) contrast(1.2) saturate(1.3);
  transform:scale(1.06);
  animation:kenburns 12s ease-in-out infinite alternate;
}

.hero-slide.video-slide video{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(0.8) contrast(1.1) saturate(1.2);
}

.hero-slide.gradient-slide{
  background:linear-gradient(135deg, #1a0a2e, #0a0515 40%, #020810 80%, #000000);
  background-size:300% 300%;
  animation:gradientDrift 8s ease-in-out infinite;
}
@keyframes gradientDrift{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
@keyframes kenburns{ to{ transform:scale(1.15) translate(-1.5%, -1%); } }

.hero-slide.image-slide::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(4,7,17,0.5) 0%, rgba(4,7,17,0.2) 40%, var(--void) 96%),
    linear-gradient(120deg, rgba(34,211,238,0.3), rgba(244,114,182,0.25));
  mix-blend-mode:multiply;
}
.hero-slide.video-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,7,17,0.4) 0%, transparent 35%, rgba(4,7,17,0.5) 70%, var(--void) 100%);
}
.hero-slide.gradient-slide::after{ content:none; }
.hero-content{
  position:relative; z-index:5; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:24px;
}
.hero-eyebrow{
  font-family:var(--font-mono); font-size:0.82rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:26px; text-shadow:0 0 30px rgba(34,211,238,0.4);
  animation:colorPulse 3s ease-in-out infinite;
}
@keyframes colorPulse{
  0%,100%{ color:var(--cyan); text-shadow:0 0 30px rgba(34,211,238,0.4); }
  50%{ color:var(--hot-pink); text-shadow:0 0 40px rgba(244,114,182,0.5); }
}
.hero-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(3.2rem, 10vw, 7.8rem); line-height:0.95; letter-spacing:-0.03em;
}
.hero-title span{
  display:block;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime), var(--teal), var(--cyan));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 4s linear infinite;
  filter:drop-shadow(0 0 40px rgba(34,211,238,0.25));
}
@keyframes gradShift{ to{ background-position:300% center; } }
.hero-sub{
  max-width:600px; margin:26px auto 38px;
  font-size:1.1rem;
  line-height:1.7;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 5s linear infinite;
  font-weight:500;
}
.hero-cta{
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:17px 36px; border-radius:999px; font-weight:700; font-size:1rem; text-decoration:none; color:var(--void);
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime)); background-size:200% auto;
  box-shadow:0 25px 50px -12px rgba(34,211,238,0.3);
  transition:transform 0.25s ease, background-position 0.6s ease;
}
.hero-cta:hover{ transform:translateY(-3px) scale(1.03); background-position:100% center; }

.hero-nav{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:6;
  display:flex; align-items:center; gap:18px;
}
.hero-nav button{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--border);
  background:rgba(255,255,255,0.06); backdrop-filter:blur(10px); color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all 0.25s ease;
}
.hero-nav button:hover{ background:rgba(34,211,238,0.2); border-color:var(--hot-pink); }
.hero-dots{ display:flex; gap:8px; }
.hero-dots span{ width:7px; height:7px; border-radius:50%; background:var(--border); transition:all 0.3s ease; cursor:pointer; }
.hero-dots span.active{
  width:26px; border-radius:4px;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime));
}

/* ---------------- SECTION HEADERS ---------------- */
.section{ max-width:1300px; margin:0 auto; padding:110px 32px; position:relative; }
.section-header{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:12px; }
.section-header .tag{
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.15em; text-transform:uppercase;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:10px; display:block;
}
.section-header h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(2rem, 4vw, 3rem); }
.section-header h2 .section-link{
  text-decoration:none;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime), var(--teal));
  background-size:300% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 4s linear infinite;
  transition:filter 0.3s ease;
}
.section-header h2 .section-link:hover{
  filter:drop-shadow(0 0 30px rgba(34,211,238,0.3));
}
.labs .section-header h2 .section-link {
  background:linear-gradient(90deg, var(--hot-pink), var(--teal), var(--cyan), var(--lime));
  background-size:300% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 4s linear infinite;
}
.labs .section-header h2 .section-link:hover{
  filter:drop-shadow(0 0 30px rgba(244,114,182,0.3));
}
.section-header p{
  font-family:var(--font-mono);
  font-size:0.85rem;
  max-width:300px;
  text-align:right;
  background:linear-gradient(90deg, var(--lime), var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.labs .section-header .tag{
  background:linear-gradient(90deg, var(--hot-pink), var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* =====================================================================
   3D CARD DECK — photo-only cards, single clean neon-glow system.
   This is the ONLY place deck-card / deck-card:hover are defined.
   ===================================================================== */
.deck-stage{ position:relative; height:460px; margin-top:60px; perspective:1600px; }
.deck-track{ position:relative; width:100%; height:100%; transform-style:preserve-3d; }

.deck-card{
  position:absolute; top:50%; left:50%; width:320px; height:400px;
  margin:-200px 0 0 -160px;
  border-radius:20px; overflow:hidden; cursor:pointer;
  border:2px solid var(--cyan);
  box-shadow:0 0 18px rgba(34,211,238,0.35), 0 8px 40px rgba(0,0,0,0.6);
  transition:transform 0.85s cubic-bezier(.16,1,.3,1), opacity 0.6s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  transform-style:preserve-3d;
  text-decoration:none; color:var(--ink); display:block;
  animation:neonIdle 2.4s ease-in-out infinite;
}
.deck-card.stacked{ transition:none; }

@keyframes neonIdle{
  0%,100%{ box-shadow:0 0 18px rgba(34,211,238,0.35), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--cyan); }
  50%{ box-shadow:0 0 30px rgba(34,211,238,0.6), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--cyan); }
}

.deck-card:hover{ animation:neonHover 1s ease-in-out infinite; }
@keyframes neonHover{
  0%,100%{ box-shadow:0 0 35px var(--hot-pink), 0 0 70px var(--teal); border-color:var(--hot-pink); }
  50%{ box-shadow:0 0 55px var(--teal), 0 0 90px var(--hot-pink); border-color:var(--teal); }
}

/* Simulation Labs deck gets its own idle/hover colorway */
.labs .deck-card{ border-color:var(--teal); animation:neonIdleLabs 2.4s ease-in-out infinite; }
@keyframes neonIdleLabs{
  0%,100%{ box-shadow:0 0 18px rgba(168,85,247,0.35), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--teal); }
  50%{ box-shadow:0 0 30px rgba(168,85,247,0.6), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--teal); }
}
.labs .deck-card:hover{ animation:neonHoverLabs 1s ease-in-out infinite; }
@keyframes neonHoverLabs{
  0%,100%{ box-shadow:0 0 35px var(--lime), 0 0 70px var(--cyan); border-color:var(--lime); }
  50%{ box-shadow:0 0 55px var(--cyan), 0 0 90px var(--lime); border-color:var(--cyan); }
}

/* Photo fills the entire card — this is the only visible content besides the tag */
.deck-photo-wrap{ position:absolute; inset:0; overflow:hidden; background:var(--void-2); }
.deck-photo-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }

.deck-tag{
  position:absolute; bottom:14px; right:14px; z-index:3; /* for moving the tag positioning */
  font-family:var(--font-mono); font-size:0.65rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--void); background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime)); padding:4px 11px; border-radius:999px;
}
.labs .deck-tag{ background:linear-gradient(90deg, var(--hot-pink), var(--teal), var(--cyan)); }

/* Title/excerpt markup (if still output by PHP) is hidden — cards are photo-only */
.deck-card .deck-body{ display:none; }

.deck-nav{ display:flex; justify-content:center; gap:16px; margin-top:36px; }
.deck-nav button{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); backdrop-filter:blur(10px); color:var(--ink); cursor:pointer;
  font-size:1.1rem; transition:all 0.25s ease;
}
.deck-nav button:hover{ background:rgba(34,211,238,0.15); border-color:var(--hot-pink); transform:scale(1.06); }
.labs .deck-nav button:hover{ background:rgba(244,114,182,0.15); border-color:var(--teal); }

.deck-empty{ color:var(--ink-dim); font-family:var(--font-mono); text-align:center; padding:40px 0; }

/* ---------------- ARCHIVE / SEARCH GRID (index.php) ---------------- */
.archive-section{ max-width:1180px; margin:0 auto; padding:80px 24px 120px; }
.archive-header{
  display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px;
  margin-bottom:48px; border-bottom:1px solid var(--border); padding-bottom:24px;
}
.archive-header h1, .archive-header h2{
  font-family:var(--font-display); font-weight:800; font-size:2rem;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 4s linear infinite;
}
.archive-header p{
  font-family:var(--font-mono);
  font-size:0.85rem;
  background:linear-gradient(90deg, var(--lime), var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.blog-tabs{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:40px; }
.blog-tab{
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.04em; text-transform:uppercase;
  padding:9px 20px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--ink-dim); cursor:pointer;
  transition:all 0.25s ease;
}
.blog-tab:hover{ border-color:var(--hot-pink); color:var(--ink); }
.blog-tab.active{
  color:var(--void); background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime)); border-color:transparent; font-weight:600;
}

.blog .lab-card{ border-color:var(--cyan); animation:neonIdle 2.4s ease-in-out infinite; }
.blog .lab-card:hover{ animation:neonHover 1s ease-in-out infinite; }

.archive-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:28px; }

.archive-card{
  position:relative; background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; text-decoration:none; color:var(--ink); display:block;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}
.archive-card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -20px rgba(34,211,238,0.2); }
.archive-card .deck-photo-wrap{ position:relative; height:180px; }
.archive-card .card-body{ padding:24px; }
.archive-card h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  line-height:1.35;
  margin-bottom:10px;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.archive-card .excerpt{ color:var(--ink-dim); font-size:0.9rem; line-height:1.55; margin-bottom:18px; }
.archive-card .meta{
  display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-dim);
  border-top:1px solid var(--border); padding-top:14px;
}

.archive-pagination{ display:flex; justify-content:center; gap:12px; margin-top:56px; font-family:var(--font-mono); }
.archive-pagination a, .archive-pagination span{
  padding:10px 18px; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--ink-dim); font-size:0.85rem;
}
.archive-pagination a:hover{ border-color:var(--hot-pink); color:var(--hot-pink); }
.archive-pagination .current{ color:var(--void); background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime)); border-color:transparent; font-weight:700; }

/* ---------------- SINGLE POST ---------------- */
.single-post-wrap{ max-width:760px; margin:0 auto; padding:80px 24px 120px; }
.single-post-wrap .deck-tag{ position:static; display:inline-block; margin-bottom:20px; }
.single-post-wrap h1{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem, 4vw, 2.8rem); line-height:1.15; margin-bottom:20px;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime), var(--teal));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:gradShift 4s linear infinite;
}
.single-post-meta{
  font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-dim);
  margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--border);
}
.single-post-content{ font-size:1.05rem; line-height:1.8; color:var(--ink); }
.single-post-content p{ margin-bottom:1.4em; }
.single-post-content h2{
  font-family:var(--font-display); font-size:1.5rem; margin:2em 0 0.6em;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.single-post-content h3{ font-family:var(--font-display); font-size:1.2rem; margin:1.8em 0 0.5em; color:var(--lime); }
.single-post-content img{ border-radius:12px; margin:2em 0; }
.single-post-content pre{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:20px;
  overflow-x:auto; font-family:var(--font-mono); font-size:0.85rem; margin:1.6em 0;
}
.single-post-content code{ font-family:var(--font-mono); background:var(--surface); padding:2px 6px; border-radius:4px; }
.single-post-content a{ color:var(--hot-pink); text-decoration:underline; }
.single-post-content blockquote{
  border-left:3px solid transparent; border-image:linear-gradient(180deg, var(--hot-pink), var(--cyan), var(--lime)) 1;
  padding-left:20px; color:var(--ink-dim); margin:1.6em 0; font-style:italic;
}

/* ---------------- FOOTER ---------------- */
.site-footer{
  border-top:1px solid var(--border); padding:44px 32px; text-align:center;
  font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-dim);
}
.site-footer a{
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink), var(--lime), var(--teal));
  background-size:300% auto;
  -webkit-background-clip:text;
  background-clip:text; color:transparent; text-decoration:none; font-weight:600;
  animation:gradShift 4s linear infinite;
}

@media (max-width:640px){
  .deck-card{ width:260px; margin:-200px 0 0 -130px; }
  .section-header{ flex-direction:column; align-items:flex-start; }
  .section-header p{ text-align:left; }
  .archive-header{ flex-direction:column; align-items:flex-start; }
}

/* Electronics Labs deck — its own idle/hover colorway */
.electronics .deck-card{ border-color:var(--lime); animation:neonIdleElectronics 2.4s ease-in-out infinite; }
@keyframes neonIdleElectronics{
  0%,100%{ box-shadow:0 0 18px rgba(163,230,53,0.35), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--lime); }
  50%{ box-shadow:0 0 30px rgba(163,230,53,0.6), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--lime); }
}
.electronics .deck-card:hover{ animation:neonHoverElectronics 1s ease-in-out infinite; }
@keyframes neonHoverElectronics{
  0%,100%{ box-shadow:0 0 35px var(--blue), 0 0 70px var(--hot-pink); border-color:var(--blue); }
  50%{ box-shadow:0 0 55px var(--hot-pink), 0 0 90px var(--blue); border-color:var(--hot-pink); }
}
.electronics .deck-tag{ background:linear-gradient(90deg, var(--lime), var(--blue)); }
.electronics .deck-nav button:hover{ background:rgba(163,230,53,0.15); border-color:var(--lime); }
.electronics .section-header .tag{
  background:linear-gradient(90deg, var(--lime), var(--blue));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.electronics .section-header h2 .section-link{
  background:linear-gradient(90deg, var(--lime), var(--blue), var(--hot-pink));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 4s linear infinite;
}


/* ========================================
   ROBOTICS LABS - COMPLETE STYLING
   ======================================== */

/* ========================================
   ROBOTICS LABS - FINAL
   ======================================== */

.robotics .deck-card {
    border-color: rgba(255, 165, 0, 0.3) !important;
    animation: neonIdleRobotics 2.4s ease-in-out infinite !important;
}
@keyframes neonIdleRobotics {
    0%, 100% { box-shadow: 0 0 18px rgba(255,165,0,0.35), 0 8px 40px rgba(0,0,0,0.6); border-color: rgba(255,165,0,0.3); }
    50% { box-shadow: 0 0 30px rgba(255,165,0,0.6), 0 8px 40px rgba(0,0,0,0.6); border-color: rgba(255,165,0,0.6); }
}
.robotics .deck-card:hover { animation: neonHoverRobotics 1s ease-in-out infinite !important; }
@keyframes neonHoverRobotics {
    0%, 100% { box-shadow: 0 0 35px #ff6a00, 0 0 70px #ff4500; border-color: #ff6a00; }
    50% { box-shadow: 0 0 55px #ff4500, 0 0 90px #ff6a00; border-color: #ff4500; }
}

.robotics .deck-tag {
    background: linear-gradient(90deg, #22d3ee, #f472b6, #a3e635) !important;
}

/* Title/desc text completely removed — photo-only cards, jaise baaki decks */
.robotics .deck-card .deck-body { display: none !important; }

.robotics .deck-nav button { border-color: rgba(255,165,0,0.15) !important; color: #ffa500 !important; }
.robotics .deck-nav button:hover { background: rgba(255,165,0,0.15) !important; border-color: #ffa500 !important; }

.robotics .section-header .tag {
    background: linear-gradient(90deg, #22d3ee, #f472b6, #a3e635) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important; -webkit-text-fill-color: transparent !important;
    animation: gradShift 3s linear infinite !important; display: inline-block !important;
}
.robotics .section-header h2 .section-link {
    background: linear-gradient(90deg, #22d3ee, #f472b6, #a3e635, #a855f7) !important;
    background-size: 300% 100% !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important; -webkit-text-fill-color: transparent !important;
    animation: gradShift 3s linear infinite !important; display: inline-block !important;
    text-decoration: none !important;
}
.robotics .section-header p {
    background: linear-gradient(90deg, #a3e635, #22d3ee, #f472b6) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    color: transparent !important; -webkit-text-fill-color: transparent !important;
    animation: gradShift 3s linear infinite !important;
}

.robotics .lab-card{ border-color: rgba(255,165,0,0.3); animation: neonIdleRobotics 2.4s ease-in-out infinite; }
.robotics .lab-card:hover{ animation: neonHoverRobotics 1s ease-in-out infinite; }
.robotics .lab-card .deck-tag{
  background: linear-gradient(90deg, #22d3ee, #f472b6, #a3e635);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}


/* ===== DSA Labs — indigo/lime colorway ===== */
.dsa .deck-card{ border-color: var(--lime); animation: neonIdleDsa 2.4s ease-in-out infinite; }
@keyframes neonIdleDsa{
  0%,100%{ box-shadow:0 0 18px rgba(163,230,53,0.35), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--lime); }
  50%{ box-shadow:0 0 30px rgba(163,230,53,0.6), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--lime); }
}
.dsa .deck-card:hover{ animation: neonHoverDsa 1s ease-in-out infinite; }
@keyframes neonHoverDsa{
  0%,100%{ box-shadow:0 0 35px var(--indigo), 0 0 70px var(--cyan); border-color:var(--indigo); }
  50%{ box-shadow:0 0 55px var(--cyan), 0 0 90px var(--indigo); border-color:var(--cyan); }
}
.dsa .deck-tag{ background:linear-gradient(90deg, var(--lime), var(--indigo)); }
.dsa .section-header .tag{ background:linear-gradient(90deg, var(--lime), var(--indigo)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dsa .section-header h2 .section-link{
  background:linear-gradient(90deg, var(--lime), var(--indigo), var(--cyan));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 4s linear infinite;
}
.dsa .deck-card .deck-body{ display:none; }

/* ===== PyTorch Labs — hot-pink/indigo colorway, dimmed "coming soon" state ===== */
.pytorch .deck-card{ border-color: var(--hot-pink); animation: neonIdlePytorch 2.4s ease-in-out infinite; opacity:0.55; cursor:not-allowed; }
@keyframes neonIdlePytorch{
  0%,100%{ box-shadow:0 0 14px rgba(244,114,182,0.25), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--hot-pink); }
  50%{ box-shadow:0 0 22px rgba(244,114,182,0.4), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--hot-pink); }
}
.pytorch .deck-tag{ background:linear-gradient(90deg, var(--hot-pink), var(--indigo)); }
.pytorch .section-header .tag{ background:linear-gradient(90deg, var(--hot-pink), var(--indigo)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pytorch .section-header h2 .section-link{
  background:linear-gradient(90deg, var(--hot-pink), var(--indigo), var(--teal));
  background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradShift 4s linear infinite;
}
.pytorch .deck-card .deck-body{ display:none; }
.coming-soon-badge{
  position:absolute; bottom:14px; left:14px; z-index:3;
  font-family:var(--font-mono); font-size:0.6rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--void); background:var(--hot-pink); padding:4px 10px; border-radius:999px;
}


/* ========================================
   LAB REVEAL GRID — all cards visible, staggered entrance + 3D tilt
   ======================================== */
.lab-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:28px;
  margin-top:50px;
  perspective:1400px;
}

.lab-card{
  position:relative;
  background:var(--surface);
  border:2px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:var(--ink);
  display:block;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:1 !important;
  transform: perspective(1000px) translateY(50px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(0.92);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.16,1,.3,1), box-shadow 0.4s ease, border-color 0.4s ease;
  transition-delay: calc(var(--i, 0) * 0.06s);
}

.lab-grid.in-view .lab-card{
  opacity:1;
  transform: perspective(1000px) translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1);
}

.lab-card.tilting{ transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.1s ease-out; }

.lab-card .deck-photo-wrap{ position:relative; height:180px; }
.lab-card-body{ padding:20px 22px 24px; }
.lab-card-body h3{
  font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.35; margin-bottom:8px;
  background:linear-gradient(90deg, var(--cyan), var(--hot-pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% auto; animation:gradShift 4s linear infinite;
}
.lab-card-body p{ color:var(--ink-dim); font-size:0.85rem; line-height:1.55; }

/* idle glow — reuses existing category keyframes */
.labs .lab-card{ border-color:var(--teal); animation:neonIdleLabs 2.4s ease-in-out infinite; }
.labs .lab-card:hover{ animation:neonHoverLabs 1s ease-in-out infinite; }
.labs .lab-card .deck-tag{ background:linear-gradient(90deg, var(--hot-pink), var(--teal), var(--cyan)); }

.dsa .lab-card{ border-color:var(--lime); animation:neonIdleDsa 2.4s ease-in-out infinite; }
.dsa .lab-card:hover{ animation:neonHoverDsa 1s ease-in-out infinite; }
.dsa .lab-card .deck-tag{ background:linear-gradient(90deg, var(--lime), var(--indigo)); }

.pytorch .lab-card{ border-color:var(--hot-pink); opacity:0; }
.pytorch .lab-grid.in-view .lab-card{ opacity:0.55; }
.pytorch .lab-card{ animation:neonIdlePytorch 2.4s ease-in-out infinite; cursor:not-allowed; }
.pytorch .lab-card .deck-tag{ background:linear-gradient(90deg, var(--hot-pink), var(--indigo)); }

@media (max-width:640px){
  .lab-grid{ grid-template-columns:1fr 1fr; gap:16px; }
}
@media (max-width:420px){
  .lab-grid{ grid-template-columns:1fr; }
}


@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}


/* =========================================================================
   PASTE THIS BLOCK into style.css — anywhere after the existing
   .dsa / .pytorch colorway rules is fine.

   Uses a new --amber variable to match the actual in-lab branding of the
   CV Lab series itself (deep navy + oscilloscope amber + cyan), so the
   card colour on the front page visually "matches" what visitors see
   the instant a lab opens.
   ========================================================================= */

:root{
  --amber:#ffb347;
}

/* OpenCV Labs deck — amber/cyan idle, hot-pink/teal hover */
.opencv .deck-card{ border-color: var(--amber); animation: neonIdleOpencv 2.4s ease-in-out infinite; }
@keyframes neonIdleOpencv{
  0%,100%{ box-shadow:0 0 18px rgba(255,179,71,0.35), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--amber); }
  50%{ box-shadow:0 0 30px rgba(255,179,71,0.6), 0 8px 40px rgba(0,0,0,0.6); border-color:var(--amber); }
}
.opencv .deck-card:hover{ animation: neonHoverOpencv 1s ease-in-out infinite; }
@keyframes neonHoverOpencv{
  0%,100%{ box-shadow:0 0 35px var(--cyan), 0 0 70px var(--hot-pink); border-color:var(--cyan); }
  50%{ box-shadow:0 0 55px var(--hot-pink), 0 0 90px var(--cyan); border-color:var(--hot-pink); }
}

.opencv .deck-tag{ background: linear-gradient(90deg, var(--amber), var(--cyan)); }
.opencv .deck-card .deck-body{ display: none; } /* photo-only cards, same as every other deck */

.opencv .deck-nav button:hover{ background: rgba(255,179,71,0.15); border-color: var(--amber); }

.opencv .section-header .tag{
  background: linear-gradient(90deg, var(--amber), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.opencv .section-header h2 .section-link{
  background: linear-gradient(90deg, var(--amber), var(--cyan), var(--hot-pink));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 4s linear infinite;
}
.opencv .section-header h2 .section-link:hover{
  filter: drop-shadow(0 0 30px rgba(255,179,71,0.35));
}
.opencv .section-header p{
  background: linear-gradient(90deg, var(--cyan), var(--amber));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* if you also list OpenCV labs via the reveal-grid pattern (lab-card) anywhere,
   e.g. on a dedicated /opencv-labs/ archive page, this covers that too */
.opencv .lab-card{ border-color: var(--amber); animation: neonIdleOpencv 2.4s ease-in-out infinite; }
.opencv .lab-card:hover{ animation: neonHoverOpencv 1s ease-in-out infinite; }
.opencv .lab-card .deck-tag{
  background: linear-gradient(90deg, var(--amber), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}