/* ============================================================================
   Shared "clean glass" design system for the portfolio + admin panel.
   Light, minimalist, dense. Tailwind handles layout/spacing utilities;
   this file only holds things Tailwind's CDN build can't express cleanly.
   ============================================================================ */

html {
  scroll-behavior: smooth;
}

/* Keeps section headings clear of the fixed navbar when jumped to via anchor links */
section[id],
footer[id] {
  scroll-margin-top: 96px;
}

body {
  background-color: #f1f2f4;
  background-image:
    radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.06) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(14, 165, 233, 0.06) 0px, transparent 50%);
  background-attachment: fixed;
}

/* Glass card used across light sections: translucent white, blurred, subtle border */
.glass {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}

.glass-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.glass-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.09);
  background: rgba(255, 255, 255, 0.78);
}

/* Dark glass variant used on the hero band, where white text needs real contrast */
.glass-dark {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.hero-bg {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 45%, #164e63 100%);
}

/* Thin, unobtrusive scrollbar for dense lists inside the admin panel */
.thin-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.thin-scroll::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.2);
  border-radius: 999px;
}

.tech-badge {
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.section-fade {
  animation: fadeUp 0.5s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton shimmer for data that hasn't loaded from Supabase yet */
.skeleton {
  background: linear-gradient(90deg, rgba(15,23,42,0.06) 25%, rgba(15,23,42,0.1) 37%, rgba(15,23,42,0.06) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}