/* Ctrl Alt Elite premium buttons (.btn-lit), ported from FatedFace / Cosmic Glow.
   Lit from above: a top-to-bottom gradient (top ~10% lighter than the brand
   colour), a top highlight, a bottom edge, a contact shadow and a coloured glow.
   Brand set: white, black, red, lime. CTAs alternate red and lime across a page.
   Modifiers only set variables; size and padding come from .btn / .btn-lg. */

:root{
  --lime:#D4FF2A;
  --lime-deep:#B8E600;
}

:where(.btn-lit){
  --btn-c:#DC2626;
  --btn-c-light:#F04848;
  --btn-glow:#DC262680;
  --btn-hi:#ffffff59;
  --btn-ink:#FAFAFA;
}
.btn-lit-red{
  --btn-c:#DC2626;
  --btn-c-light:#F04848;
  --btn-glow:#DC262680;
  --btn-ink:#FAFAFA;
}
.btn-lit-lime{
  --btn-c:var(--lime-deep);
  --btn-c-light:#E4FF6B;
  --btn-glow:#C8F52A80;
  --btn-hi:#ffffffa6;
  --btn-ink:#0A0A0A;
}
.btn-lit-black{
  --btn-c:#0A0A0A;
  --btn-c-light:#2C2C31;
  --btn-glow:#0A0A0A40;
  --btn-hi:#ffffff2e;
  --btn-ink:#FAFAFA;
}

body .btn-lit{
  color:var(--btn-ink);
  border:0;
  background:linear-gradient(var(--btn-c-light),var(--btn-c));
  box-shadow:
    inset 0 1px 0 var(--btn-hi),
    inset 0 -2px 0 #0003,
    0 1px 2px #0006,
    0 8px 24px -6px var(--btn-glow);
  border-radius:14px;
  transition:box-shadow 120ms ease,translate 120ms ease,filter 120ms ease;
}
/* Chrome / Edge / Android: Apple-style squircle. It reads smaller than a round
   corner of the same size, hence ~1.5x the fallback radius. */
@supports (corner-shape:superellipse(3)){
  body .btn-lit{border-radius:21px;corner-shape:superellipse(3)}
}
@media (hover:hover){
  body .btn-lit:hover{filter:brightness(1.05)}
  body .btn-lit-red:hover{background:linear-gradient(var(--btn-c-light),var(--btn-c))}
}
body .btn-lit:active{
  translate:0 1px;transform:none;
  box-shadow:inset 0 2px 4px #0004;
}
/* On black sections the black button needs an edge to read. */
.section--dark .btn-lit-black,.film-band .btn-lit-black{box-shadow:
  inset 0 1px 0 var(--btn-hi),inset 0 -2px 0 #0003,0 0 0 1px #3F3F46,0 8px 24px -6px #00000080}
body .btn-lit:focus-visible{outline:2px solid var(--btn-c);outline-offset:3px}
@media (prefers-reduced-motion:reduce){body .btn-lit{transition:none}}