/* ==========================================================================
   Base — global resets, scrollbar, typography scale, motion primitives
   ========================================================================== */

::selection {
  background: #F8F8F6;
  color: #1A1A1A;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #1A1A1A;
}

::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #666;
}

/* Scroll-triggered section reveals */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.15s; }
.reveal-d2 { transition-delay: 0.3s; }
.reveal-d3 { transition-delay: 0.45s; }
.reveal-d4 { transition-delay: 0.6s; }
.reveal-d5 { transition-delay: 0.75s; }
.reveal-d6 { transition-delay: 0.9s; }

/* Hero headline line reveals */
.rl {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rl.active {
  opacity: 1;
  transform: translateY(0);
}

.rl-0 { transition-delay: 0.05s; }
.rl-1 { transition-delay: 0.35s; }
.rl-2 { transition-delay: 1.3s; }
.rl-3 { transition-delay: 2.5s; }

/* Shared animations */
.scroll-ind {
  animation: scrollBounce 2.5s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(8px); opacity: 0.7; }
}

.pulse-r {
  animation: pulseRing 3s ease-in-out infinite;
}

@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.15); opacity: 0.06; }
}

/* Typography */
.slabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #9A9A9A;
}

.sh {
  font-family: 'Playfair Display', serif;
}

.sh-1 {
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.sh-2 {
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.sh-3 {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.body {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: #6B6B6B;
}

@media (min-width: 768px) {
  .body {
    font-size: 16px;
    line-height: 1.8;
  }
}

.body-sm {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: #6B6B6B;
}

.body-xs {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
}