/* ═══════════════════════════════════════════════
   BASE — Variables · Reset · Animations
   ═══════════════════════════════════════════════ */

:root {
  --color-bg: #f0f0f0;
  --color-bg-soft: #e6e6eb;
  --color-ink: #000000;
  --color-white: #ffffff;
  --color-muted: #838391;
  --color-muted-dark: #626270;
  --color-accent: #716eff;
  --color-accent-soft: #8582ff;
  --color-line: rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 18px 55px rgba(24, 24, 42, 0.1);
  --radius-pill: 20px;
  --radius-card: 8px;
  --page-pad: 142px;
  --font-main: "Montserrat", Arial, sans-serif;
  --font-display: "Unbounded", "Montserrat", Arial, sans-serif;
  --font-system: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-pixel: "Silkscreen", "Courier New", monospace;
  --motion-fast: 180ms;
  --motion-medium: 420ms;
  --motion-slow: 680ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-main);
  background: linear-gradient(180deg, #c9c8d2 0%, #ffffff 100%);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

/* ─── Keyframes ─────────────────────────────────────── */
@keyframes view-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes soft-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -8px, 0); }
}

/* ─── Reveal Utility ────────────────────────────────── */
.reveal-item {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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