/* ============================================================
   MD-BASE.CSS — Reset, Animations, Typography
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--md-font-b);
  color: var(--md-g8);
  background: var(--md-g0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}
button { cursor: pointer; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }

/* ---- Typography ---- */
.md-h1 {
  font-family: var(--md-font-h);
  font-size: var(--md-fs-2xl);
  font-weight: 800;
  line-height: 1.2;
  color: var(--md-g9);
}
.md-h2 {
  font-family: var(--md-font-h);
  font-size: var(--md-fs-xl);
  font-weight: 700;
  line-height: 1.3;
  color: var(--md-g9);
}
.md-h3 {
  font-family: var(--md-font-h);
  font-size: 1rem;
  font-weight: 700;
  color: var(--md-g7);
}
.md-body { font-size: .92rem; }
.md-small { font-size: .84rem; color: var(--md-g5); }
.md-tiny { font-size: var(--md-fs-xs); color: var(--md-g4); }
.md-label {
  font-size: var(--md-fs-sm);
  font-weight: 600;
  color: var(--md-g6);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Child typography ---- */
.md-child-text {
  font-family: var(--md-font-c);
  font-weight: 700;
  line-height: 1.5;
}
.md-child-h1 {
  font-family: var(--md-font-c);
  font-size: var(--md-fs-xl);
  font-weight: 900;
}
.md-child-h2 {
  font-family: var(--md-font-c);
  font-size: var(--md-fs-lg);
  font-weight: 800;
}

/* ---- Animations ---- */
@keyframes md-fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes md-fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes md-slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes md-slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes md-scaleIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}
@keyframes md-bounceIn {
  0%   { transform: scale(.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(.95); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes md-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
@keyframes md-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes md-spin {
  to { transform: rotate(360deg); }
}
@keyframes md-confetti {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(-300px) rotate(720deg); }
}
@keyframes md-grow {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Animation utilities */
.md-anim-fade    { animation: md-fadeIn var(--md-dur-slow) var(--md-ease) both; }
.md-anim-slide   { animation: md-slideUp var(--md-dur-slow) var(--md-ease) both; }
.md-anim-scale   { animation: md-scaleIn var(--md-dur) var(--md-ease) both; }
.md-anim-bounce  { animation: md-bounceIn 600ms var(--md-bounce) both; }
.md-anim-shake   { animation: md-shake 500ms var(--md-ease); }
.md-anim-pulse   { animation: md-pulse 2s infinite; }

/* Stagger delays */
.md-delay-1 { animation-delay: 50ms; }
.md-delay-2 { animation-delay: 100ms; }
.md-delay-3 { animation-delay: 150ms; }
.md-delay-4 { animation-delay: 200ms; }
.md-delay-5 { animation-delay: 250ms; }
.md-delay-6 { animation-delay: 300ms; }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--md-g3); border-radius: var(--md-r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--md-g4); }

/* ---- Selection ---- */
::selection { background: var(--md-primary-pale); color: var(--md-primary); }

/* ---- Utility ---- */
.md-hidden { display: none !important; }
.md-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.md-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-center { display: flex; align-items: center; justify-content: center; }
.md-between { display: flex; align-items: center; justify-content: space-between; }
.md-col { display: flex; flex-direction: column; }
.md-gap-1 { gap: var(--md-sp-1); }
.md-gap-2 { gap: var(--md-sp-2); }
.md-gap-3 { gap: var(--md-sp-3); }
.md-gap-4 { gap: var(--md-sp-4); }