/* ======================================================
   CARDS – vNext (robust, deterministic, future-proof)
   ------------------------------------------------------
   Goals:
   - Single, stable base for all .card surfaces
   - No duplicate overlays (“double corner / ghost layer” fix)
   - Predictable hover behavior (no layout shift)
   - Safe opt-out of glow overlay for specific pages/components
   ====================================================== */

/* ------------------------------------------------------
   Base Card
   ------------------------------------------------------ */
.card{
  position: relative;

  /* Prevent pseudo-elements / filters from blending weirdly with siblings */
  isolation: isolate;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015)),
    rgba(18, 20, 42, 0.90);

  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);

  /* Ensure overlays are clipped cleanly to rounded corners */
  overflow: clip;
  overflow: hidden; /* fallback */

  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);

  backdrop-filter: blur(8px);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* ------------------------------------------------------
   Hover (safe + consistent)
   ------------------------------------------------------ */
.card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 28px 60px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

/* ------------------------------------------------------
   Single overlay glow layer (global default)
   - Can be disabled via --card-glow: 0
   ------------------------------------------------------ */
.card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  background: radial-gradient(
    circle at 30% 0%,
    rgba(255,255,255,0.06),
    transparent 55%
  );

  pointer-events: none;

  /* Opt-out switch */
  opacity: var(--card-glow, 1);
}

/* ------------------------------------------------------
   Card levels
   ------------------------------------------------------ */
.card-primary{
  grid-column: span 2;
  background:
    radial-gradient(
      circle at top left,
      rgba(255,255,255,0.08),
      rgba(255,255,255,0.02)
    ),
    var(--bg-card);

  box-shadow:
    0 30px 60px rgba(0,0,0,0.60),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.card-secondary{
  background: var(--bg-card);
}

.card-widget{
  background: rgba(255,255,255,0.02);
  border-style: dashed;
}

/* ======================================================
   IMPORTANT FIX:
   Projects pages already add their own card glow layers.
   If we keep the global .card::before there, you get
   the “double card / ghost corner” artifact.
   ------------------------------------------------------
   So on projects pages:
   - Disable global card overlay
   ====================================================== */
body[data-page^="projects"] .card{
  --card-glow: 0;
}

/* Extra safety: if any “project card” sits on .card */
body[data-page^="projects"] .project-card{
  --card-glow: 0;
}

/* ======================================================
   SKILLS – keep existing behavior but scope to skills page
   (prevents leakage into other sections)
   ====================================================== */
body[data-page="skills"] .skill{
  margin-bottom: 18px;
  transition: transform 0.2s ease;
}
body[data-page="skills"] .skill:hover{
  transform: translateY(-2px);
}

body[data-page="skills"] .skill-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 0.85rem;
}

body[data-page="skills"] .skill-title{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

body[data-page="skills"] .skill-level{
  color: var(--text-secondary);
  font-size: 0.75rem;
  transition: color 0.2s ease;
}

body[data-page="skills"] .skill:hover .skill-level{
  color: var(--text-primary);
}

body[data-page="skills"] .skill-bar{
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}

body[data-page="skills"] .skill-fill{
  height: 100%;
  width: 0;
  border-radius: inherit;

  background: var(--skill-gradient);
  box-shadow: none;

  transition:
    width 1.2s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease;
}

body[data-page="skills"] .skill-bar:hover .skill-fill{
  box-shadow: 0 0 16px var(--skill-glow);
}

/* Skill variants */
body[data-page="skills"] .skill-fill.backend{
  --skill-gradient: linear-gradient(90deg, #6f7cff, #8f9bff);
  --skill-glow: rgba(143,155,255,0.55);
}
body[data-page="skills"] .skill-fill.frontend{
  --skill-gradient: linear-gradient(90deg, #ff5bbd, #ff8ad5);
  --skill-glow: rgba(255,138,213,0.55);
}
body[data-page="skills"] .skill-fill.uiux{
  --skill-gradient: linear-gradient(90deg, #b58cff, #d4b6ff);
  --skill-glow: rgba(212,182,255,0.5);
}
body[data-page="skills"] .skill-fill.api{
  --skill-gradient: linear-gradient(90deg, #22d3ee, #60a5fa);
  --skill-glow: rgba(96,165,250,0.55);
}
body[data-page="skills"] .skill-fill.architecture{
  --skill-gradient: linear-gradient(90deg, #818cf8, #a5b4fc);
  --skill-glow: rgba(165,180,252,0.5);
}
body[data-page="skills"] .skill-fill.systemdev{
  --skill-gradient: linear-gradient(90deg, #38bdf8, #0ea5e9);
  --skill-glow: rgba(56,189,248,0.5);
}
body[data-page="skills"] .skill-fill.db{
  --skill-gradient: linear-gradient(90deg, #4fd1c5, #2dd4bf);
  --skill-glow: rgba(45,212,191,0.5);
}
body[data-page="skills"] .skill-fill.backend-arch{
  --skill-gradient: linear-gradient(90deg, #7c83ff, #a5b4fc);
  --skill-glow: rgba(165,180,252,0.5);
}
body[data-page="skills"] .skill-fill.security{
  --skill-gradient: linear-gradient(90deg, #f59e0b, #fbbf24);
  --skill-glow: rgba(251,191,36,0.55);
}
body[data-page="skills"] .skill-fill.performance{
  --skill-gradient: linear-gradient(90deg, #34d399, #10b981);
  --skill-glow: rgba(52,211,153,0.55);
}
body[data-page="skills"] .skill-fill.design-web{
  --skill-gradient: linear-gradient(90deg, #ff6bb5, #ff9adf);
  --skill-glow: rgba(255,154,223,0.55);
}
body[data-page="skills"] .skill-fill.design-ui{
  --skill-gradient: linear-gradient(90deg, #c084fc, #e9d5ff);
  --skill-glow: rgba(233,213,255,0.5);
}
body[data-page="skills"] .skill-fill.design-ux{
  --skill-gradient: linear-gradient(90deg, #fb7185, #fda4af);
  --skill-glow: rgba(253,164,175,0.55);
}
body[data-page="skills"] .skill-fill.design-responsive{
  --skill-gradient: linear-gradient(90deg, #38bdf8, #7dd3fc);
  --skill-glow: rgba(125,211,252,0.55);
}
body[data-page="skills"] .skill-fill.design-graphic{
  --skill-gradient: linear-gradient(90deg, #a78bfa, #c4b5fd);
  --skill-glow: rgba(196,181,253,0.55);
}