/*
 * FONT IMPORT — TRIMMED FOR PERFORMANCE
 * ---------------------------------------------------------------------------
 * Previously this @import pulled ~19 font families (Barlow, Comfortaa,
 * Comforter Brush, Comic Neue, Dancing Script, JetBrains Mono, Lilita One,
 * Lobster, Luxurious Roman, Montserrat, Montserrat Alternates, Moon Dance,
 * Oswald, Pacifico, Poppins, Roboto, Sniglet, The Nautigal, Vujahday Script,
 * Waterfall) with multiple weights each. Auditing every CSS rule and every
 * inline style in the codebase, only FOUR of those families are actually
 * referenced anywhere: Lilita One (--font-display), Sniglet (--font-body),
 * Pacifico (--font-accent), and JetBrains Mono (--font-jetbrains-mono).
 *
 * The other ~15 families were pure dead weight — every one of them was a
 * render-blocking network request + parse cost for zero visual payoff. This
 * is very likely the single largest performance regression in the entire
 * codebase; trimming it should meaningfully cut Largest Contentful Paint and
 * eliminate a stack of invisible CSSOM-blocking requests.
 *
 * If `fonts/fonts.css` still exists in the repo root, delete it — it's an
 * orphaned file from early design exploration and is not linked from
 * index.html anywhere. Same goes for the top-level `VanillaTilt.js` copy and
 * `js/vanilla-tilt.js`: the site loads Vanilla-Tilt from a CDN in index.html
 * (with `defer`), so both local copies are dead files, never fetched, safe
 * to delete for repo hygiene.
 */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Lilita+One&family=Pacifico&family=Sniglet&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  line-height: 1.6;
  transition:
    background-color var(--dur-medium) var(--ease-standard),
    color var(--dur-medium) var(--ease-standard);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* Anti-copy layer */
}

/* custom scroll bar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: #c0c0c0;
}

::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Exceptions for anti-copy */
.selectable,
input,
textarea {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: text;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Glassmorphism utility */
.glass {
  background: var(--bg-elevated);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-glass);
}

.glass-pill {
  border-radius: var(--radius-pill);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--dur-medium) var(--ease-standard);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  z-index: 1;
}

.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-brand);
  z-index: -1;
  transition: opacity var(--dur-medium) var(--ease-standard);
  opacity: 0;
}

.btn:hover {
  color: #fff;
  border-color: transparent;
  box-shadow:
    0 0 24px rgba(var(--color-primary-rgb), 0.5),
    0 0 48px rgba(var(--color-secondary-rgb), 0.35);
}

.btn:hover::before {
  opacity: 1;
}

.btn-solid {
  color: #fff;
  border-color: transparent;
}

.btn-solid::before {
  opacity: 1;
}

.btn-solid:hover {
  box-shadow:
    0 0 24px rgba(var(--color-primary-rgb), 0.5),
    0 0 48px rgba(var(--color-secondary-rgb), 0.35);
}

/* Typography utils */
.text-gradient {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.accent-font {
  font-family: var(--font-accent);
  color: var(--color-primary);
}

/* Shared layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  padding: 6rem 0;
  position: relative;
}

.section-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 3rem;
}

.about-card p {
  font-size: 0.9rem;
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-base);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* contains the rising bubbles added in sections.css */
  transition:
    opacity 0.5s ease,
    visibility 0.5s ease;
}

.loader-blob {
  position: relative;
  width: 240px;
  height: 240px;
  background: var(--gradient-brand);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: morph 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(var(--color-primary-rgb), 0.5);
  margin-bottom: 2rem;
  /* Explicit stacking guard against .preloader-decor (z-index:0, added in
    sections.css) — see that file's comment for why this is belt-and-
    suspenders rather than strictly required. */
  z-index: 1;
}

.loader-blob span {
  color: #fff;
  font-family: var(--font-jetbrains-mono);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: 2px;
  z-index: 2;
}

.progress-container {
  position: relative;
  z-index: 1;
  width: 200px;
  height: 4px;
  background: var(--border-glass);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: #00ff0a;
  animation: progress 5s linear forwards;
}

/* NOTE: was var(--font-mono) inline in index.html, a token that was never
  defined anywhere in variables.css — silently fell back to the body font.
  Moved here (presentation belongs in CSS, not inline attributes) and fixed
  to the real token so the preloader percentage renders in the intended
  monospace face. */
#progress-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-jetbrains-mono);
  color: var(--text-primary);
  font-size: 1.2rem;
  margin-top: 1rem;
  font-weight: bold;
  text-align: center;
}

@keyframes morph {
  0% {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  }

  50% {
    border-radius: 60% 40% 60% 40% / 50% 50% 50% 50%;
  }

  100% {
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  }
}

@keyframes progress {
  to {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}