/* ============================================================================
   AVH Studios — Shared brand layer
   Palette + resets + reusable components (nav, buttons, cards, footer).
   Loaded by the marketing landing page, dashboard, account page and affiliate
   portal so every surface shares one visual language. The app itself
   (studio.html) keeps its own style.css; both read the same :root tokens.
   ========================================================================== */

:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --border: #2a2f3a;
  --text: #e8eaed;
  --text-dim: #9aa0ac;
  --accent: #ff6b35;   /* brand orange  */
  --accent-2: #35c2ff; /* brand blue    */
  --accent-3: #35ff9e; /* brand green   */
  --danger: #ff4d5e;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --maxw: 1180px;
  font-size: 15px;
}

* { box-sizing: border-box; }

/* The `hidden` attribute must win even over components that set their own
   display (e.g. .btn { display:inline-flex }, .launch { display:grid }). */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
  background-color: #07080a;
  background-image:
    radial-gradient(120% 80% at 15% -10%, rgba(255, 107, 53, 0.10) 0%, rgba(7, 8, 10, 0) 55%),
    radial-gradient(120% 80% at 90% 0%, rgba(53, 194, 255, 0.10) 0%, rgba(7, 8, 10, 0) 55%),
    linear-gradient(180deg, #0b0d11 0%, #07080a 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p  { margin: 0 0 1em; color: var(--text); }
.lead { font-size: 1.15rem; color: var(--text-dim); }
.dim { color: var(--text-dim); }
.grad {
  background: linear-gradient(92deg, var(--accent) 0%, #ffb27a 45%, var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel-2); color: var(--text); font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(92deg, var(--accent) 0%, #ff8a4c 100%);
  color: #1a0d05; border-color: transparent;
  box-shadow: 0 10px 26px rgba(255, 107, 53, 0.35);
}
.btn-primary:hover { box-shadow: 0 14px 34px rgba(255, 107, 53, 0.5); }
.btn-blue {
  background: linear-gradient(92deg, var(--accent-2) 0%, #7ad8ff 100%);
  color: #05202b; border-color: transparent;
  box-shadow: 0 10px 26px rgba(53, 194, 255, 0.3);
}
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--panel-2); }
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Top navigation ------------------------------------------------------ */
.site-nav {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(12px);
  background: rgba(11, 13, 17, 0.78);
  border-bottom: 1px solid var(--border);
}
.site-nav .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand-lockup { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 1.15rem; color: var(--text); }
.brand-lockup:hover { text-decoration: none; }
.logo-dot {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; font-weight: 900; font-size: .8rem; color: #1a0d05;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
}
/* AVH Studios vector badge used in the nav lockup (replaces .logo-dot) */
.logo-mark { width: 42px; height: 42px; flex: 0 0 auto; display: block; }
.brand-lockup .brand-name { letter-spacing: -0.01em; }
.brand-name span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--text-dim); font-weight: 600; font-size: .93rem; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* min-width:0 + flex-shrink let the username give way instead of pushing the
   row past the viewport. Without it the flex item's automatic minimum size is
   its content width, so a signed-in nav overflowed by exactly the username's
   width between 721px and ~880px (phone landscape). */
.nav-user { color: var(--text-dim); font-weight: 600; font-size: .9rem; max-width: 170px; min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Below 800px there is not enough room for the name to truncate usefully, so
   drop it rather than shrink it to nothing. The 720px rule still collapses the
   links into the hamburger. */
@media (max-width: 800px) { .nav-user { display: none; } }
.nav-links a[data-social-link="profile"] { white-space: nowrap; }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 8px 11px; font-size: 1.1rem; cursor: pointer; }

/* ---- Cards / panels ------------------------------------------------------ */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, #14171d 100%);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow);
}
.card-soft { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; }
.pill {
  display: inline-flex; align-items: center; gap: .4em; padding: 5px 12px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; border: 1px solid var(--border); background: var(--panel-2); color: var(--text-dim);
}
.pill-orange { color: #ffd9c6; border-color: rgba(255,107,53,.45); background: rgba(255,107,53,.12); }
.pill-blue   { color: #c9ecff; border-color: rgba(53,194,255,.45); background: rgba(53,194,255,.12); }
.pill-green  { color: #c6ffe4; border-color: rgba(53,255,158,.45); background: rgba(53,255,158,.12); }

/* ---- Section rhythm ------------------------------------------------------ */
.section { padding: 74px 0; }
.section-tight { padding: 48px 0; }
.section-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.section-head .pill { margin-bottom: 14px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 800; color: var(--accent-2); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 40px 0 60px; color: var(--text-dim); }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 28px; }
.site-footer h4 { color: var(--text); font-size: .9rem; margin-bottom: 12px; }
.site-footer a { color: var(--text-dim); display: block; padding: 3px 0; font-size: .9rem; }
.site-footer a:hover { color: var(--text); }
.footer-legal { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border); font-size: .82rem; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---- Forms --------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--text-dim); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: #0e1015; color: var(--text); font-size: .95rem; font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(53,194,255,.15); }
.form-note { font-size: .82rem; color: var(--text-dim); }
.alert { padding: 12px 14px; border-radius: 10px; font-size: .9rem; margin-bottom: 14px; display: none; }
.alert.show { display: block; }
.alert-err { background: rgba(255,77,94,.12); border: 1px solid rgba(255,77,94,.45); color: #ffc9cf; }
.alert-ok  { background: rgba(53,255,158,.12); border: 1px solid rgba(53,255,158,.45); color: #c6ffe4; }

/* ---- Utility ------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 10px; } .mt-2 { margin-top: 20px; } .mt-3 { margin-top: 30px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 20px; }
.hide { display: none !important; }

/* ---- Reveal-on-scroll ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
    position: absolute; top: 64px; left: 0; right: 0; padding: 16px 22px 22px;
    background: rgba(11,13,17,.98); border-bottom: 1px solid var(--border);
  }
  .nav-links.open a { padding: 9px 0; font-size: 1rem; }
  .nav-toggle { display: inline-block; margin-left: auto; }
  .nav-cta { margin-left: 10px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding: 52px 0; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
}

/* Very small phones: the signed-in nav (username + Log out) can outgrow the
   viewport, so drop the username and compact the controls to avoid a
   horizontal scroll. */
@media (max-width: 560px) {
  .site-nav .wrap { gap: 10px; }
  .nav-user { display: none; }
  .nav-cta { margin-left: 8px; gap: 8px; }
  .nav-cta .btn { padding: 9px 14px; font-size: .85rem; }
}

/* ---- Online-status blink (shared) ---------------------------------------- */
/* The blinking green presence dot shown on profile cards when a creator is
   online. Kept in brand.css so every page that renders an avatar can animate
   it, whether or not it loads social.css. */
@keyframes avh-online-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(53, 255, 158, .55); }
  50% { opacity: .35; box-shadow: 0 0 0 5px rgba(53, 255, 158, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .soc-avatar.online::after,
  .dc-avatar.online::after,
  .online-dot { animation: none !important; }
}

/* ---- AVH boot loader (animated emblem) ----------------------------------- */
/* The .avh-loader rules live in brand-loader.js, which injects them as a
   scoped <style id="avh-loader-css"> at runtime. Keeping them with the script
   means the branded splash renders on EVERY page regardless of which
   stylesheet it loads — including the app pages (studio.html / reperform.html)
   that intentionally do NOT load brand.css. See brand-loader.js. */

/* ---- AVH inline emblem loader -------------------------------------------- */
/* The branded replacement for the bare .spinner used inside in-app loading
   blocks (dashboard, wallet, featured artists, account, voices, collab, admin,
   judge). Apply to an <img> so the emblem SVG's own spin animation runs:
     <img class="avh-emblem-load" src="brand/avh-emblem.svg" alt="" width="46" height="46">
*/
.avh-emblem-load {
  width: 46px; height: 46px; display: block; margin: 0 auto 14px;
  animation: avh-emblem-pulse 1.7s ease-in-out infinite;
}
@keyframes avh-emblem-pulse { 0%, 100% { opacity: .68; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }
/* Inline variant for "… Loading" status lines (sits in the text flow). */
.avh-emblem-load--inline { width: 22px; height: 22px; display: inline-block; margin: 0 8px 0 0; vertical-align: -4px; }
@media (prefers-reduced-motion: reduce) { .avh-emblem-load { animation: none; opacity: .92; } }