/* ============================================================
   FOLTZYYY — space / galaxy / purple theme
   Real assets in assets/foltzyyy_assets/
   ============================================================ */

@font-face {
  font-family: "Foltzyyy";
  src: url("../assets/foltzyyy_assets/font/foltzyyy.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Foltzyyy";
  src: url("../assets/foltzyyy_assets/font/foltzyyy_italic.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg-0: #05010d;
  --bg-1: #0d0322;
  --space-dark: #0a0417;     /* transition cover color (matches video) */
  --purple: #8a2be2;
  --purple-bright: #a855f7;
  --purple-light: #c77dff;
  --purple-neon: #b026ff;
  --white: #f3ecff;
  --nav-top: clamp(6px, 1.5vw, 22px);   /* gap above the bar */
  /* the bar is a full-width 10:1 video, so its height is ~10vw. Reserve that
     plus the top gap plus breathing room, on every screen width. */
  --nav-h: calc(10vw + 56px);           /* reserve space under the bar */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  font-family: "Rajdhani", system-ui, sans-serif;
  background: var(--bg-0);
  color: var(--white);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ============================================================
   BACKGROUND VIDEO
   ============================================================ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 50% 45%, #140531 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  overflow: hidden;
}
.bg__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* soft darkening at the very edges for depth */
.bg__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.55) 100%);
}

/* ============================================================
   NAV — moving nav bar (video with logo + lightning baked in)
   The video has a black background, so we screen-blend it onto
   the space background to knock the black out.
   ============================================================ */
.nav {
  position: absolute;      /* sits at the top of the page and scrolls away */
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10;
  animation: nav-drop 1s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes nav-drop {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* a soft dark fade behind the bar, so it melts into the page instead of floating on the stars */
.nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 165%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(4,1,12,0.96) 0%,
    rgba(6,1,16,0.84) 38%,
    rgba(8,2,22,0.42) 68%,
    rgba(8,2,22,0) 100%);
}

/* Show the whole bar (logo + full lightning). Its black background is
   knocked out with screen blend; a soft feather on the top/bottom edges
   stops the bar's glow from ending in a hard rectangle line. */
.nav__video {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

/* transparent click target over the baked-in logo (left side) → home */
.nav__home {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* the bar video spans the full width, so the baked-in FOLTZYYY (3-22% of it)
     grows with the window: size the link the same way so all of the word is clickable */
  width: 24%;
  z-index: 2;
}

/* right-hand cluster: page links + live badge */
.nav__right {
  position: absolute;
  top: 0;
  right: clamp(16px, 4vw, 56px);
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 34px);
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
}

.nav__links a {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: clamp(18px, 2.1vw, 28px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;                       /* always white */
  text-decoration: none;             /* no underline */
  padding: 4px 2px;
  /* tight dark edge + wide dark halo keep it readable over the bright lightning, purple glow on top */
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 2px 3px rgba(0,0,0,0.95),
               0 2px 12px rgba(0,0,0,0.9), 0 0 24px rgba(0,0,0,0.75),
               0 0 12px rgba(176,38,255,0.45);
  transition: text-shadow .25s ease, transform .25s ease;
}
/* keep it white — hover/active just intensify the outer glow + a little lift */
.nav__links a:hover,
.nav__links a.is-active {
  color: #fff;
  transform: translateY(-2px);
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 2px 3px rgba(0,0,0,0.95),
               0 2px 12px rgba(0,0,0,0.9),
               0 0 16px rgba(199,125,255,0.95),
               0 0 30px rgba(176,38,255,0.75);
}

/* glowing line that sits under the current page and glides to whichever link you hover (js/script.js) */
.nav__links { position: relative; }
.nav__glider {
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 22%, var(--purple-light) 50%, #fff 78%, transparent);
  box-shadow: 0 0 10px var(--purple-light), 0 0 22px var(--purple-neon);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), width .4s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

/* ---- compact bar: drops in once the big bar has scrolled away (js/script.js builds it) ---- */
.navmini {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  height: 60px;
  padding: 0 clamp(16px, 4vw, 56px);
  background: linear-gradient(180deg, rgba(10,3,26,0.94), rgba(10,3,26,0.8));
  backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  transform: translateY(-115%);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.navmini.is-on { transform: none; }
.navmini::after {                   /* glowing edge with a slow shimmer */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--purple-neon) 18%, #fff 30%, var(--purple-light) 42%, var(--purple-neon) 60%, transparent 100%);
  background-size: 200% 100%;
  box-shadow: 0 0 14px var(--purple-neon);
  animation: navmini-shimmer 7s linear infinite;
}
@keyframes navmini-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}
.navmini__logo {
  margin-right: auto;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 1px;
  text-decoration: none;
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 60%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(176,38,255,0.6));
  transition: filter .25s ease;
}
.navmini__logo:hover { filter: drop-shadow(0 0 16px rgba(199,125,255,0.95)); }
.navmini .nav__links { gap: clamp(14px, 2.4vw, 32px); }
.navmini .nav__links a { font-size: 18px; }
.navmini .live { padding: 5px 12px; font-size: 13px; }
@media (max-width: 640px) {
  .navmini { height: 50px; gap: 10px; padding: 0 12px; }
  .navmini__logo { font-size: 17px; }
  .navmini .nav__links { gap: 10px; }
  .navmini .nav__links a { font-size: 12.5px; letter-spacing: 0.5px; }
  .navmini .live { padding: 5px 7px; }
}

/* ---- live status badge ---- */
.live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: 999px;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: clamp(13px, 1.4vw, 17px);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: #b9a6d6;
  border: 1px solid rgba(176,38,255,0.35);
  background: rgba(18,4,42,0.55);
  backdrop-filter: blur(4px);
  text-shadow: 0 0 2px rgba(0,0,0,1), 0 2px 8px rgba(0,0,0,0.9);
  transition: color .3s ease, border-color .3s ease, background .3s ease,
              box-shadow .3s ease, transform .3s ease;
  white-space: nowrap;
}
.live:hover { transform: translateY(-2px); }

.live__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #5a4a72;
  flex: none;
}

/* offline / loading (default) */
.live[data-state="loading"] { opacity: 0.7; }

/* LIVE */
.live[data-state="live"] {
  color: #fff;
  border-color: rgba(255,45,85,0.85);
  background: linear-gradient(90deg, rgba(255,30,70,0.28), rgba(176,38,255,0.28));
  box-shadow: 0 0 18px rgba(255,45,85,0.45), inset 0 0 12px rgba(255,45,85,0.2);
}
.live[data-state="live"] .live__dot {
  background: #ff2b50;
  box-shadow: 0 0 8px #ff2b50, 0 0 16px #ff2b50;
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.5); opacity: 0.55; }
}

/* ---- shooting-star sky ---- */
.sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;            /* above the background video, below content + nav */
  pointer-events: none;
}

/* ============================================================
   PAGE + ENTRANCE
   ============================================================ */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  /* center when there's room, but fall back to the top (below the nav)
     when the content is taller than the viewport — never clip upward */
  align-items: safe center;
  justify-content: center;
  /* extra top gap below the nav, generous bottom room so the last section breathes */
  padding: calc(var(--nav-h) + clamp(8px, 3vh, 40px)) 24px clamp(56px, 10vh, 110px);
  animation: page-in .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(22px); filter: blur(5px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ---- HERO (coming soon) ---- */
.hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__logo {
  width: min(760px, 82vw);
  height: auto;
  filter: drop-shadow(0 0 26px rgba(176,38,255,0.55));
  animation: logo-pulse 4.5s ease-in-out infinite;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;   /* not clickable/selectable/draggable */
}
@keyframes logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(176,38,255,0.45)); }
  50%      { filter: drop-shadow(0 0 42px rgba(199,125,255,0.85)); }
}
.hero__subtitle {
  margin-top: 10px;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: clamp(15px, 2.6vw, 30px);
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 0 14px rgba(176,38,255,0.7), 0 2px 6px rgba(0,0,0,0.8);
}

/* ============================================================
   Featured track — slim boxless "now playing" bar
   ============================================================ */
.featured {
  margin-top: clamp(44px, 8vh, 80px);
  width: min(880px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 22px);
}
.featured__heading {
  margin: 0;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: clamp(3px, 0.8vw, 7px);
  font-size: clamp(30px, 6vw, 58px);
  color: var(--purple-light);
  text-shadow: 0 0 18px rgba(176,38,255,0.65);
}

.player {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  padding-bottom: 12px;         /* room for the bottom seek line */
}

/* album art doubles as play/pause */
.player__art {
  position: relative;
  flex: none;
  width: clamp(54px, 12vw, 72px);
  height: clamp(54px, 12vw, 72px);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform .25s ease;
}
.player__art:hover { transform: scale(1.05); }
.player__art:disabled { cursor: default; opacity: 0.6; }
.player__cover {
  grid-area: 1 / 1;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle at 50% 40%, #2a0d52, #0a0417);
  box-shadow: 0 0 20px rgba(176,38,255,0.55), inset 0 0 10px rgba(0,0,0,0.6);
}
.player__orbit {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, var(--purple-neon) 78%, var(--purple-light) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  filter: drop-shadow(0 0 6px var(--purple-neon));
  opacity: 0.85;
  animation: orbit-spin 6s linear infinite;
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.player[data-state="playing"] .player__orbit { animation-duration: 2.6s; opacity: 1; }
.player__playicon {
  grid-area: 1 / 1;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(8,2,20,0.42);
  opacity: 0;
  transition: opacity .25s ease;
}
.player__art:hover .player__playicon,
.player[data-state="paused"] .player__playicon { opacity: 1; }
.player__playicon .icon { width: 38%; height: 38%; fill: currentColor; filter: drop-shadow(0 0 8px var(--purple-neon)); }
.player__playicon .icon-play { margin-left: 3px; }
.player[data-state="paused"] .icon-pause { display: none; }
.player[data-state="playing"] .icon-play { display: none; }

/* title / artist */
.player__info {
  flex: 0 1 auto;
  max-width: 44%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.player__title {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(15px, 2.4vw, 22px);
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 60%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(176,38,255,0.45));
  /* wrap long titles onto more lines instead of truncating with … */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.player__artist {
  font-size: clamp(11px, 1.6vw, 14px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9b8e6;
  opacity: 0.85;
  overflow-wrap: anywhere;
}

/* spectrum equalizer — fills the middle, one bar tall */
.player__viz {
  flex: 1;
  min-width: 0;
  height: clamp(38px, 7vh, 52px);
  display: block;
}

/* time readout */
.player__time {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 1px;
  color: #c9b8e6;
  white-space: nowrap;
}

.player__spotify {
  flex: none;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  color: #b9a6d6;
  opacity: 0.8;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
.player__spotify:hover { color: var(--purple-light); opacity: 1; transform: translateY(-2px); }

/* thin seek line along the bottom of the bar */
.player__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(176,38,255,0.18);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.player__fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--purple-light));
  box-shadow: 0 0 10px var(--purple-neon);
}
.player__fill::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px var(--purple-neon), 0 0 14px var(--purple-neon);
}

/* hidden Spotify playback engine */
.player__engine {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.player__engine iframe,
.player__engine > div { width: 100%; height: 100%; }

/* ============================================================
   Stream section — live player or latest VOD
   ============================================================ */
.stream {
  margin-top: clamp(44px, 8vh, 80px);
  width: min(880px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2.4vh, 26px);
}
.stream__heading {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: clamp(3px, 0.8vw, 7px);
  font-size: clamp(30px, 6vw, 58px);
  color: var(--purple-light);
  text-shadow: 0 0 18px rgba(176,38,255,0.65);
}
.stream__heading[data-state="live"] { color: #fff; }
.stream__dot {
  width: clamp(12px, 1.6vw, 18px);
  height: clamp(12px, 1.6vw, 18px);
  border-radius: 50%;
  background: #ff2b50;
  box-shadow: 0 0 10px #ff2b50, 0 0 20px #ff2b50;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.stream__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(176,38,255,0.35);
  box-shadow: 0 0 30px rgba(176,38,255,0.28), 0 18px 46px rgba(0,0,0,0.5);
  background: radial-gradient(circle at 50% 40%, #1a0838, #0a0417);
}
.stream__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.stream__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  color: #c9b8e6;
  text-decoration: none;
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: 1px;
}
a.stream__fallback:hover { color: var(--purple-light); }
.stream__caption {
  max-width: 100%;
  font-size: clamp(12px, 1.6vw, 14px);
  letter-spacing: 1px;
  color: #c9b8e6;
  text-decoration: none;
  opacity: 0.85;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stream__caption:hover { color: var(--purple-light); opacity: 1; }

/* ============================================================
   About me + live stats
   ============================================================ */
.about {
  margin-top: clamp(44px, 8vh, 80px);
  width: min(880px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 3.5vh, 36px);
}
.about__heading {
  margin: 0;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: clamp(3px, 0.8vw, 7px);
  font-size: clamp(30px, 6vw, 58px);
  color: var(--purple-light);
  text-shadow: 0 0 18px rgba(176,38,255,0.65);
}
.about__profile {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(18px, 3.5vw, 40px);
}
.about__handle {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: clamp(32px, 7vw, 68px);          /* big, fills the row next to the logo */
  letter-spacing: 1px;
  line-height: 1;
  text-decoration: none;
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 62%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 16px rgba(176,38,255,0.5));
  transition: filter .25s ease, transform .25s ease;
}
.about__handle:hover { transform: translateY(-2px); filter: drop-shadow(0 0 22px rgba(199,125,255,0.9)); }
.about__avatar {
  position: relative;
  flex: none;
  width: clamp(120px, 22vw, 172px);
  height: clamp(120px, 22vw, 172px);
  display: grid;
  place-items: center;
}
.about__avatar img {
  grid-area: 1 / 1;
  width: 84%;
  height: 84%;
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle at 50% 40%, #2a0d52, #0a0417);
  box-shadow: 0 0 24px rgba(176,38,255,0.5), inset 0 0 12px rgba(0,0,0,0.6);
}
.about__orbit {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, var(--purple-neon) 78%, var(--purple-light) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 7px var(--purple-neon));
  animation: orbit-spin 9s linear infinite;
}
.stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
}
.stat {
  padding: clamp(16px, 2.5vw, 26px) clamp(12px, 2vw, 20px);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(30,10,60,0.5), rgba(12,4,30,0.55));
  border: 1px solid rgba(176,38,255,0.3);
  box-shadow: 0 0 24px rgba(176,38,255,0.2), inset 0 0 18px rgba(138,43,226,0.1);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(176,38,255,0.4);
}
.stat__num {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: clamp(26px, 4.4vw, 42px);
  line-height: 1.05;
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 70%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px rgba(176,38,255,0.5));
}
.stat__num--text { font-size: clamp(15px, 2.2vw, 22px); }  /* text values (game / title) — smaller, wraps */
.stat--wide { grid-column: 1 / -1; }                       /* full-width row */
.stat__num.is-live {                                       /* "Live" pops red */
  background: linear-gradient(180deg, #fff 0%, #ff6b8a 65%, #ff2b50 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(255,45,85,0.65));
}
.stat__label {
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b9a6d6;
}

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); }   /* 2×2 on phones */
}

@media (max-width: 560px) {
  .player__viz { display: none; }          /* keep the bar tidy on phones */
  .player__info { max-width: none; flex: 1; }
}

/* ---- generic content pages ---- */
.content { max-width: 760px; text-align: center; }
.content__title {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: clamp(40px, 8vw, 84px);
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 55%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(176,38,255,0.5));
  margin-bottom: 22px;
}
.content__text {
  font-size: 20px;
  line-height: 1.6;
  color: #d9cffa;
  opacity: 0.92;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}
.social {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  padding: 14px 26px;
  border: 1px solid rgba(176,38,255,0.5);
  border-radius: 12px;
  background: rgba(138,43,226,0.12);
  box-shadow: inset 0 0 18px rgba(138,43,226,0.25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.social:hover {
  transform: translateY(-4px) scale(1.04);
  background: rgba(176,38,255,0.28);
  box-shadow: 0 10px 30px rgba(176,38,255,0.5);
}

/* ============================================================
   PAGE TRANSITION (transition.webm covering clip)
   ============================================================ */
.transition {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  /* transparent — the video's own alpha (a diagonal wipe) reveals the live
     site through it. No solid fill here or the site gets hidden. */
  background-color: transparent;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.transition.is-active {
  opacity: 1;
  visibility: visible;
}
.transition__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                      /* JS shows it while the wipe plays */
}

/* ============================================================
   About page
   ============================================================ */
.ab {
  width: min(920px, 94vw);
  display: flex;
  flex-direction: column;
  gap: clamp(46px, 8vh, 88px);
  text-align: left;
}

/* intro */
.ab__intro {
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 56px);
}
.ab__avatar {
  position: relative;
  flex: none;
  width: clamp(124px, 26vw, 200px);
  height: clamp(124px, 26vw, 200px);
  display: grid;
  place-items: center;
}
.ab__avatar img {
  grid-area: 1 / 1;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle at 50% 40%, #2a0d52, #0a0417);
  box-shadow: 0 0 28px rgba(176,38,255,0.55), inset 0 0 14px rgba(0,0,0,0.6);
}
.ab__orbit {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 58%, var(--purple-neon) 78%, var(--purple-light) 90%, transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  filter: drop-shadow(0 0 8px var(--purple-neon));
  animation: orbit-spin 9s linear infinite;
}
.ab__introtext { display: flex; flex-direction: column; }
.ab__eyebrow {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: clamp(12px, 1.6vw, 16px);
  color: var(--purple-light);
  text-shadow: 0 0 10px rgba(176,38,255,0.5);
}
.ab__name {
  margin: 0.14em 0 0.34em;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(40px, 8vw, 78px);
  line-height: 1;
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 58%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 20px rgba(176,38,255,0.5));
}
.ab__lead {
  font-size: clamp(16px, 2.1vw, 22px);
  line-height: 1.6;
  color: #e3d8ff;
  max-width: 46ch;
}

/* section headings */
.ab__h2 {
  margin: 0 0 clamp(16px, 2.5vh, 26px);
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: clamp(2px, 0.6vw, 5px);
  font-size: clamp(27px, 4.8vw, 46px);
  color: var(--purple-light);
  text-shadow: 0 0 16px rgba(176,38,255,0.6);
}

/* prose */
.ab__prose { display: flex; flex-direction: column; gap: 1em; }
.ab__prose p {
  margin: 0;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.75;
  color: #d9cffa;
  max-width: 68ch;
}

/* cards */
.ab__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 22px);
}
.ab__card {
  padding: clamp(20px, 2.6vw, 28px);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(30,10,60,0.5), rgba(12,4,30,0.55));
  border: 1px solid rgba(176,38,255,0.3);
  box-shadow: 0 0 24px rgba(176,38,255,0.18), inset 0 0 18px rgba(138,43,226,0.1);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ab__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(176,38,255,0.4);
  border-color: rgba(176,38,255,0.6);
}
.ab__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  margin-bottom: 14px;
  color: var(--purple-light);
  background: rgba(176,38,255,0.14);
  box-shadow: inset 0 0 12px rgba(176,38,255,0.25);
}
.ab__icon svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(176,38,255,0.7));
}
.ab__card h3 {
  margin: 0 0 8px;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
}
.ab__card p {
  margin: 0;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.6;
  color: #c9b8e6;
}

/* quick facts */
.ab__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}
.ab__facts li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(20,4,45,0.4);
  border: 1px solid rgba(176,38,255,0.2);
}
.ab__fk {
  font-size: clamp(11px, 1.4vw, 13px);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b9a6d6;
}
.ab__fv {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  font-size: clamp(14px, 1.8vw, 18px);
  color: #fff;
  text-align: right;
}

/* quote */
.ab__quote { text-align: center; padding: clamp(8px, 2vh, 20px) 0; }
.ab__quote p {
  margin: 0 auto;
  max-width: 22ch;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(22px, 4vw, 40px);
  line-height: 1.25;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 70%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(176,38,255,0.5));
}

/* small sub-headings inside a section */
.ab__sub {
  margin: clamp(24px, 4vh, 34px) 0 12px;
  font-size: clamp(12px, 1.5vw, 14px);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--purple-light);
  text-shadow: 0 0 10px rgba(176,38,255,0.5);
}
.ab__h2 + .ab__sub { margin-top: 0; }

/* chips (bands, games, mission trips) */
.ab__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ab__chips li {
  padding: 8px 15px;
  border-radius: 999px;
  font-size: clamp(13px, 1.6vw, 15px);
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(138,43,226,0.14);
  border: 1px solid rgba(176,38,255,0.4);
  box-shadow: inset 0 0 12px rgba(138,43,226,0.18);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.ab__chips li:hover {
  transform: translateY(-2px);
  background: rgba(176,38,255,0.26);
  box-shadow: 0 6px 18px rgba(176,38,255,0.35);
}
/* mission trips: a check on the ones done, the next one highlighted */
.ab__trips li::before { content: "✓"; margin-right: 8px; color: var(--purple-light); }
.ab__trips li.is-next {
  border-style: dashed;
  border-color: rgba(199,125,255,0.85);
  background: linear-gradient(90deg, rgba(138,43,226,0.38), rgba(176,38,255,0.18));
}
.ab__trips li.is-next::before { content: "→"; color: #fff; }
.ab__trips + .ab__prose { margin-top: 18px; }

.ab__faith .ab__verse { margin: clamp(14px, 3vh, 28px) 0; }

/* a card that links somewhere */
a.ab__card { display: block; color: inherit; text-decoration: none; }
.ab__more {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--purple-light);
  transition: transform .25s ease;
}
a.ab__card:hover .ab__more { transform: translateX(4px); }

.ab__ctatext {
  margin: 0 0 20px;
  max-width: 46ch;
  font-size: clamp(15px, 2vw, 19px);
  line-height: 1.55;
  color: #d9cffa;
}

/* favorite verse */
.ab__verse {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vh, 22px);
  padding: clamp(18px, 4vh, 40px) 0;
  text-align: center;
  scroll-margin-top: 30vh;           /* /about#verse lands with the verse centred */
}
.ab__verse::before {                 /* soft light falling from above */
  content: "";
  position: absolute;
  left: 50%;
  top: -10%;
  width: min(620px, 90vw);
  height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(199,125,255,0.2), transparent);   /* fades out on every side */
  pointer-events: none;
  z-index: -1;
}
.ab__cross {
  width: clamp(22px, 3vw, 28px);
  height: auto;
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--purple-light)) drop-shadow(0 0 16px var(--purple-neon));
  animation: verse-glow 5s ease-in-out infinite;
}
@keyframes verse-glow {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
.ab__verse blockquote { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ab__verse p {
  margin: 0;
  max-width: 26ch;
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(22px, 3.8vw, 38px);
  line-height: 1.3;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff 0%, var(--purple-light) 70%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(176,38,255,0.5));
}
.ab__verse cite {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-style: normal;
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--purple-light);
  text-shadow: 0 0 10px rgba(176,38,255,0.6);
}
.ab__verse cite::before,
.ab__verse cite::after {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--purple-light));
}
.ab__verse cite::after { transform: scaleX(-1); }

/* cta */
.ab__cta { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ab__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.ab__btn {
  font-family: "Foltzyyy", "Rajdhani", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: clamp(14px, 1.8vw, 18px);
  text-decoration: none;
  color: #fff;
  padding: 14px 30px;
  border-radius: 14px;
  background: radial-gradient(circle at 35% 25%, var(--purple-light), var(--purple) 65%, #5e17a8);
  box-shadow: 0 0 20px rgba(176,38,255,0.5), inset 0 0 10px rgba(255,255,255,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ab__btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(176,38,255,0.7); }
.ab__btn--ghost {
  background: rgba(176,38,255,0.1);
  border: 1px solid rgba(176,38,255,0.5);
  box-shadow: inset 0 0 14px rgba(138,43,226,0.2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .nav__right { gap: 12px; right: 12px; }
  .nav__links { gap: 14px; }
  .nav__links a { letter-spacing: 1px; }
  .nav__home { width: 42vw; }
  .live { padding: 6px 10px; gap: 6px; }
  .live__text { display: none; }   /* keep just the glowing dot on phones */

  .ab__intro { flex-direction: column; text-align: center; align-items: center; }
  .ab__lead { max-width: none; }
  .ab__facts { grid-template-columns: 1fr; }
}

/* four nav links on small phones */
@media (max-width: 480px) {
  .nav__right { gap: 8px; right: 8px; }
  .nav__links { gap: 8px; }
  .nav__links a { font-size: 12.5px; letter-spacing: 0.3px; padding: 4px 0; }
  .live { padding: 5px 7px; }
}
@media (max-width: 370px) {
  .nav__links { gap: 6px; }
  .nav__links a { font-size: 11px; letter-spacing: 0; }
}

/* Gradient text only paints inside its box, and the italic letters lean past it (the F of FOLTZYYY
   lost its corner). Pad the sides so the gradient covers the lean, and pull the box back out by the
   same amount so nothing moves. "body" lifts it over the page sheets' margin: 0 shorthands. */
body :is(.ab__name, .mods__title, .so__title, .spot__title, .mcard__title, .show__title,
         .player__title, .about__handle, .stat__num, .content__title, .dock__game b, .ab__verse p, .navmini__logo) {
  padding-left: 0.12em;
  padding-right: 0.12em;
  margin-left: -0.12em;
  margin-right: -0.12em;
}
body .navmini__logo { margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}