/* ===== Baddy Armor — shared base + palette =====
   Pulled from the BA pixel-gothic logo (violet → lavender, metallic).
   Cyberpunk + kawaii on near-black. */
:root{
  --ink:#0a0712;            /* near-black, violet-tinted */
  --ink-2:#120c20;          /* raised panel */
  --ink-3:#181030;          /* card */
  --line:rgba(178,150,238,0.16);

  --violet-deep:#3a2a5e;
  --violet:#7c4dcb;         /* brand primary */
  --violet-bright:#9d6bff;  /* glow */
  --lav:#c4a8f0;            /* light text accent */
  --lav-soft:#e0d2f7;

  --cyan:#34e7e0;           /* neon accent 1 */
  --pink:#ff5bd1;           /* neon accent 2 (kawaii) */
  --pink-soft:#ffa6e2;

  --paper:#f3eefb;          /* near-white text */
  --muted:#b6a8d4;          /* muted lavender-grey body */

  --font-disp:"Space Grotesk",system-ui,sans-serif;
  --font-body:"Space Grotesk",system-ui,sans-serif;
  --font-pixel:"Silkscreen",monospace;
  --font-cyber:"Chakra Petch",system-ui,sans-serif;
  --font-mono:"Space Mono",ui-monospace,monospace;
}

/* Each page is a self-contained scroll-less frame inside an artboard. */
.ba-page{
  width:100%;
  font-family:var(--font-body);
  color:var(--paper);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow:hidden;
}
.ba-page *{box-sizing:border-box;}
.ba-page img{display:block;}
.ba-page h1,.ba-page h2,.ba-page h3,.ba-page p{margin:0;}
.ba-page a{color:inherit;text-decoration:none;}

/* utility: pixelated rendering for the logo + hearts so the pixel art stays crisp */
.px-art{image-rendering:pixelated;image-rendering:crisp-edges;}

/* Uniform mascot height across every direction: 450px tall, natural
   proportions (width follows aspect ratio), bottom-anchored baseline.
   Subtle white→purple glow (hugs the character silhouette) + soft grounding shadow. */
.ba-page img[src*="mascot-"]{
  height:450px !important;
  width:auto !important;
  object-fit:contain;
  object-position:center bottom;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.45))
    drop-shadow(0 0 13px rgba(157,107,255,.34))
    drop-shadow(0 0 30px rgba(157,107,255,.16))
    drop-shadow(0 16px 24px rgba(0,0,0,.5)) !important;
}

/* Mascot #2 (laptop / About section) reads a touch large — nudge it down. */
.ba-page img[src*="mascot-laptop"]{
  height:400px !important;
}

/* Mascot #3 (red / Drop section) — nudge it down a touch too. */
.ba-page img[src*="mascot-red"]{
  height:400px !important;
}

/* keyframes shared across directions */
@keyframes ba-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ba-pulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes ba-blink{0%,92%,100%{opacity:1}94%,98%{opacity:.25}}
@keyframes ba-scan{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes ba-drift{0%{background-position:0 0}100%{background-position:0 -800px}}
@keyframes ba-spin{to{transform:rotate(360deg)}}
@keyframes ba-load{0%{width:6%}100%{width:62%}}
@keyframes ba-sparkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes ba-glitch{0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}20%{clip-path:inset(14% 0 60% 0);transform:translate(-2px,0)}40%{clip-path:inset(50% 0 20% 0);transform:translate(2px,0)}60%{clip-path:inset(80% 0 5% 0);transform:translate(-1px,0)}80%{clip-path:inset(30% 0 45% 0);transform:translate(1px,0)}}