/* ========================= RESET ========================= */
/* Apply a consistent box model & remove default spacing */
*,
*::before,
*::after {
  box-sizing: border-box; /* width/height now include padding & border */
  margin: 0;             /* remove default margins from elements */
  padding: 0;            /* remove default padding from elements */
}

/* ========== GLOBAL THEME TOKENS (colors, fonts, radii) ========== */
/* These are CSS variables you can reuse anywhere via var(--name) */
body {
  --bg: #050516;                        /* main page background (very dark) */
  --bg-alt: #0e0b2b;                    /* alternate background shade */
  --card-bg: #141229;                   /* card background color */
  --accent: #ffb3f3;                    /* main accent (pink) */
  --accent-soft: rgba(255, 179, 243, 0.2); /* transparent version of accent */
  --accent-2: #7dd3fc;                  /* secondary accent (cyan) */
  --text: #f9f9ff;                      /* primary text color */
  --text-muted: #b5b5d7;                /* lighter / muted text */
  --border-subtle: #2b2846;             /* soft border color */
  --shadow-soft: 0 0 25px rgba(0, 0, 0, 0.4); /* reusable drop shadow */
  --radius-lg: 16px;                    /* large border radius */
  --radius-sm: 10px;                    /* small border radius */
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* body font stack */
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace; /* mono font */
}

/* ========================= BASE LAYOUT ========================= */
body {
  min-height: 100vh;                               /* body at least full viewport height */
  font-family: var(--font-main);                   /* use main font */
  color: var(--text);                              /* default text color */
  background:  var(--bg);
  background-attachment: fixed;                    /* keep background fixed when scrolling */
  line-height: 1.6;                                /* comfortable line spacing */
}

/* ----------------------------------------------------------
   ANIMATED ORBS (Blue + Pink) — smooth, no snapping
   ---------------------------------------------------------- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: -10%;        /* a bit larger than viewport so edges don't show */
  z-index: -1;        /* behind all content */
  pointer-events: none;
  filter: blur(80px); /* soft glow */
}

/* Blue orb (top-left-ish) */
body::before {
  background: radial-gradient(circle, #3b82f6 0%, transparent 60%);
  animation: drift-blue 16s ease-in-out infinite;
}

/* Pink orb (bottom-right-ish) */
body::after {
  background: radial-gradient(circle, #ec4899 0%, transparent 60%);
  animation: drift-pink 20s ease-in-out infinite;
}

/* Blue orb motion: start & end positions are the SAME */
@keyframes drift-blue {
  0% {
    transform: translate(-15%, -20%) scale(1);
  }
  50% {
    transform: translate(5%, -5%) scale(1.1);
  }
  100% {
    transform: translate(-15%, -20%) scale(1);
  }
}

/* Pink orb motion: also start & end match */
@keyframes drift-pink {
  0% {
    transform: translate(20%, 25%) scale(1);
  }
  50% {
    transform: translate(-5%, 10%) scale(1.08);
  }
  100% {
    transform: translate(20%, 25%) scale(1);
  }
}


.page-wrapper {
  max-width: 1100px;   /* limit page content width */
  margin: 24px auto 40px; /* center with top/bottom margins */
  padding: 0 16px;     /* small horizontal padding for mobile */
}

/* ========================= HEADER (TITLE BAR) ========================= */
.site-header {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), #020617); /* dark gradient */
  border: 1px solid var(--border-subtle);           /* subtle border */
  border-radius: var(--radius-lg);                  /* rounded corners */
  box-shadow: var(--shadow-soft);                   /* soft shadow */
  padding: 20px 24px;                               /* internal spacing */
  margin-bottom: 18px;                              /* space under header */

  display: flex;                                    /* flex layout: title + nav */
  flex-wrap: wrap;                                  /* allow wrapping on small screens */
  align-items: center;                              /* vertically center content */
  gap: 16px;                                        /* gap between items */
}

.site-title h1 {
  font-family: var(--font-mono);                    /* mono aesthetic */
  font-size: 1.9rem;                                /* large heading */
  letter-spacing: 0.09em;                           /* spaced out letters */
  text-transform: lowercase;                        /* stylistic choice */
  margin-bottom: 4px;                               /* small space under title */
}

.site-title p {
  color: var(--text-muted);                         /* muted subtitle */
  font-size: 0.9rem;                                /* smaller text */
}

/* ========================= TOP NAVIGATION ========================= */
.top-nav {
  margin-left: auto;             /* pushes nav to the far right */
  display: flex;                 /* nav links in a row */
  flex-wrap: wrap;               /* wrap if needed on small screens */
  gap: 8px;                      /* space between links */
}

.top-nav a {
  font-size: 0.9rem;             /* slightly smaller text */
  text-decoration: none;         /* remove underline */
  padding: 6px 10px;             /* internal padding for pill shape */
  border-radius: 999px;          /* full pill look */
  border: 1px solid transparent; /* border for hover transition */
  color: var(--text-muted);      /* muted link color */
  background: rgba(15, 23, 42, 0.6); /* semi-transparent dark pill */
  transition: 0.18s ease-out;    /* smooth hover animation */
}

.top-nav a:hover {
  color: var(--text);                /* lighten text on hover */
  border-color: var(--accent);       /* pink border on hover */
  box-shadow: 0 0 12px var(--accent-soft); /* glow on hover */
}

/* ========================= MAIN LAYOUT GRID ========================= */
.site-main {
  display: grid;                                   /* two-column grid layout */
  grid-template-columns: minmax(0, 260px) minmax(0, 1.7fr); /* sidebar + main content ratio */
  gap: 18px;                                       /* space between columns */
}

.sidebar {
  display: flex;             /* stack cards in a column */
  flex-direction: column;
  gap: 18px;                 /* space between cards */
}

.content {
  display: flex;             /* main content column */
  flex-direction: column;
  gap: 18px;
}

/* ========================= GENERIC CARD STYLING ========================= */
.card {
  background: radial-gradient(circle at top left, rgba(148, 163, 253, 0.16), transparent 55%), var(--card-bg); /* subtle gradient */
  border-radius: var(--radius-lg);                  /* rounded corners */
  border: 1px solid var(--border-subtle);           /* thin border */
  padding: 16px 18px 18px;                          /* card inner spacing */
  box-shadow: var(--shadow-soft);                   /* glowing card shadow */
  position: relative;                               /* needed for ::before overlay */
}

.card::before {
  content: "";                                     /* create an overlay element */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;                                         /* cover entire card */
  opacity: 0.12;                                   /* very subtle */

  /* combo of angled gradient + fine lines for texture */
  background-image:
    linear-gradient(
      135deg,
      rgba(148, 163, 253, 0.2) 0,
      transparent 55%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(148, 163, 253, 0.16),
      rgba(148, 163, 253, 0.16) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: soft-light;                      /* blend softly with card */
  pointer-events: none;                            /* ignore mouse events */
}

.card h2 {
  font-size: 1.1rem;                               /* section title size */
  margin-bottom: 8px;                              /* space below title */
  font-family: var(--font-mono);                   /* mono-style heading */
  letter-spacing: 0.07em;                          /* spaced letters */
  text-transform: lowercase;                       /* stylistic choice */
  color: var(--accent-2);                          /* cyan heading */
}

/* ========================= BASIC LISTS ========================= */
ul {
  list-style: square;      /* square bullets */
  margin-left: 18px;       /* indent list */
  margin-top: 4px;         /* small gap above list */
}

ul li + li {
  margin-top: 4px;         /* space between list items */
}

/* ========================= LABEL BADGE TEXT ========================= */
.label {
  color: var(--accent);              /* pink label text */
  font-family: var(--font-mono);     /* mono aesthetic */
  font-size: 0.8rem;                 /* small label */
  text-transform: uppercase;         /* all caps */
  letter-spacing: 0.08em;            /* spaced letters */
}

/* ========================= 88x31 BUTTON STRIP ========================= */
.buttons-88x31 {
  display: flex;         /* row/flow layout */
  flex-wrap: wrap;       /* wrap to multiple lines if needed */
  gap: 8px;              /* space between buttons */
}

.fake-button {
  width: 88px;                            /* standard badge size */
  height: 31px;
  border-radius: 3px;                     /* tiny rounding */
  border: 1px solid var(--border-subtle); /* border to separate from bg */
  background: linear-gradient(135deg, #020617, #111827); /* pseudo-3D look */
  font-family: var(--font-mono);
  font-size: 0.7rem;                      /* tiny pixel-ish text */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-2);                 /* cyan text */
}

/* ========================= PROJECT LIST BLOCK ========================= */
.project-list {
  list-style: none;   /* remove default bullets */
  margin-left: 0;     /* align with card edge */
}

.project-list li {
  padding: 8px 0;                /* vertical spacing per project */
  border-bottom: 1px dashed var(--border-subtle); /* separator line */
}

.project-list li:last-child {
  border-bottom: none;           /* no border on last item */
}

.project-title {
  font-weight: 600;              /* slightly bold project title */
}

.project-tag {
  display: inline-block;
  font-size: 0.7rem;             /* small tag text */
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
  background: var(--accent-soft); /* soft pink background */
  border-radius: 999px;          /* pill shape */
  padding: 3px 7px;
  border: 1px solid rgba(148, 163, 253, 0.5); /* subtle outline */
}

.project-desc {
  margin-top: 4px;               /* space below title/tag row */
  color: var(--text-muted);      /* muted description text */
}

/* ========================= GLOBAL LINK STYLE ========================= */
a {
  color: var(--accent-2);        /* cyan links */
}

a:hover {
  text-decoration: underline;    /* underline on hover */
}

.mono {
  font-family: var(--font-mono); /* helper class: force mono font */
}

.tiny-note {
  margin-top: 8px;
  font-size: 0.8rem;             /* small note text */
  color: var(--text-muted);
}

/* ========================= FOOTER ========================= */
.site-footer {
  margin-top: 22px;              /* space above footer */
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6); /* subtle glow */
}

.site-footer a {
  color: var(--accent);          /* pink footer links */
}

/* ========================= RESPONSIVE BREAKPOINTS ========================= */
@media (max-width: 800px) {
  .site-main {
    grid-template-columns: 1fr;  /* stack sidebar & content vertically */
  }
  .top-nav {
    width: 100%;                 /* nav takes full width */
    margin-left: 0;              /* no push to right on small screens */
    justify-content: flex-start; /* align nav to left */
  }
}

@media (max-width: 480px) {
  .site-header {
    padding: 16px;               /* slightly smaller padding on tiny screens */
  }
  .site-title h1 {
    font-size: 1.5rem;           /* smaller title */
  }
  .card {
    padding: 14px 14px 16px;     /* slightly tighter card padding */
  }
}

/* =========================================================
   LANDING / LINKTREE PAGE ONLY
   These styles apply when <body class="landing-body">.
   ========================================================= */
.landing-body {
  min-height: 100vh;                               /* full viewport height */
  font-family: var(--font-main);
  color: var(--text);
  background:                                      /* similar gradient to main body */
    radial-gradient(circle at top, #3b82f6 0, transparent 55%),
    radial-gradient(circle at bottom, #ec4899 0, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  display: flex;                                   /* center wrapper */
  align-items: center;
  justify-content: center;
}

.landing-wrapper {
  width: 100%;            /* allow responsiveness */
  max-width: 460px;       /* keep card from getting too wide */
  padding: 24px 16px;     /* outer padding around the card */
}

.landing-card {
  background: radial-gradient(circle at top left, rgba(148,163,253,0.16), transparent 55%), #141229; /* card gradient */
  border-radius: var(--radius-lg);
  border: 1px solid #2b2846;       /* direct color use; matches theme */
  padding: 20px 20px 22px;
  box-shadow: var(--shadow-soft);
  text-align: center;              /* center all text & buttons */
}

.landing-card h1 {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  margin-bottom: 6px;
}

.landing-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.landing-links {
  display: flex;
  flex-direction: column;       /* vertical column of buttons */
  gap: 8px;                     /* vertical spacing between link pills */
  margin-bottom: 18px;
}

.link-pill {
  display: block;               /* full-width clickable area */
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;         /* pill shape */
  border: 1px solid #2b2846;    /* border to separate from bg */
  background: rgba(15,23,42,0.8);   /* dark semi-transparent pill */
  font-size: 0.9rem;
  color: #f9f9ff;
  transition: 0.15s ease-out;  /* smooth hover animation */
}

.link-pill:hover {
  border-color: var(--accent);      /* pink border on hover */
  background: rgba(15,23,42,1);     /* slightly darker on hover */
  box-shadow: 0 0 12px var(--accent-soft); /* glow effect */
}

.enter-btn {
  display: inline-block;        /* make it behave like a button */
  margin-top: 4px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  box-shadow: 0 0 15px var(--accent-soft);
}

.enter-btn:hover {
  background: var(--accent);    /* invert colors on hover */
  color: var(--bg);
}

.landing-note {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ========================= HIDDEN YOUTUBE PLAYER ========================= */
#yt-hidden-player {
  width: 1px;              /* tiny size so it's effectively invisible */
  height: 1px;
  overflow: hidden;
  position: absolute;
  left: -9999px;           /* move far off-screen so it never shows */
}

/* ========================= AUDIO CONTROL BUTTONS ========================= */
.landing-audio {
  margin-bottom: 18px;     /* space below the audio control block */
}

.audio-controls {
  display: inline-flex;    /* lay buttons out horizontally */
  gap: 8px;                /* space between play/pause buttons */
  margin-top: 4px;
  margin-bottom: 4px;
}

.audio-btn {
  padding: 6px 14px;       /* button padding */
  border-radius: 999px;    /* pill shape */
  border: 1px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  cursor: pointer;         /* show pointer cursor on hover */
  box-shadow: 0 0 10px var(--accent-soft);
  transition: 0.15s ease-out;
}

.audio-btn:hover {
  background: var(--accent);  /* invert on hover */
  color: var(--bg);
}

.landing-music-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: lowercase;
  letter-spacing: 0.08em;
  font-family: var(--font-mono);
}

.landing-music-hint {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--text-muted);
}