/* ==========================================================================
   Avi Katan — Luxury Barbershop
   Custom styles that go beyond what Tailwind utility classes cover.
   Colors/fonts are defined once in the tailwind.config block in index.html —
   edit them there and the whole site updates.
   Booking-wizard-specific styles live in css/booking.css.
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background-color: #111110;
}

/* Users who ask the OS for reduced motion get an instant-jump site, not a
   disabled-but-still-transitioning one. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Text selection */
::selection {
  background-color: #A9843F;
  color: #111110;
}

/* Scrollbar (Webkit browsers) */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #111110;
}
::-webkit-scrollbar-thumb {
  background-color: #3a362c;
  border-radius: 10px;
  border: 2px solid #111110;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #A9843F;
}

/* Visible keyboard focus everywhere — dark UIs hide default outlines easily */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #A9843F;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ==========================================================================
   Scroll-reveal animation
   Elements start hidden/shifted; JS (main.js) adds .is-visible when the
   element scrolls into view, which triggers this transition.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.99);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger helper — apply alongside .reveal for grouped items */
.reveal-delay-1 { transition-delay: 0.12s; }
.reveal-delay-2 { transition-delay: 0.24s; }
.reveal-delay-3 { transition-delay: 0.36s; }
.reveal-delay-4 { transition-delay: 0.48s; }

/* ==========================================================================
   Hero — background video with a graceful, always-present fallback.
   A dark radial gradient sits behind everything so the hero never looks
   "broken" before the real poster/video assets are added.
   ========================================================================== */
.hero-media {
  background: radial-gradient(ellipse at 50% 30%, #1c1b18 0%, #111110 60%, #0a0a09 100%);
}

.hero-video {
  display: block;
}

.hero-fallback-img {
  display: none;
}

/* No video support, or the browser blocked autoplay: fall back to the still image */
.no-video .hero-video {
  display: none;
}
.no-video .hero-fallback-img {
  display: block;
}

/* Reduced motion: never autoplay the video, show the still frame instead.
   main.js also pauses/removes the video element for the same users so no
   decode work happens in the background. */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  .hero-fallback-img {
    display: block;
  }
}

.hero-parallax {
  will-change: transform;
}

/* Hero light leaks — slow animated glow pulses at the hero's edges.
   Explicit reduced-motion override: the generic *, *::before, *::after rule
   above forces animation-iteration-count:1 + animation-duration:0.01ms,
   which is not a deliberate static state (it just plays one near-instant
   cycle and lands on whatever the final keyframe happens to be) — this
   override replaces the animation outright with a fixed, still-colorful
   mid-pulse look instead of relying on that side effect. */
@keyframes lightleak {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.12); }
}
.hero-light-leak {
  animation: lightleak 8s ease-in-out infinite;
}
.hero-light-leak-delay {
  animation-delay: 2.5s;
}
@media (prefers-reduced-motion: reduce) {
  .hero-light-leak {
    animation: none;
    opacity: 0.5;
    transform: scale(1.05);
  }
}

/* Hero scroll-cue indicator */
@keyframes scrollcue {
  0% { transform: translateY(0); opacity: 0.9; }
  50% { transform: translateY(8px); opacity: 0.4; }
  100% { transform: translateY(0); opacity: 0.9; }
}
.scroll-cue {
  animation: scrollcue 2.6s ease-in-out infinite;
}

/* ==========================================================================
   Nav link underline hover
   ========================================================================== */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  width: 0;
  height: 1px;
  background-color: #A9843F;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}
.nav-link.active {
  color: #A9843F;
}

/* ==========================================================================
   Ghost buttons — outlined, fills smoothly on hover
   ========================================================================== */
.btn-ghost {
  position: relative;
  overflow: hidden;
  z-index: 0;
  cursor: pointer;
  transition: color 0.5s ease, border-color 0.5s ease;
}
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #A9843F;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}
.btn-ghost:hover::before {
  transform: scaleX(1);
}
.btn-ghost:hover {
  color: #111110;
  border-color: #A9843F;
}

/* ==========================================================================
   Image hover zoom — used inside overflow-hidden frames
   ========================================================================== */
.img-zoom {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-zoom-wrap:hover .img-zoom {
  transform: scale(1.05);
}

/* ==========================================================================
   Section divider — thin brass-fade hairline at the top of a section, used
   to separate sections that don't already get strong separation from a
   photo background band.
   ========================================================================== */
.section-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(169, 132, 63, 0.5), transparent);
}

/* ==========================================================================
   Floating WhatsApp button — subtle pulse ring
   ========================================================================== */
@keyframes pulsering {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.3); }
  70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.pulse-ring {
  animation: pulsering 3s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

/* ==========================================================================
   Google Map — recolor default embed to match dark theme
   ========================================================================== */
.map-dark {
  filter: grayscale(1) invert(92%) contrast(90%);
}

/* ==========================================================================
   Lightbox modal
   ========================================================================== */
#lightbox {
  transition: opacity 0.4s ease;
}
#lightbox img {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Mobile menu panel
   ========================================================================== */
#mobile-menu {
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}