/* ==========================================================
   VTL — design override
   For app pages that keep their own layout CSS. Loaded last,
   so it re-skins type, colour and corner radius without
   disturbing any of the page's bespoke layout.
   ========================================================== */

:root{
  --void:#06050a;
  --panel:#0d0b14;
  --ink:#f4f5f0;
  --dim:rgba(244,245,240,.52);
  --faint:rgba(244,245,240,.28);
  --rule:rgba(244,245,240,.13);
  --rule-soft:rgba(244,245,240,.07);
  --acid:#c8ff2f;
  --violet:#a855f7;
  --ok:#4ade80;
  --warn:#fbbf24;
  --bad:#f87171;
  --display:'Fredoka One','Nunito',system-ui,cursive;
  --body:'Nunito',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --r-pill:999px;

  /* common legacy token names these pages may already use */
  --bg:#06050a;
  --blue:#c8ff2f;
  --green:#c8ff2f;
  --accent:#c8ff2f;
  --primary:#c8ff2f;
  --white:#f4f5f0;
  --sub:rgba(244,245,240,.52);
  --text:#f4f5f0;
  --muted:rgba(244,245,240,.52);
  --border:rgba(244,245,240,.13);
  --card:#0d0b14;
}

/* ---------- type ---------- */
body,input,textarea,select,button{font-family:var(--body)}
h1,h2,h3,h4,
.hero-title,.vtl-logo,.enter-logo,.section-title,.card-name,.card-title,
.page-title,.music-title,.logo,.logo-mark,.nav-logo,.hmb-logo{
  font-family:var(--display)!important;letter-spacing:-.02em}
.eyebrow,.section-eyebrow,.page-eyebrow,.hero-tagline,.enter-sub,.enter-label,
.card-platform,.chip,.info-chip,.logo-tag,.nav-link,.nav-back,.hmb-section,
.card-cta,.music-artist,.credit{font-family:var(--mono)!important}

body{background:var(--void);color:var(--ink);-webkit-font-smoothing:antialiased}
::selection{background:var(--acid);color:#06050a}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}

/* ---------- everything is round ---------- */
button,input[type=submit],input[type=button],input[type=reset],[role=button],
[class*="btn"],[class*="Btn"],.chip,.info-chip,.q-btn,.tab,.nav-cta{
  border-radius:var(--r-pill)!important}
input,textarea,select,.msg,.pill,.progress,.progress-bar,.progress-wrap,
.music-progress-wrap,.pbar-wrap{border-radius:var(--r)!important}
.card,.panel,.modal,.box,.tile,.widget,.cookie-banner,.cookie,.hmb-drawer,
.upload-card,.result-box,.result,.terminal,.svc,.overall,.support-bar,
.clip-thumb,.lb-inner,.drop-zone,.dropzone,.music-row,.toast,.tier{
  border-radius:var(--r-lg)!important}
.music-btn,.play-circle,.clip-play-btn,.status-dot,.svc-dot,.chip-dot,
.overall-dot,.eq-bar,.avatar-img,.enter-pulse-ring{border-radius:50%!important}

/* ---------- brand colour swaps ---------- */
.card-cta,.chip-dot,.enter-arrow,.section-eyebrow,.page-eyebrow,.eyebrow,
.hero-tagline,a.dl-link{color:var(--acid)!important}
.primary,.btn-primary,.accept,.cookie-btn.accept,.dl-btn,.btn-upload,
.modal-submit,.support-btn{
  background:var(--acid)!important;color:#06050a!important;
  border-color:var(--acid)!important;font-weight:700}
.primary:hover,.btn-primary:hover,.accept:hover,.cookie-btn.accept:hover,
.dl-btn:hover,.btn-upload:hover,.modal-submit:hover,.support-btn:hover{
  background:transparent!important;color:var(--acid)!important}

.cookie-banner,.cookie{background:rgba(13,11,20,.96)!important;
  border:1px solid var(--rule)!important;backdrop-filter:blur(18px)}
.cookie-btn,.cookie button{padding:.55rem 1.1rem!important;
  font-family:var(--mono)!important;font-size:.64rem!important;
  letter-spacing:.12em;text-transform:uppercase}

/* keep any reveal animation from stranding content invisible */
.reveal.in,.reveal.on,.reveal.visible,.reveal.show,.reveal.active,
.reveal.revealed,.reveal.is-visible{opacity:1!important;transform:none!important}

/* scrollbar */
*{scrollbar-width:thin;scrollbar-color:rgba(200,255,47,.4) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(200,255,47,.35);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(200,255,47,.6);background-clip:content-box}

/* credits */
.credit{width:100%;padding-top:1.1rem;margin-top:.4rem;
  border-top:1px solid var(--rule-soft);font-family:var(--mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:none;color:rgba(244,245,240,.22);line-height:1.7}
.credit b{color:rgba(244,245,240,.4);font-weight:500}
.credit a{color:rgba(244,245,240,.32);text-decoration:none}
.credit a:hover{color:var(--acid)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* ----------------------------------------------------------
   Fredoka One is considerably wider than the faces these
   pages were originally set in, so cap oversized display
   type and let it wrap instead of overflowing.
   ---------------------------------------------------------- */
h1,.hero-title,.vtl-logo,.enter-logo,.page-title,.hero h1{
  font-size:clamp(2rem,7vw,5rem)!important;
  line-height:1.02!important;
  overflow-wrap:anywhere;
  hyphens:none;
  max-width:100%;
}
.enter-logo{font-size:clamp(2.6rem,11vw,7rem)!important}
h2,.section-title{font-size:clamp(1.5rem,4.2vw,2.6rem)!important;line-height:1.1!important;
  overflow-wrap:anywhere}
h3,.card-name,.card-title{font-size:clamp(1.05rem,2.4vw,1.35rem)!important;
  line-height:1.2!important;overflow-wrap:anywhere}
/* nothing should push the page sideways */
body{overflow-x:hidden}

/* ==========================================================
   Smoothness pass
   Softer easing, GPU-friendly transforms, momentum scrolling
   and a page-entry fade. All of it respects reduced-motion.
   ========================================================== */

:root{
  /* springier than the old curve — overshoots slightly, settles gently */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.22s;
  --dur:.42s;
  --dur-slow:.8s;
}

html{
  scroll-behavior:smooth;
  /* keeps anchor jumps clear of the fixed header */
  scroll-padding-top:6rem;
}

/* smoother compositing for anything that animates */
.card,.tier,.proj,.m,.rev,.row,.item,.mod,.stat,.acc,.btn,.chip,.svc{
  transform:translateZ(0);
  backface-visibility:hidden;
}

/* ---------- page entry ---------- */
@keyframes vtl-page-in{
  from{opacity:0;transform:translate3d(0,8px,0)}
  to{opacity:1;transform:none}
}
body{animation:vtl-page-in .5s var(--ease-soft) both}

/* ---------- reveal: softer, longer, with a touch of scale ---------- */
.rv{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.995);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.rv.in{opacity:1;transform:none;will-change:auto}

/* ---------- interactive polish ---------- */
a,button,summary,.chip,.btn,.tab,.nav-links a,.hmb-link,.foot-links a{
  transition:
    color var(--dur-fast) var(--ease-soft),
    background-color var(--dur-fast) var(--ease-soft),
    border-color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-spring),
    box-shadow var(--dur) var(--ease);
}
.btn:active,button:active,.chip:active{transform:scale(.97)}

.card,.tier,.proj,.mod,.svc,.item,.row,.m,.clip-thumb{
  transition:
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* nav condense */
header,nav{transition:
  padding var(--dur) var(--ease-soft),
  background-color var(--dur) var(--ease-soft),
  border-color var(--dur) var(--ease-soft),
  backdrop-filter var(--dur) var(--ease-soft)}

/* scroll progress rail — no lag on fast scroll */
.prog{transition:none;will-change:transform}

/* accordion opens without snapping */
.acc{transition:border-color var(--dur) var(--ease),
  background-color var(--dur) var(--ease)}
.acc summary::after{transition:transform var(--dur) var(--ease-spring)}

/* drawer */
.drawer,.hmb-drawer{transition:
  opacity var(--dur) var(--ease-soft),
  visibility var(--dur) var(--ease-soft),
  transform var(--dur) var(--ease)}

/* images settle in rather than popping */
img{transition:opacity var(--dur) var(--ease-soft)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body{animation:none}
  .rv{opacity:1!important;transform:none!important;transition:none!important}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}