/* ============================================================
   Merakhi & Muse — Motion variant layer (v4 / v5)
   Loaded AFTER styles.css on /v4-motion and /v5-hero only.
   Copy and layout untouched — this file only changes how
   things move and adds the grain / video / nav-CTA chrome.
   ============================================================ */

:root {
  --ease-m: cubic-bezier(0.16, 1, 0.3, 1); /* slow soft ease-out */
}

/* ---------- global film grain (very subtle, static) ---------- */
body.variant-motion::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='5'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  opacity: 0.045;
  mix-blend-mode: soft-light;
}

/* ---------- elevated scroll reveals ---------- */
body.variant-motion .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.85s var(--ease-m),
    transform 0.85s var(--ease-m);
  will-change: opacity, transform;
}
body.variant-motion .reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* neutralize the base stylesheet's offset trick for staggered gallery cards */
body.variant-motion .gallery .card:nth-child(3n+2).reveal {
  transform: translateY(calc(2.4rem + 20px));
}
body.variant-motion .gallery .card:nth-child(3n+2).reveal.in {
  transform: translateY(2.4rem);
}

/* ---------- word-by-word reveal (two hero-level statements only) ---------- */
body.variant-motion .wordsplit .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition:
    opacity 0.7s var(--ease-m),
    transform 0.7s var(--ease-m);
  transition-delay: inherit;
}
body.variant-motion .wordsplit.words-in .w {
  opacity: 1;
  transform: translateY(0);
}
/* the base fadeUp animation would fight the word reveal — disable it */
body.variant-motion .hero-line {
  animation: none;
  opacity: 1;
}

/* ---------- portfolio grid: gentle hover ---------- */
body.variant-motion .frame img {
  transition: transform 0.9s var(--ease-m), filter 0.9s var(--ease-m);
}
body.variant-motion .card:hover .frame img {
  transform: scale(1.04);
}
body.variant-motion .card figcaption {
  opacity: 0.82;
  transition: opacity 0.7s var(--ease-m);
}
body.variant-motion .card:hover figcaption {
  opacity: 1;
}

/* ---------- micro-interactions: slow gold underline on links ---------- */
body.variant-motion .nav-links a,
body.variant-motion .footer-nav a {
  border-bottom: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.6s var(--ease-m), color 0.4s;
  padding-bottom: 5px;
}
body.variant-motion .nav-links a:hover,
body.variant-motion .footer-nav a:hover {
  background-size: 100% 1px;
}
body.variant-motion .whatsapp-link {
  transition: border-color 0.6s var(--ease-m), color 0.6s var(--ease-m);
}

/* gold fill sweep on primary CTA */
body.variant-motion .btn-gold {
  position: relative;
  overflow: hidden;
  transition: color 0.6s var(--ease-m), letter-spacing 0.6s var(--ease-m);
  z-index: 0;
}
body.variant-motion .btn-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-m);
  z-index: -1;
}
body.variant-motion .btn-gold:hover::before,
body.variant-motion .btn-gold:focus-visible::before {
  transform: scaleX(1);
}
body.variant-motion .btn-gold:hover,
body.variant-motion .btn-gold:focus-visible {
  background: transparent;
  color: var(--oxblood);
}

/* ---------- persistent nav CTA ---------- */
.nav-cta {
  font-family: var(--serif-caps);
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-light);
  border: 1px solid rgba(201, 168, 106, 0.6);
  padding: 0.6rem 1.3rem 0.5rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.6s var(--ease-m), transform 0.6s var(--ease-m),
    background 0.5s, color 0.5s;
}
.nav.is-solid .nav-cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-cta:hover { background: var(--gold); color: var(--oxblood); }
@media (max-width: 680px) { .nav-cta { display: none; } }

/* ---------- calm success state ---------- */
body.variant-motion .form-success {
  animation: successBreath 1.4s var(--ease-m);
}
@keyframes successBreath {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- V5: hero video layer ---------- */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1; /* above hero-bg layers, below .hero-overlay (bumped below) */
  overflow: hidden;
}
.hero-video video,
.hero-video .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* warm, slightly desaturated grade so any footage reads as one brand */
  filter: saturate(0.72) sepia(0.14) brightness(0.9) contrast(1.04);
}
.hero-video video {
  opacity: 0;
  transition: opacity 1.4s var(--ease-m);
}
.hero-video video.is-playing { opacity: 1; }
.hero-video .video-poster { background-size: cover; background-position: center; }
/* dark warm scrim so headline + CTA stay fully legible */
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(44, 8, 12, 0.55) 0%, rgba(61, 12, 17, 0.35) 45%, rgba(44, 8, 12, 0.72) 100%);
}
body.variant-video .hero-overlay { z-index: 1; background: rgba(61, 12, 17, 0.28); }
body.variant-video .hero-content { z-index: 2; }
/* video replaces the 3 bg modes — keep only the variant links in the pill */
body.variant-video .hero-toggle button,
body.variant-video .hero-toggle span:not(.vsep),
body.variant-video .hero-toggle .vdiv { display: none; }

/* ---------- mobile: lighter motion ---------- */
@media (max-width: 680px) {
  body.variant-motion .reveal { transform: translateY(12px); transition-duration: 0.65s; }
  body.variant-motion .wordsplit .w { transition-duration: 0.55s; }
}

/* ---------- reduced motion: static, dignified ---------- */
@media (prefers-reduced-motion: reduce) {
  body.variant-motion .reveal,
  body.variant-motion .wordsplit .w {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.variant-motion .btn-gold::before { transition: none; }
  body.variant-motion .frame img { transition: none; }
  .hero-video video { display: none; }
  body.variant-motion .form-success { animation: none; }
}