/* ============================================================
   MODERN REFRESH — light-touch upgrade on the terminal theme.
   Loaded last so selectors override prior rules where needed.
   Keeps mint accent + dark surface. Adds:
     - Glass nav (deepens on scroll via .is-scrolled)
     - Animated gradient mesh behind hero
     - Subtle noise on body for tactile depth
     - Gradient borders on cards (hover)
     - Tighter type tracking, slightly larger display
   ============================================================ */

/* === Extra tokens (scoped, don't disturb variables.css) === */
:root {
  --color-accent-2:        #4cc9ff;       /* cool secondary, only for subtle gradients */
  --gradient-border:       linear-gradient(135deg, rgba(0, 229, 160, 0.55), rgba(76, 201, 255, 0.25) 60%, transparent 90%);
  --gradient-border-hover: linear-gradient(135deg, rgba(0, 229, 160, 0.9), rgba(76, 201, 255, 0.45) 60%, rgba(0, 229, 160, 0.15) 100%);
}

/* === Body noise + softer base === */
body {
  background-image:
    radial-gradient(1200px 600px at 15% -10%, rgba(0, 229, 160, 0.045), transparent 60%),
    radial-gradient(900px 500px at 95% 5%, rgba(76, 201, 255, 0.035), transparent 60%);
  background-attachment: fixed;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

main, .site-header, .footer { position: relative; z-index: 1; }

/* === Glass navigation === */
.site-header {
  background-color: rgba(6, 10, 16, 0.55);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(30, 45, 69, 0.35);
  transition: background-color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.site-header--scrolled {
  background-color: rgba(6, 10, 16, 0.82);
  border-bottom-color: rgba(30, 45, 69, 0.7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* === Hero: animated gradient mesh === */
.hero {
  isolation: isolate;
}

.hero::before,
.hero::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
}

.hero::before {
  background:
    radial-gradient(36% 40% at 20% 35%, rgba(0, 229, 160, 0.35), transparent 70%),
    radial-gradient(30% 35% at 80% 25%, rgba(76, 201, 255, 0.22), transparent 70%);
  animation: meshDrift 18s ease-in-out infinite alternate;
}

.hero::after {
  background:
    radial-gradient(28% 32% at 70% 75%, rgba(0, 229, 160, 0.18), transparent 70%),
    radial-gradient(22% 28% at 25% 80%, rgba(76, 201, 255, 0.16), transparent 70%);
  animation: meshDrift 22s ease-in-out infinite alternate-reverse;
  opacity: 0.45;
}

@keyframes meshDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);    }
  50%  { transform: translate3d(3%, 2%, 0)  scale(1.05); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after { animation: none; }
}

/* Soften the existing dotted grid so the mesh reads cleanly */
.hero__bg-grid { opacity: 0.18; }

/* Hero typography: subtle gradient fill, room for descenders */
.hero__name {
  line-height: 1.15;
  padding-bottom: 0.08em;
  background: linear-gradient(180deg, #f5f8ff 0%, #c9d3df 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.hero__title {
  text-shadow: 0 0 18px rgba(0, 229, 160, 0.18);
}

/* === Buttons: slightly elevated, softer radius === */
.btn {
  border-radius: 999px;
  padding: 0.95rem 1.6rem;
}

.btn--primary {
  box-shadow: 0 8px 24px rgba(0, 229, 160, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.btn--primary:hover {
  box-shadow: 0 12px 36px rgba(0, 229, 160, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* === Gradient-border cards (case studies, certs, timeline, banking) === */
.case-study,
.certs__card,
.timeline__content,
.banking-skills__item,
.banking-cta__card,
.contact__link {
  position: relative;
  background-clip: padding-box;
}

.case-study::after,
.certs__card::after,
.timeline__content::after,
.banking-skills__item::after,
.banking-cta__card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-border);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.case-study:hover::after,
.certs__card:hover::after,
.timeline__content:hover::after,
.banking-skills__item:hover::after,
.banking-cta__card:hover::after {
  opacity: 1;
  background: var(--gradient-border-hover);
}

/* Case study top accent already exists; brighten on hover */
.case-study::before {
  background: linear-gradient(90deg, var(--color-accent), rgba(76, 201, 255, 0.5) 50%, transparent 100%);
  height: 1px;
}

/* === Marquee container: glassier === */
.marquee {
  background-color: rgba(17, 26, 46, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-color: rgba(30, 45, 69, 0.7);
}

/* === Tags: subtle gradient pill === */
.case-study__tags li {
  background: linear-gradient(135deg, rgba(0, 229, 160, 0.10), rgba(76, 201, 255, 0.06));
  border: 1px solid rgba(0, 229, 160, 0.12);
  color: var(--color-text);
}

/* === Section heading: gradient hash === */
.section__heading-hash {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* === Section divider: thinner, mint-tinted === */
.section + .section::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 229, 160, 0.18) 50%,
    transparent 100%
  );
}

/* === Timeline accents === */
.timeline::before {
  background: linear-gradient(180deg, rgba(0, 229, 160, 0.5), rgba(30, 45, 69, 0.6) 30%, rgba(30, 45, 69, 0.6) 70%, rgba(76, 201, 255, 0.3));
}

.timeline__dot {
  box-shadow: 0 0 0 4px rgba(0, 229, 160, 0.12), 0 0 16px rgba(0, 229, 160, 0.4);
}

/* === Contact links: keep simple, no double-border conflict === */
.contact__link {
  border-color: rgba(30, 45, 69, 0.8);
  background: rgba(17, 26, 46, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* === Terminal widget: deeper shadow + faint gradient ring === */
.terminal {
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(30, 45, 69, 0.7),
    0 0 40px rgba(0, 229, 160, 0.06);
}

/* === Reduce motion respect === */
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover { transform: none; }
  .certs__card:hover  { transform: none; }
}