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

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-gold); }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(2.4rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }
p { font-size: 1rem; color: var(--color-text-muted); }

.text-gold { color: var(--color-gold); }
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.font-heading { font-family: var(--font-heading); }

/* ===== PAGE LOAD ANIMATION ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes checkmark {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes float {
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
@keyframes cardFlip {
  0%{transform:rotateY(0)} 100%{transform:rotateY(180deg)}
}
@keyframes cardFlipBack {
  0%{transform:rotateY(180deg)} 100%{transform:rotateY(0)}
}

.page-enter { animation: fadeIn 0.6s ease forwards; }
.animate-up { animation: fadeInUp 0.7s ease forwards; }
.animate-up-delay-1 { animation: fadeInUp 0.7s 0.1s ease both; }
.animate-up-delay-2 { animation: fadeInUp 0.7s 0.2s ease both; }
.animate-up-delay-3 { animation: fadeInUp 0.7s 0.3s ease both; }
.animate-up-delay-4 { animation: fadeInUp 0.7s 0.4s ease both; }

/* ===== SKELETON SCREENS ===== */
.skeleton {
  background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
.skeleton-card { height: 380px; border-radius: var(--radius-md); }
.skeleton-text { height: 16px; margin-bottom: 8px; }
.skeleton-text.short { width: 60%; }

/* ===== SECTION DIVIDER ===== */
.section-divider {
  width: 60px; height: 2px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  margin: var(--spacing-md) auto var(--spacing-xl);
}
.section-divider.left { margin-left: 0; }

/* ===== BREADCRUMB ===== */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--color-text-dim);
  padding: var(--spacing-md) 0;
}
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb-sep { color: var(--color-text-dim); }

/* ===== SECTION HEADER ===== */
.section-header { text-align: center; margin-bottom: var(--spacing-2xl); }
.section-header .eyebrow {
  font-family: var(--font-body); font-size: 0.75rem;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: var(--spacing-sm);
}

/* ===== FOCUS STATES ===== */
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* ===== SELECTION ===== */
::selection { background: var(--color-gold); color: var(--color-bg); }