/*
 * style.css — Custom styles complementing Tailwind CSS
 *
 * Layout:
 *   1. Theme CSS custom properties (light + dark)
 *   2. Base / reset helpers
 *   3. Custom scrollbar
 *   4. Scroll-reveal animation
 *   5. Material Symbols alignment fix
 */

/* ── 1. Theme CSS variables ──────────────────────────────────────── */
:root {
  /* Light-mode palette (baby blue) */
  --c-base-bg: 219 234 254;  /* #dbeafe  blue-100  */
  --c-surface:  255 255 255; /* #ffffff  white     */
  --c-border:   191 219 254; /* #bfdbfe  blue-200  */
  --c-text-hi:  15 23 42;    /* #0f172a  slate-900 */
  --c-text-lo:  71 85 105;   /* #475569  slate-600 */
  --c-primary:  37 99 235;   /* #2563eb  blue-600  */
}

html.dark {
  /* Dark-mode palette */
  --c-base-bg: 16 22 34;     /* #101622 */
  --c-surface:  26 35 50;    /* #1a2332 */
  --c-border:   35 47 72;    /* #232f48 */
  --c-text-hi:  255 255 255; /* white   */
  --c-text-lo:  146 164 201; /* #92a4c9 */
  --c-primary:  19 91 236;   /* #135bec */
}

/* ── 2. Base ─────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  scrollbar-gutter: stable;
}

/* Offset anchors so they clear the sticky header */
section {
  scroll-margin-top: 80px;
}

/* ── 3. Custom scrollbar (Webkit) ────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgb(var(--c-base-bg));
}

::-webkit-scrollbar-thumb {
  background: rgb(var(--c-border));
  border-radius: 3px;
}

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

/* ── 4. Scroll-reveal animation ──────────────────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
}

.reveal.visible {
  animation: fadeUp 0.6s ease-out forwards;
}

/* ── 5. Hero typewriter cursor ───────────────────────────────────── */
.hero-cursor {
  display: inline-block;
  margin-left: 1px;
  animation: blink-cursor 0.7s step-end infinite;
}

@keyframes blink-cursor {
  50% { opacity: 0; }
}

/* ── 6. Nav floating shadow ──────────────────────────────────────── */
#site-header {
  border-radius: 9999px; /* owned here so we can snap it without Tailwind interference */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 32px rgba(0, 0, 0, 0.45);
  transition: background-color 0.3s ease; /* no border-radius transition — change is instant */
}

html:not(.dark) #site-header {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 4px 24px rgba(0, 0, 0, 0.08);
}


/* ── 7. Nav adaptive colour (over light sections) ───────────────── */
/* Applied by JS when the nav scrolls over a section with data-bg="light" */
#site-header.nav-over-light {
  background-color: rgba(255 255 255 / 0.75);
}

#site-header.nav-over-light .nav-link,
#site-header.nav-over-light a:not([href="contact.html"]),
#site-header.nav-over-light button {
  color: rgb(71 85 105); /* slate-600 */
}

#site-header.nav-over-light .nav-link:hover,
#site-header.nav-over-light a:not([href="contact.html"]):hover,
#site-header.nav-over-light button:hover {
  color: rgb(15 23 42); /* slate-900 */
}

#site-header.nav-over-light a[href="contact.html"] {
  background-color: rgb(15 23 42);
  border-color: rgb(15 23 42);
  color: #fff;
}

/* When open, snap pill to box-top — top corners stay visually identical (9999px and 26px
   both render as 26px on a ~52px tall element), bottom corners go flat instantly */
#site-header.menu-open {
  border-radius: 26px 26px 0 0;
}

/* ── Mobile drawer overlay ───────────────────────────────────── */
#mobile-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

#mobile-backdrop.menu-open {
  opacity: 1;
  pointer-events: auto;
}

#mobile-menu {
  top: 64px;
  border-radius: 0 0 26px 26px;
  border-top: none;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

#mobile-menu.menu-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── 8. Hero gradient background ────────────────────────────────── */
#about {
  margin-top: -64px;  /* pull section up behind the sticky header */
  padding-top: 64px;  /* push content back below the header */
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(19, 91, 236, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 80% 15%, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
}

html:not(.dark) #about {
  background:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(255, 255, 255, 0.85) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 85% 85%, rgba(196, 181, 253, 0.35) 0%, transparent 55%);
}

/* ── 9. Material Symbols alignment ──────────────────────────────── */
.material-symbols-outlined {
  vertical-align: middle;
  line-height: 1;
}

/* ── 10. Skill rings ────────────────────────── */
@property --ring-pct {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.skill-ring {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* track layer (border colour) + conic fill layer */
  background: conic-gradient(from 0deg, var(--ring-color) calc(var(--ring-pct) * 1%), rgb(var(--c-border)) calc(var(--ring-pct) * 1%));
  /* donut mask: transparent centre + outer rim, ring body stays visible */
  mask: radial-gradient(farthest-side, transparent 63%, black 64% 91%, transparent 92%);
  transition: --ring-pct 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Level colours */
.skill-ring.lvl-1 { --ring-color: #f59e0b; }               /* amber   — beginner     */
.skill-ring.lvl-2 { --ring-color: #60a5fa; }               /* blue    — intermediate */
.skill-ring.lvl-3 { --ring-color: rgb(var(--c-primary)); }   /* primary — proficient   */
.skill-ring.lvl-4 { --ring-color: #10b981; }               /* emerald — expert       */