/**
 * Scroll-Scrub Hero
 * Apple-style video scrub — 300vh outer wrapper, 100vh sticky pin
 */

/* =========================================
   Outer wrapper — gives scroll distance
   ========================================= */

.scrub-hero {
  position: relative;
  height: 300vh;
}

/* =========================================
   Sticky pin — stays in view for 300vh
   ========================================= */

.scrub-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* =========================================
   Video background
   ========================================= */

.scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  will-change: transform;
  transform: translateZ(0);
}

/* =========================================
   Reduced-motion fallback (static end-frame)
   ========================================= */

.scrub-fallback {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scrub-video {
    display: none;
  }
  .scrub-fallback {
    display: block;
  }
  .scrub-scroll-hint {
    display: none;
  }
}

/* =========================================
   Gradient overlays — subtle, preserves car visibility
   ========================================= */

.scrub-sticky::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.05) 40%,
    rgba(0, 0, 0, 0.05) 65%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.scrub-sticky::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* =========================================
   UI overlay — welcome text top, CTAs bottom,
   both centered, car fully visible between them
   ========================================= */

.scrub-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* top pad = sky zone above car roof (~22% from top)    */
  /* bottom pad = tarmac zone below car body (~14% from bottom) */
  padding: 14vh var(--container-padding) 14vh;
  pointer-events: none;
}

.scrub-ui a {
  pointer-events: auto;
}

/* Welcome text — two-tier treatment */
.scrub-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

/* Thin red rule above the eyebrow */
.scrub-welcome::before {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--color-brand);
  margin-bottom: 10px;
}

.scrub-welcome-eyebrow {
  display: block;
  font-size: clamp(10px, 0.85vw, 13px);
  font-weight: var(--font-regular);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.scrub-welcome-brand {
  display: block;
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: var(--font-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Location word in brand red */
.scrub-welcome-location {
  color: var(--color-brand);
}

/* CTA row */
.scrub-cta-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 768px) {
  /* On portrait mobile, shift the crop to the front of the car (right side of
     the frame) so the headlights fill the screen instead of dead centre. */
  .scrub-video,
  .scrub-fallback {
    object-fit: cover;
    object-position: 91% center;
  }

  .scrub-ui {
    padding: 11vh var(--container-padding) 12vh;
  }

  .scrub-cta-row {
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 280px;
  }

  .scrub-cta-row .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* =========================================
   Scroll chevron hint
   ========================================= */

.scrub-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.65);
  animation: scrubChevron 2.2s ease-in-out infinite;
  line-height: 1;
}

@keyframes scrubChevron {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.5;
  }
  50% {
    transform: translateX(-50%) translateY(8px);
    opacity: 1;
  }
}