/* ============================================================
   TRIBAL DIGITAL MUSIC — Portal Design System (theme.css)
   Derived from the live site tokens:
   navy #050a18 · blue #075df5 · cyan #10c8f7 · gold #f0a500
   Font: Inter. Premium dark. Reused across every portal page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* Brand */
  --navy:#050a18;
  --navy-2:#02091b;
  --blue:#075df5;
  --cyan:#10c8f7;
  --gold:#f0a500;
  --pink:#ff176d;
  --purple:#7b2cff;

  /* Surfaces */
  --bg:#030814;
  --card:rgba(13,24,49,.82);
  --card-2:rgba(9,18,40,.72);
  --glass:rgba(255,255,255,.04);
  --line:rgba(255,255,255,.11);
  --line-soft:rgba(255,255,255,.07);

  /* Text */
  --white:#ffffff;
  --text:#eaf0fb;
  --muted:#aebbd1;
  --muted-2:#7d8aa6;

  /* Acclikes */
  --grad-primary:linear-gradient(135deg,#075df5,#10c8f7);
  --grad-primary-strong:linear-gradient(135deg,#06245f,#075df5 52%,#10c8f7);
  --grad-navy:linear-gradient(135deg,#050b1b 0%,#082b59 52%,#050b18 100%);
  --grad-hot:linear-gradient(135deg,#ff176d,#7b2cff);

  /* System */
  --ok:#2fd07a;
  --warn:#f0a500;
  --err:#ff4d68;

  /* Shape */
  --r-lg:22px;
  --r-md:14px;
  --r-sm:10px;
  --shadow:0 22px 70px rgba(0,0,0,.45);
  --shadow-blue:0 18px 44px rgba(7,93,245,.28);
  --ring:0 0 0 3px rgba(16,200,247,.28);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
img{max-width:100%;display:block}
::selection{background:rgba(16,200,247,.3)}

/* ---------- Ambient animated background ---------- */
.bg-aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:var(--bg)}
.bg-aurora::before,.bg-aurora::after{
  content:"";position:absolute;width:60vmax;height:60vmax;border-radius:50%;
  filter:blur(90px);opacity:.55;mix-blend-mode:screen;
  background:radial-gradient(circle at 30% 30%,#075df5,transparent 60%);
  animation:drift 22s ease-in-out infinite;
}
.bg-aurora::after{
  background:radial-gradient(circle at 70% 70%,#10c8f7,transparent 60%);
  animation-duration:28s;animation-direction:reverse;left:auto;right:-10vmax;top:auto;bottom:-15vmax;
}
.bg-aurora::before{left:-12vmax;top:-14vmax}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 20%,#000 20%,transparent 75%);
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(6vmax,4vmax) scale(1.12)}
  66%{transform:translate(-4vmax,2vmax) scale(.94)}
}

/* ---------- Typography helpers ---------- */
.h1{font-size:clamp(28px,4vw,44px);font-weight:900;line-height:1.08;letter-spacing:-.5px;margin:0}
.h2{font-size:clamp(22px,2.6vw,30px);font-weight:800;margin:0}
.lead{color:var(--muted);font-size:15.5px;margin:6px 0 0}
.grad-text{background:var(--grad-primary);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--cyan)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:12px;padding:13px 22px;font-weight:800;font-size:14.5px;
  border:1px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .25s ease,filter .2s ease;
  position:relative;overflow:hidden;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.995)}
.btn-primary{background:var(--grad-primary);color:#fff;box-shadow:var(--shadow-blue)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 22px 52px rgba(7,93,245,.4)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.35),transparent 80%);
  transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{background:var(--glass);border-color:var(--line);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.08);transform:translateY(-2px)}
.btn-light{background:#fff;color:#08101f;font-weight:900}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,255,255,.16)}
.btn-block{width:100%}
.btn-lg{padding:16px 26px;font-size:16px;border-radius:14px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important;filter:grayscale(.2)}

/* ---------- Cards / glass ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:var(--r-lg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ---------- Form controls ---------- */
.field{position:relative;margin:0 0 14px}
.field .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted-2);
  display:flex;pointer-events:none;transition:color .2s}
.input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);
  color:var(--white);border-radius:12px;padding:14px 16px 14px 44px;font-size:14.5px;
  transition:border-color .2s,box-shadow .2s,background .2s;outline:none}
.input::placeholder{color:var(--muted-2)}
.input:focus{border-color:var(--cyan);background:rgba(16,200,247,.05);box-shadow:var(--ring)}
.field:focus-within .ic{color:var(--cyan)}
.input.no-ic{padding-left:16px}
select.input{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23aebbd1' viewBox='0 0 16 16'><path d='M8 11L3 6h10z'/></svg>");
  background-repeat:no-repeat;background-position:right 16px center}
.label{font-size:12.5px;font-weight:700;color:var(--muted);margin:0 0 7px;display:block;letter-spacing:.2px}
.hint{font-size:12px;color:var(--muted-2);margin-top:6px}
.hint.ok{color:var(--ok)}
.hint.err{color:var(--err)}

/* ---------- Chips / badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line)}
.badge-blue{background:rgba(7,93,245,.16);color:#8fbaff;border-color:rgba(7,93,245,.35)}
.badge-gold{background:rgba(240,165,0,.14);color:#ffd479;border-color:rgba(240,165,0,.3)}
.badge-ok{background:rgba(47,208,122,.14);color:#7ff0b3;border-color:rgba(47,208,122,.3)}
.badge-vip{background:var(--grad-hot);color:#fff;border-color:transparent}

/* ---------- Equalizer motif (music brand animation) ---------- */
.equalizer{display:inline-flex;align-items:flex-end;gap:3px;height:26px}
.equalizer span{width:4px;border-radius:3px;background:var(--grad-primary);animation:eq 1s ease-in-out infinite}
.equalizer span:nth-child(1){animation-delay:-.9s}
.equalizer span:nth-child(2){animation-delay:-.7s}
.equalizer span:nth-child(3){animation-delay:-.5s}
.equalizer span:nth-child(4){animation-delay:-.3s}
.equalizer span:nth-child(5){animation-delay:-.1s}
.equalizer span:nth-child(6){animation-delay:-.6s}
.equalizer span:nth-child(7){animation-delay:-.4s}
.equalizer span:nth-child(8){animation-delay:-.2s}
@keyframes eq{0%,100%{height:20%}50%{height:100%}}

/* ---------- Entrance animations ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
.reveal{opacity:0;animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}
.reveal.d4{animation-delay:.32s}.reveal.d5{animation-delay:.4s}.reveal.d6{animation-delay:.48s}

/* ---------- Utility ---------- */
.row{display:flex}.between{justify-content:space-between}.center{align-items:center}
.gap8{gap:8px}.gap12{gap:12px}.gap16{gap:16px}
.grid{display:grid}.g2{grid-template-columns:1fr 1fr}.wrap{flex-wrap:wrap}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.muted{color:var(--muted)}.small{font-size:12.5px}
@media (max-width:560px){.g2{grid-template-columns:1fr}}

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