/* animations.css — Sandro's Barber Lounge cinematic motion system
   Vanilla CSS. Respects prefers-reduced-motion. */

/* ── Scroll reveals ─────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children: add .reveal-stagger to a parent */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.reveal-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.reveal-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.reveal-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.reveal-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.reveal-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.reveal-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.reveal-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* Variants */
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-left.reveal-visible, .reveal-right.reveal-visible { transform: translateX(0); }
.reveal-scale { transform: scale(0.94); }
.reveal-scale.reveal-visible { transform: scale(1); }

/* ── Homepage hero video (real footage reel) ────────────────────── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;               /* hidden until playback confirmed (JS adds .video-active) */
  transition: opacity 1.2s ease;
  filter: brightness(0.55) contrast(1.05) saturate(0.9); /* cinematic darken for text */
}
.hero.video-active .hero-video { opacity: 1; }
.hero.video-active .hero-bg { display: none; } /* no city/video double exposure */
.hero.video-active .hero-overlay {
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.25) 45%,
      rgba(0, 0, 0, 0.65) 100%);
}

/* ── Cinematic hero ─────────────────────────────────────────────── */
.hero-cinematic {
  position: relative;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Ken Burns fallback when video can't play (also used for the poster image) */
.hero-kenburns {
  animation: kenburns 24s ease-in-out infinite alternate;
}
@keyframes kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
/* Dark gradient so text stays readable over the footage */
.hero-cinematic::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.78) 100%);
  pointer-events: none;
}
.hero-cinematic > .hero-content,
.hero-cinematic > *:not(.hero-media):not(video) {
  position: relative;
  z-index: 2;
}

/* ── Micro-interactions ─────────────────────────────────────────── */
.btn-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.btn-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
.btn-lift:active { transform: translateY(0) scale(0.98); }

.card-hover {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}
.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

/* Gold underline sweep for links / nav */
.link-sweep { position: relative; }
.link-sweep::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-sweep:hover::after { transform: scaleX(1); transform-origin: left; }

/* Subtle shimmer for premium headings (use sparingly) */
.shimmer-gold {
  background: linear-gradient(100deg, #caa25a 20%, #f4e3bc 40%, #caa25a 60%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% center; } }

/* ── Catalog / portfolio photo treatment ────────────────────────── */
.portfolio-item {
  overflow: hidden;
  border-radius: 6px;
  position: relative;
}
.portfolio-item img {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
  will-change: transform;
  display: block;
}
.portfolio-item:hover img {
  transform: scale(1.07);
  filter: brightness(1.08) contrast(1.05);
}
.portfolio-item::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(206, 179, 121, 0);
  border-radius: 6px;
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
  pointer-events: none;
}
.portfolio-item:hover::after {
  border-color: rgba(206, 179, 121, 0.65);
  box-shadow: inset 0 -60px 60px -30px rgba(0, 0, 0, 0.45);
}

/* ── Accessibility: kill motion for users who ask for it ───────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-kenburns, .shimmer-gold { animation: none !important; }
  .btn-lift, .card-hover, .link-sweep::after { transition: none !important; }
}