/* ── Base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ── Buttons ─────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  background: #d94a24;
  color: #fff;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.3s, transform 0.2s, box-shadow 0.3s;
  box-shadow: 0 4px 14px rgba(217, 74, 36, 0.3);
}
.btn-primary:hover {
  background: #c43518;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(217, 74, 36, 0.4);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: #d94a24;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  font-size: 0.9375rem;
  text-decoration: none;
  border: 2px solid #d94a24;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}
.btn-secondary:hover {
  background: #d94a24;
  color: #fff;
  transform: translateY(-2px);
}

/* ── Nav ─────────────────────────────────────────── */
#site-header {
  background: rgba(254, 252, 248, 0);
  backdrop-filter: blur(0px);
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
#site-header.scrolled {
  background: rgba(254, 252, 248, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

/* ── Marquee ─────────────────────────────────────── */
.marquee-track {
  animation: marquee 30s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Float animations ────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes float-delayed {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.animate-float    { animation: float 4s ease-in-out infinite; }
.animate-float-delayed { animation: float-delayed 5s ease-in-out infinite 1s; }

/* ── Scroll reveal ───────────────────────────────── */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up   { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Hero animations ─────────────────────────────── */
.hero-left  { animation: heroSlideIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-right { animation: heroSlideIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }

@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Mobile menu ─────────────────────────────────── */
.mobile-link { transition: opacity 0.3s; }
#mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}
#mobile-menu.closed {
  opacity: 0;
  pointer-events: none;
}

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .reveal-up, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
  }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 640px) {
  .font-display { font-size: clamp(2rem, 8vw, 3rem); }
}