/* ── Phatt Music Co. — Dealers page ─────────────────────────────────────────
   Styles specific to /dealers/. Relies on css/site.css for the global reset,
   --font custom property, and .page-canvas layout class.

   Animation timing is controlled by CSS custom properties at the top —
   adjust those values to retune all entrance animations at once.              */

/* ── Animation tokens ────────────────────────────────────────────────────── */
:root {
  --anim-duration:       0.4s;
  --anim-easing:         cubic-bezier(0.2, 0, 0, 1.1);
  --anim-slide-dist:     150px;
  --anim-delay-title:    0.05s;
  --anim-delay-subtitle: 0.10s;
  --anim-delay-block-0:  0.15s;   /* first state block  */
  --anim-delay-block-1:  0.22s;   /* second state block */
  /* To add more blocks: add --anim-delay-block-N and set it on the element
     via style="animation-delay: var(--anim-delay-block-N)"                  */
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(calc(-1 * var(--anim-slide-dist))); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(var(--anim-slide-dist)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Page heading ────────────────────────────────────────────────────────── */
.dealers-title {
  font-family:    var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:      clamp(42px, 6.8vw, 82px);
  font-weight:    700;
  color:          #fff;
  line-height:    1;
  letter-spacing: -0.02em;
  margin:         0 0 40px;

  opacity:   0;
  transform: translateX(calc(-1 * var(--anim-slide-dist)));
  animation: slideInLeft var(--anim-duration) var(--anim-easing) var(--anim-delay-title) forwards;
}

/* ── Intro subtitle ──────────────────────────────────────────────────────── */
.dealers-subtitle {
  font-family: var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:   clamp(16px, 1.7vw, 24px);
  font-weight: 600;
  color:       #fff;
  line-height: 1.4;
  max-width:   474px;
  margin:      0 0 64px;

  opacity:   0;
  transform: translateX(var(--anim-slide-dist));
  animation: slideInRight var(--anim-duration) var(--anim-easing) var(--anim-delay-subtitle) forwards;
}

/* ── State block (one per state/region) ──────────────────────────────────── */
.state-block {
  max-width:     400px;
  margin-bottom: 56px;
  opacity:       0;
  transform:     translateX(var(--anim-slide-dist));
  /* Animation delay is set inline per block via style="animation-delay: var(--anim-delay-block-N)"
     so adding a new block requires only one new CSS variable above.           */
  animation:     slideInRight var(--anim-duration) var(--anim-easing) both;
}

.state-heading {
  font-family:  var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:    clamp(28px, 2.7vw, 39px);
  font-weight:  700;
  color:        #fff;
  margin:       0 0 10px;
}

.state-rule {
  border:     none;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin:     0 0 24px;
  max-width:  320px;
}

/* ── Dealer card ─────────────────────────────────────────────────────────── */
.dealer-name {
  font-family:  var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:    clamp(17px, 1.7vw, 24px);
  font-weight:  700;
  color:        #fff;
  margin:       0 0 6px;
}

.dealer-detail {
  font-family: var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:   clamp(14px, 1.4vw, 20px);
  font-weight: 400;
  color:       rgb(145, 145, 145);
  margin:      0 0 4px;
}

.dealer-link {
  font-family:     var(--font, 'Neue Haas Grotesk', sans-serif);
  font-size:       clamp(14px, 1.4vw, 20px);
  font-weight:     400;
  color:           #fff;
  text-decoration: none;
  display:         block;
  margin-top:      4px;
  transition:      opacity 0.15s;
}
.dealer-link:hover { opacity: 0.7; }

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .state-rule { max-width: 100%; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dealers-title,
  .dealers-subtitle,
  .state-block {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}