/* Ignite Beauty & Luxury Salon — custom styles */

:root {
  --a11y-bottom: 72px; /* push a11y FAB above sticky mobile CTA */
}

/* ── Marquee ticker ──────────────────────────────────────── */
.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-content {
  display: inline-block;
  padding-right: 0;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-track {
    animation: marquee-scroll 28s linear infinite;
  }
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}

/* ── Hero fade-in ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-content {
    animation: hero-fade 0.8s ease-out both;
  }
  @keyframes hero-fade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* SVG slow radiate pulse */
  .svg-radiate {
    animation: radiate-pulse 8s ease-in-out infinite alternate;
    transform-origin: center;
  }
  @keyframes radiate-pulse {
    from { opacity: 0.7; }
    to   { opacity: 1; }
  }
}

/* ── Service card hover ──────────────────────────────────── */
.service-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(107, 46, 110, 0.12);
}

/* ── Sticky CTA safe-area bottom ────────────────────────── */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Smooth scroll ───────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── Focus ring override for brand ──────────────────────── */
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #C49A3C;
  outline-offset: 2px;
}