/* ============================================================
   .scrub-bg — Scroll-scrubbed background video section
   ------------------------------------------------------------
   Like harshittdev.raisemybusiness.com:
   - Video is pinned (sticky) inside its OWN section
   - Frames do NOT autoplay — they advance based on scroll progress
   - Scrolling forward plays the clip forward; scrolling back rewinds
   - Foreground text scrolls OVER it at normal speed
   - Dark overlay keeps copy legible
   - Lazy-loaded; respects prefers-reduced-motion (shows poster only)
   ============================================================ */

.scrub-bg {
  position: relative;
  width: 100%;
  /* Each section is 5 viewports tall. At 20s clip duration that's
     ~16 vh of scroll runway per second of footage — a deliberately slow,
     cinematic scrub. (Originally 240vh → 360vh → 500vh.) */
  min-height: 500vh;
  background: #0e0c0a;
  /* overflow:clip clips children (like overflow:hidden) WITHOUT creating a
     scroll container — so position:sticky descendants (.scrub-pin) still
     stick relative to the viewport. overflow:hidden would break sticky. */
  overflow: clip;
}

.scrub-bg .scrub-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: clip;
}

/* The <video>. Note: we deliberately do NOT set opacity:0 here, because
   the scrubbed clip needs to be visible at frame 0 the moment the user
   scrolls toward the section. We DO start at opacity 0 only briefly
   while the video loads, then JS toggles .is-ready. */
.scrub-bg .scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
  background: #0e0c0a;
  /* Promote the video to its own GPU layer so paint/composite stays off
     the main thread — noticeably smoother scroll-driven seeks on iOS. */
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.scrub-bg.is-ready .scrub-video { opacity: 1; }

/* Dark vignette overlay for text contrast */
.scrub-bg .scrub-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 45%,
      rgba(15, 13, 11, 0.10) 0%,
      rgba(15, 13, 11, 0.48) 60%,
      rgba(15, 13, 11, 0.78) 100%),
    linear-gradient(180deg,
      rgba(15, 13, 11, 0.35) 0%,
      rgba(15, 13, 11, 0.15) 30%,
      rgba(15, 13, 11, 0.60) 100%);
}

/* Foreground content scrolls OVER the pinned video at normal speed.
   It's pulled up by 100vh so it overlaps the sticky video, then keeps
   its full 240vh runway so it scrolls past the video naturally. */
.scrub-bg .scrub-content {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  min-height: 500vh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  padding: 0 6vw;
  color: var(--ivory, #FAF7F1);
}

.scrub-bg .scrub-intro {
  grid-row: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.scrub-bg .scrub-intro > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scrub-bg .scrub-intro > *:nth-child(1) { transition-delay:  60ms; }
.scrub-bg .scrub-intro > *:nth-child(2) { transition-delay: 220ms; }
.scrub-bg .scrub-intro > *:nth-child(3) { transition-delay: 400ms; }
.scrub-bg .scrub-intro > *:nth-child(4) { transition-delay: 560ms; }
.scrub-bg.is-active .scrub-intro > * {
  opacity: 1;
  transform: translateY(0);
}

/* Typography (uses site tokens, with fallbacks) */
.scrub-bg .scrub-eyebrow {
  font-family: var(--f-heading, 'Tenor Sans', serif);
  font-size: 11px;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: var(--bronze-soft, #DCC9AC);
}
.scrub-bg .scrub-title {
  font-family: var(--f-heading, 'Tenor Sans', serif);
  font-weight: 300;
  font-size: clamp(34px, 4.6vw, 72px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.10;
  margin: 24px auto 0;
  max-width: 18ch;
  color: var(--ivory, #FAF7F1);
}
.scrub-bg .scrub-title em {
  font-family: var(--f-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.02em;
  color: var(--bronze-soft, #DCC9AC);
  text-transform: none;
}
.scrub-bg .scrub-sub {
  font-family: var(--f-body, 'Montserrat', sans-serif);
  font-weight: 300;
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.75;
  max-width: 580px;
  margin: 30px auto 0;
  color: rgba(250, 247, 241, 0.85);
}
.scrub-bg .scrub-cta {
  display: inline-block;
  margin-top: 40px;
  padding: 16px 38px;
  font-family: var(--f-heading, 'Tenor Sans', serif);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ivory, #FAF7F1);
  text-decoration: none;
  border: 1px solid rgba(250, 247, 241, 0.6);
  background: rgba(20, 18, 16, 0.20);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 280ms ease, border-color 280ms ease, letter-spacing 280ms ease;
}
.scrub-bg .scrub-cta:hover {
  background: var(--bronze, #B8956A);
  border-color: var(--bronze, #B8956A);
  letter-spacing: 0.38em;
}

/* Loading hint while the video buffers — a tiny pulse at the bottom */
.scrub-bg .scrub-loading {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--f-heading, 'Tenor Sans', serif);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.55);
  opacity: 1;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.scrub-bg.is-ready .scrub-loading { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .scrub-bg .scrub-video {
    opacity: 1 !important;
    transition: none !important;
  }
  .scrub-bg .scrub-intro > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  /* Less runway on mobile so users don't have to thumb-flick through
     four full screens of footage, but still slow enough to feel cinematic. */
  .scrub-bg { min-height: 320vh; }
  .scrub-bg .scrub-pin { height: 92vh; }
  .scrub-bg .scrub-content { margin-top: -92vh; min-height: 320vh; }
  .scrub-bg .scrub-title { letter-spacing: 0.06em; }
}