/* The Velvet Chair — Salon & Barbershop
   Design thesis: "A salon that feels like walking through a frosted glass door
   into a warm, well-lit room where someone already knows your name."
   Fonts: Cormorant Garamond (display) + Outfit (body)
   Palette: sage green + warm copper
*/

:root {
  --brand:       #4E6153;
  --brand-dark:  #3D4E42;
  --brand-light: #6A8274;
  --accent:      #C4956A;
  --accent-dark: #A87B52;
  --paper:       #FAF9F7;
  --ink:         #1A1F1C;
  --muted:       #7D857F;
  --line:        #DDE0DB;
  --surface:     #EFF2ED;
}

html { scroll-behavior: smooth; }

::selection {
  background-color: var(--brand);
  color: var(--paper);
}

body {
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
}

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal-delay="4"] { transition-delay: 320ms; }

/* CSS fallback: if JS fails, reveal after 2s */
@keyframes reveal-fallback {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-reveal]:not(.revealed) {
    animation: reveal-fallback 0.6s ease 2s forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}

/* Mobile menu */
.mobile-menu {
  display: none;
}
.mobile-menu.open {
  display: block;
}

/* Section label — thin sage line + uppercase */
.section-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand);
}

/* Service card hover */
.service-card {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.service-card:hover {
  box-shadow: 0 4px 20px rgba(78, 97, 83, 0.08);
  transform: translateY(-2px);
}

/* Review card */
.review-card {
  border-left: 3px solid var(--accent);
}

/* Print */
@media print {
  header, footer, nav, .mobile-menu, button { display: none !important; }
  body { background: white; color: black; }
}