/* =========================================================
   GTA:Yonder — Base Styles
   ========================================================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: var(--leading-normal);
  min-height: 100vh;
  transition: background var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
}

/* Ambient glow */
body::before {
  content: '';
  position: fixed;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse, rgba(0, 216, 154, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] body::before {
  background: radial-gradient(ellipse, rgba(0, 169, 120, 0.03) 0%, transparent 70%);
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--text); }

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

::selection { background: var(--accent-soft); color: var(--text); }

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--sp-8);
  position: relative;
  z-index: 1;
}

/* Fade in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn var(--duration-slow) var(--ease) forwards; }
.fade-in-delay-1 { animation-delay: 50ms; opacity: 0; }
.fade-in-delay-2 { animation-delay: 100ms; opacity: 0; }
.fade-in-delay-3 { animation-delay: 150ms; opacity: 0; }
.fade-in-delay-4 { animation-delay: 200ms; opacity: 0; }

/* Pulse animation for status dot */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.15); }
}

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 50%, var(--surface) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}

/* Section */
.section { margin-bottom: var(--sp-12); }
.section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-4);
}

/* Visually hidden (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}