/* ===========================================================
   ANAX BARBER — custom styles (Tailwind handles the rest)
   Palette: near-black charcoal base + warm champagne gold
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --gold: #D9B65A;
  --gold-bright: #E8CF8B;
  --ink: #0A0A0B;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background-color: var(--ink);
  /* soft gold + charcoal glows so transparent sections melt together */
  background-image:
    radial-gradient(1100px 700px at 50% 0%, rgba(217,182,90,0.06), transparent 60%),
    radial-gradient(900px 600px at 90% 100%, rgba(217,182,90,0.05), transparent 55%);
  background-repeat: no-repeat;
}

.font-display  { font-family: 'Cinzel', serif; }        /* wordmark / hero */
.font-heading  { font-family: 'Playfair Display', serif; } /* section titles */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;   /* stable on mobile — no iOS URL-bar jump */
}
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* ---------- Navbar scroll state ---------- */
#navbar { transition: background-color .4s ease, backdrop-filter .4s ease, border-color .4s ease; }

/* ---------- Cards ---------- */
.service-card { transition: all .3s cubic-bezier(.4,0,.2,1); }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 30px -12px rgba(0,0,0,.6); border-color: rgba(217,182,90,.45); }

/* ---------- Testimonials marquee ---------- */
.testimonial-marquee { -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.testimonial-track { display: flex; gap: 1.5rem; width: max-content; padding: .5rem .75rem; animation: testimonial-scroll 48s linear infinite; }
.testimonial-marquee:hover .testimonial-track { animation-play-state: paused; }
.testimonial-card { transition: transform .3s ease, border-color .3s ease; }
.testimonial-card:hover { transform: translateY(-6px); border-color: rgba(217,182,90,.5); }
@keyframes testimonial-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.reveal.reveal-in { opacity: 1; transform: none; }

/* ---------- Mobile snap carousel -> desktop grid ---------- */
.h-scroll {
  display: flex; gap: 1rem; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scroll-padding-left: 1.5rem; padding: .25rem 1.5rem 1rem; margin: 0 -1.5rem;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: center; }
.h-scroll > .snap-card { flex: 0 0 82%; max-width: 82%; }
@media (min-width: 640px) { .h-scroll > .snap-card { flex-basis: 47%; max-width: 47%; } }
@media (min-width: 768px) { .h-scroll > .snap-card { flex: 1 1 auto; max-width: none; } }
@media (min-width: 768px) { .h-scroll { display: grid; overflow: visible; margin: 0; padding: 0; } }

/* Carousel dots */
.dots { display: flex; gap: .45rem; justify-content: center; margin-top: 1.25rem; }
.dots button { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,.22); transition: all .35s cubic-bezier(.4,0,.2,1); }
.dots button.active { width: 24px; background: var(--gold); }
@media (min-width: 768px) { .dots { display: none; } }

/* Swipe hint */
@keyframes swipe-nudge { 0%,100% { transform: translateX(0); opacity:.75; } 50% { transform: translateX(7px); opacity:1; } }
.swipe-hint i { animation: swipe-nudge 1.5s ease-in-out infinite; }

/* Touch feedback */
.tap-scale { transition: transform .2s cubic-bezier(.4,0,.2,1); }
.tap-scale:active { transform: scale(.97); }

/* Staggered reveal */
.reveal-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1); }
.reveal-stagger.reveal-in > * { opacity: 1; transform: none; }
.reveal-stagger.reveal-in > *:nth-child(1){transition-delay:.04s}
.reveal-stagger.reveal-in > *:nth-child(2){transition-delay:.11s}
.reveal-stagger.reveal-in > *:nth-child(3){transition-delay:.18s}
.reveal-stagger.reveal-in > *:nth-child(4){transition-delay:.25s}
.reveal-stagger.reveal-in > *:nth-child(5){transition-delay:.32s}
.reveal-stagger.reveal-in > *:nth-child(6){transition-delay:.39s}
.reveal-stagger.reveal-in > *:nth-child(7){transition-delay:.46s}

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  .testimonial-track { animation: none; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  .swipe-hint i { animation: none; }
  html { scroll-behavior: auto; }
}