/* ================================================================
   TOOL Album Counter — Base
   Tokens, reset, scrollbar, body, backgrounds, shared keyframes
   ================================================================ */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  --bg: #050307;
  --accent: #ffef77;
  --purple: rgba(163, 107, 255, 1);
  --purple-dim: rgba(163, 107, 255, 0.15);
  --purple-glow: rgba(163, 107, 255, 0.3);
  --text-primary: #e6eef8;
  --text-secondary: #b9cfe6;
  --text-muted: #b7c7df;
  --text-faint: rgba(183, 199, 223, 0.35);
  --text-ghost: rgba(183, 199, 223, 0.18);
  --white-dim: rgba(255, 255, 255, 0.03);
  --max-width: 1200px;
}

* { box-sizing: border-box; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--purple-dim); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--purple-glow); }
::-webkit-scrollbar-thumb:active { background: rgba(163, 107, 255, 0.45); }
::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-width: thin; scrollbar-color: var(--purple-dim) transparent; }

/* ── Base ───────────────────────────────────────────────────────── */
html {
  height: 100%;
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--text-primary);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px;
  padding-top: max(16px, env(safe-area-inset-top));
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at center, rgba(163,107,255,0.06) 0%, rgba(0,0,0,0.9) 60%), var(--bg);
}

figure { margin: 0; }

/* ── Custom Font ────────────────────────────────────────────────── */
@font-face {
  font-family: "SystemaEncephale";
  src: local("SystemaEncephale"), url("/fonts/SystemaEncephale.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Background Layers ─────────────────────────────────────────── */
.sacred-geometry {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  opacity: 0.12; overflow: hidden;
}

.sacred-geometry svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 150vmax; height: 150vmax;
  animation: rotate-slow 180s linear infinite;
}

.fibonacci-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23a36bff' stroke-width='0.5' d='M50,50 m-40,0 a40,40 0 1,0 80,0 a40,40 0 1,0 -80,0 M50,50 m-25,0 a25,25 0 1,1 50,0 a25,25 0 1,1 -50,0 M50,50 m-15,0 a15,15 0 1,0 30,0 a15,15 0 1,0 -30,0 M50,50 m-8,0 a8,8 0 1,1 16,0 a8,8 0 1,1 -16,0'/%3E%3C/svg%3E");
  background-size: 400px 400px;
  animation: pulse-overlay 8s ease-in-out infinite;
}

/* ── Shared Keyframes ──────────────────────────────────────────── */
@keyframes rotate-slow {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes pulse-overlay {
  0%, 100% { opacity: 0.025; }
  50% { opacity: 0.05; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 0.95; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 10px rgba(255,239,119,0.3), 0 0 20px rgba(255,239,119,0.1); }
  50%      { text-shadow: 0 0 20px rgba(255,239,119,0.5), 0 0 40px rgba(255,239,119,0.2), 0 0 60px rgba(255,239,119,0.1); }
}

@keyframes titleReveal {
  from { opacity: 0; letter-spacing: 0.3em; filter: blur(10px); }
  to   { opacity: 1; letter-spacing: normal; filter: blur(0); }
}

@keyframes borderGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

@keyframes cardSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes milestoneFade { from { opacity: 0; } to { opacity: 1; } }