html { scroll-behavior: smooth; }
body { background: #0a0a0a; }

/* Entrance animations */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes revealImg {
  from { opacity: 0; transform: scale(1.08) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.anim-rise { opacity: 0; animation: riseIn 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
.anim-img { opacity: 0; animation: revealImg 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.anim-line { transform-origin: left; transform: scaleX(0); animation: lineGrow 1s ease-out 0.4s forwards; }
.d1 { animation-delay: .15s; }
.d2 { animation-delay: .3s; }
.d3 { animation-delay: .45s; }
.d4 { animation-delay: .6s; }
.d5 { animation-delay: .75s; }

/* Image hover */
.frame img, .frame .ph { transition: transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease; }
.frame:hover img, .frame:hover .ph { transform: scale(1.05); }

/* Marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 22s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim-rise, .anim-img, .anim-line { animation: none; opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}

/* ===================== MOBILE HERO CAROUSEL ===================== */
/* svh keeps full height correct on mobile browsers with dynamic toolbars */
#mobileHero { background: #0a0a0a; }

/* Horizontal sliding track: moves by -100% per slide */
.slides-track {
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.slide img {
  backface-visibility: hidden; /* smoother compositing on mobile */
  transform: scale(1.05);
}

/* Slow zoom/drift on whichever slide is currently in view */
@keyframes kenburns {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.14) translate(-1.5%, -1.5%); }
}
.slide.is-current img {
  animation: kenburns 8s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .slides-track { transition: transform 0.3s ease; }
  .slide.is-current img { animation: none; transform: scale(1.05); }
}

/* ===================== TAP HINT ARROW ===================== */
.tap-hint-arrow { animation: hintNudge 1.6s ease-in-out infinite; }
@keyframes hintNudge {
  0%, 100% { transform: translateX(0); opacity: 0.85; }
  50%      { transform: translateX(5px); opacity: 1; }
}
#tapHint {
  transition: opacity 0.5s ease;
}
#tapHint.is-hidden { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .tap-hint-arrow { animation: none; }
}

/* ===================== MOBILE DRAWER MENU ===================== */
#mobileMenu.is-open { transform: translateX(0); }
#menuBackdrop.is-open { opacity: 1; pointer-events: auto; }

/* Tap hint zones for the carousel (invisible, just for cursor/UX clarity) */
#mobileHero .tap-zone { -webkit-tap-highlight-color: transparent; }

/* ===================== THE BARBER ===================== */
/* Mirror frame: a second hairline inside the first, like a bevelled edge */
.mirror-frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(245, 245, 243, 0.10);
  pointer-events: none;
  z-index: 2;
}

/* Slow glare drifting across the glass — the signature detail */
.mirror-glare {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(245, 245, 243, 0.06) 46%,
    rgba(245, 245, 243, 0.14) 50%,
    rgba(245, 245, 243, 0.06) 54%,
    transparent 65%
  );
  transform: translateX(-120%);
  animation: glare 9s ease-in-out infinite;
}
@keyframes glare {
  0%, 55%  { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* Scroll reveal for the barber section */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* stagger the text a beat behind the portrait */
.reveal + .reveal.is-visible { transition-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .mirror-glare { animation: none; opacity: 0; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===================== ABOUT / MAP ===================== */
/* Force the Google Map into the site's black-and-white palette.
   Google's embed is full-colour by default; invert + grayscale gives a
   dark map that matches the rest of the page. */
.map-frame iframe {
  filter: grayscale(1) invert(0.92) contrast(0.9);
  border: 0;
}
/* Undo the invert on hover so the map reads normally when someone
   actually wants to use it. */
.map-frame:hover iframe {
  filter: grayscale(0.2) invert(0) contrast(1);
}
.map-frame iframe {
  transition: filter 0.5s ease;
}

/* ===================== SERVICES ===================== */
/* Subtle lift on each price row so the menu feels scannable, not static */
.menu-row {
  transition: background-color 0.3s ease, padding-left 0.3s ease;
}
.menu-row:hover {
  background-color: rgba(245, 245, 243, 0.02);
}
@media (min-width: 640px) {
  .menu-row:hover { padding-left: 0.75rem; }
}

/* Icons are the emphasis — they lift on hover */
.menu-icon { transition: transform 0.4s ease; }
.menu-row:hover .menu-icon {
  transform: translateY(-3px) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .menu-row { transition: none; }
  .menu-row:hover { padding-left: 0; }
  .menu-icon { transition: none; }
  .menu-row:hover .menu-icon { transform: none; }
}

/* ===================== GALLERY ===================== */
/* Before/after wipe.
   The .ba-before container is clipped by width, but the image inside must stay
   at the FULL stage width, or it would squash as you drag. A container query
   unit (cqw) pins the image to the stage's width, so only the reveal changes. */
.ba-stage {
  --ba: 50%;
  container-type: inline-size;
}

.ba-before {
  width: var(--ba);
}
.ba-before img {
  width: 100cqw;   /* = full width of .ba-stage, not of the clipped wrapper */
  max-width: none;
}

.ba-handle { left: var(--ba); }

/* handle grows slightly while dragging */
.ba-handle span { transition: transform 0.2s ease; }
.ba-stage.is-dragging .ba-handle span { transform: translate(-50%, -50%) scale(1.08); }

/* ---- Video ---- */
.video-frame video { display: block; }
#montageIcon.is-hidden { opacity: 0; }

/* ===================== GALLERY PAGE ===================== */
.gal-item img {
  transition: transform 0.7s cubic-bezier(.2,.7,.2,1), filter 0.5s ease;
}
.gal-item:hover img {
  transform: scale(1.06);
  filter: grayscale(1) brightness(1.1);
}

/* Lightbox image gets a gentle entrance each time it changes */
#lbImage {
  animation: lbIn 0.35s ease-out;
}
@keyframes lbIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .gal-item img { transition: none; }
  .gal-item:hover img { transform: none; }
  #lbImage { animation: none; }
}

/* ===================== DEVELOPER CREDIT ===================== */
/* The logo is a soft light gray (#d9d9d9) — no colour filter needed.
   Its size and opacity are handled by utility classes in the markup. */