/* =====================================================================
   DOWAR — stylesheet
   Palette: electric cyan on deep-space black.
   ===================================================================== */

:root{
  --bg:#04070c;                /* deep space black, faint blue in it */
  --bg-2:#080d14;
  --bg-3:#0d141d;
  --ink:#eef7fb;
  --ink-soft:#c9d8e2;
  --ink-dim:#7f93a3;
  --line:rgba(160,215,240,.15);

  --accent:#22c8f5;            /* change this one value to re-brand */
  --accent-hot:#a8ecff;        /* the white-hot centre of the glow */
  --accent-ink:#03080e;        /* text on top of an accent-filled button */
  --glow:rgba(34,200,245,.45);

  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --maxw:1080px;
  --pad:24px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{text-wrap:balance}

/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* screen-reader-only text (icon labels) */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------------------- top bar ---------------------------- */
.bar{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px var(--pad);
  background:linear-gradient(to bottom,rgba(4,7,12,.94),rgba(4,7,12,0));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.bar__mark{
  font-family:var(--display);font-size:20px;letter-spacing:.18em;
  text-decoration:none;
}

/* ------------------------------ hero ----------------------------- */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-items:center;
  padding-block:120px 80px;overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 85% at 62% 18%,rgba(34,200,245,.26),transparent 62%),
    radial-gradient(80% 60% at 12% 92%,rgba(34,200,245,.12),transparent 60%),
    url("../img/hero.jpg") center/cover no-repeat,
    var(--bg-2);
  filter:grayscale(.6) contrast(1.2) brightness(.45) saturate(1.3);
}
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--bg) 3%,rgba(4,7,12,.55) 45%,rgba(4,7,12,.8));
}
/* drifting starfield — pure CSS, no image needed */
.stars{
  position:absolute;inset:-100px;z-index:1;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%,rgba(200,240,255,.9),transparent),
    radial-gradient(1.2px 1.2px at 70% 15%,rgba(160,220,255,.7),transparent),
    radial-gradient(1.6px 1.6px at 45% 70%,rgba(220,245,255,.8),transparent),
    radial-gradient(1px 1px   at 85% 55%,rgba(180,230,255,.7),transparent),
    radial-gradient(1.3px 1.3px at 10% 80%,rgba(200,240,255,.6),transparent),
    radial-gradient(1px 1px   at 60% 90%,rgba(190,235,255,.6),transparent);
  background-size:340px 340px,290px 290px,410px 410px,250px 250px,370px 370px,320px 320px;
  animation:drift 90s linear infinite;
}
@keyframes drift{to{transform:translate3d(-340px,-180px,0)}}

.hero__inner{position:relative;z-index:2}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font:600 11px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 22px;
}
.eyebrow::before{
  content:"";width:34px;height:1px;flex:none;
  background:var(--accent);box-shadow:0 0 10px var(--accent);
}

.hero__title{margin:0;line-height:.88}
.hero__main{
  display:block;
  font-family:var(--display);font-weight:400;
  font-size:clamp(66px,16vw,180px);letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink);
  text-shadow:
    0 0 26px rgba(168,236,255,.35),
    0 0 60px var(--glow),
    0 0 110px rgba(34,200,245,.28);
}

.hero__tag{
  max-width:44ch;margin:26px 0 0;color:var(--ink-soft);
  font-size:clamp(15px,1.6vw,18px);
}

.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:36px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:99px;text-decoration:none;
  font:600 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);
  transition:transform .22s,filter .22s,border-color .22s,background .22s,box-shadow .22s;
}
.btn svg{width:17px;height:17px;flex:none}
.btn--solid{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  box-shadow:0 0 30px -6px var(--glow);
}
.btn--solid:hover,.btn--solid:focus-visible{
  filter:brightness(1.1);transform:translateY(-2px);
  box-shadow:0 0 42px -4px var(--glow);
}
.btn--ghost:hover,.btn--ghost:focus-visible{
  border-color:var(--accent);color:var(--accent);
  background:rgba(34,200,245,.07);transform:translateY(-2px);
}
.btn--wide{width:100%;max-width:460px}

.scroll-hint{
  position:absolute;inset-block-end:26px;inset-inline-start:50%;
  z-index:2;translate:-50% 0;
  font:600 10px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------------------------- sections --------------------------- */
section{position:relative;z-index:2}
.sec{padding-block:clamp(64px,9vw,110px);border-block-start:1px solid var(--line)}
.sec__head{display:flex;align-items:baseline;gap:16px;margin:0 0 34px}
.sec__head h2{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(30px,5vw,52px);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;
}
.sec__head .num{
  font:600 12px/1 var(--body);color:var(--accent);letter-spacing:.16em;flex:none;
  text-shadow:0 0 14px var(--glow);
}

/* placeholder box shown until config.php is filled in */
.empty{
  display:grid;place-items:center;min-height:180px;padding:32px;
  border:1px dashed var(--line);border-radius:16px;background:var(--bg-2);
  text-align:center;color:var(--ink-dim);
}
.empty p{margin:0;max-width:48ch;font-size:14px}

/* ------------------------ spotify player ------------------------- */
.player{
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:var(--bg-2);
  box-shadow:0 24px 60px -30px #000,0 0 50px -20px var(--glow);
}
.player iframe{display:block;width:100%;height:452px;border:0}
.player__note{margin:14px 0 0;font-size:13px;color:var(--ink-dim)}
@media(max-width:600px){.player iframe{height:380px}}

/* ------------------- DistroKid HyperFollow CTA ------------------- */
.smartlink{
  margin-block-start:26px;padding:26px;border-radius:16px;
  border:1px solid rgba(34,200,245,.28);
  background:linear-gradient(180deg,rgba(34,200,245,.10),transparent);
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.smartlink p{margin:0;font-size:13px;color:var(--ink-dim)}

/* -------------------------- platform icons ----------------------- */
.icogroup + .icogroup{margin-block-start:34px}
.icogroup__label{
  margin:0 0 14px;font:600 11px/1 var(--body);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);
}

.icos{display:flex;flex-wrap:wrap;gap:12px}
.ico{
  width:60px;height:60px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;
  background:var(--bg-2);
  transition:transform .22s,border-color .22s,background .22s,box-shadow .22s;
}
.ico svg{width:25px;height:25px;fill:var(--ink);transition:fill .22s}
a.ico:hover,a.ico:focus-visible{
  transform:translateY(-4px);
  border-color:var(--brand,var(--accent));
  background:var(--bg-3);
  box-shadow:0 0 26px -6px var(--brand,var(--accent));
}
a.ico:hover svg,a.ico:focus-visible svg{fill:var(--brand,var(--accent))}

/* Waiting on its URL: visible so the layout is complete, but inert.
   Remove by filling the link in config.php, or by setting
   'show_pending_icons' => false. */
.ico--pending{
  opacity:.3;
  border-style:dashed;
  cursor:default;
}
.ico--pending svg{fill:var(--ink-dim)}

.pending-note{
  margin:22px 0 0;font-size:12px;color:var(--ink-dim);
  padding-inline-start:12px;
  border-inline-start:2px solid var(--line);
}

@media(max-width:400px){
  .ico{width:54px;height:54px}
  .ico svg{width:23px;height:23px}
}

/* ------------------------------ bio ------------------------------ */
.bio{display:grid;gap:40px;grid-template-columns:1fr;align-items:start}
@media(min-width:860px){.bio{grid-template-columns:1.15fr .85fr;gap:56px}}
.bio p{margin:0 0 18px;font-size:clamp(16px,1.8vw,19px);line-height:1.85;color:var(--ink-soft)}
.bio .lead{color:var(--ink);font-weight:500}

/* the details card beside the bio */
.infocard{
  padding:10px 28px;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(34,200,245,.10),transparent);
}
.facts{list-style:none;margin:0;padding:0}
.facts li{
  display:grid;grid-template-columns:88px 1fr;gap:16px;align-items:baseline;
  padding-block:16px;border-block-end:1px solid var(--line);
}
.facts li:last-child{border-block-end:0}
.facts li b{
  color:var(--accent);font-weight:600;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.facts li span{color:var(--ink);font-size:15px}

/* ---------------------------- contact ---------------------------- */
.contact{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:24px;padding:34px;border:1px solid var(--line);border-radius:16px;
  background:var(--bg-2);
}
.contact h3{margin:0 0 8px;font-size:20px}
.contact p{margin:0;color:var(--ink-dim);font-size:14px}
.contact__actions{display:flex;flex-direction:column;align-items:center;gap:12px}

/* WhatsApp button — brand green rather than the page accent, because
   people recognise it by colour before they read it. */
.btn--wa{
  background:#25D366;border-color:#25D366;color:#04120a;
  box-shadow:0 0 30px -8px rgba(37,211,102,.6);
}
.btn--wa:hover,.btn--wa:focus-visible{
  filter:brightness(1.08);transform:translateY(-2px);
  box-shadow:0 0 42px -6px rgba(37,211,102,.7);
}

.contact__mail{
  font-size:12px;color:var(--ink-dim);text-decoration:none;
  border-block-end:1px solid var(--line);padding-block-end:2px;
  transition:color .2s,border-color .2s;
}
.contact__mail:hover,.contact__mail:focus-visible{color:var(--ink);border-color:var(--ink-dim)}

/* ----------------------------- footer ---------------------------- */
.foot{border-block-start:1px solid var(--line);position:relative;z-index:2}
.foot__inner{
  padding-block:38px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;align-items:center;
  color:var(--ink-dim);font-size:12px;letter-spacing:.06em;
}
.foot .mark{font-family:var(--display);font-size:16px;letter-spacing:.2em;color:var(--ink)}

/* ------------------------ scroll reveal -------------------------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* --------------------------- a11y -------------------------------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .scroll-hint,.stars{animation:none}
  *{transition-duration:.01ms !important}
}