/* ==========================================================================
   Velvet Ride — full-bleed background-video hero
   --------------------------------------------------------------------------
   Loaded from /css/hero-video.css AFTER the Webflow export stylesheets on
   /sr/, /en/ and /zh/ so it can override the exported hero rules.

   Rules:
   - Never edit the Webflow export CSS. Every hero-video change lives here.
   - Every selector is scoped under .home-hero-section so nothing leaks into
     other sections or pages.
   - Asset URLs are absolute (/videos/...) so all three locales share one copy.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Section shell — dark canvas, full-bleed stacking context
   -------------------------------------------------------------------------- */

.section.home-hero-section {
  /* Onyx underneath everything: no white flash before the poster paints. */
  background-color: var(--colors--onyx);
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 88vh;
  padding-top: 90px;
  padding-bottom: 90px;
}

/* Content rides above the video + scrim. */
.home-hero-section > .content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
}


/* --------------------------------------------------------------------------
   2. Video layer
   The wrapper carries the poster as a CSS background so brand imagery is on
   screen at first paint (good LCP) before any video bytes arrive. The <video>
   sits on top of it and simply replaces it once it starts painting frames.
   -------------------------------------------------------------------------- */

.home-hero-section .hero-video-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--colors--onyx);
  background-image: url('/videos/hero-poster-desktop.webp');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-hero-section .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border: 0;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}


/* --------------------------------------------------------------------------
   3. Readability scrim
   Onyx-tinted gradients: heaviest top-left (behind the H1) and along the
   bottom (behind the dark card), lightest mid-right so the footage stays
   visible. Sits above the video, below the content.
   -------------------------------------------------------------------------- */

.home-hero-section .hero-video-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(150deg, rgba(1, 1, 1, .72) 0%, rgba(1, 1, 1, .47) 32%, rgba(1, 1, 1, .17) 70%, rgba(1, 1, 1, .1) 100%),
    linear-gradient(0deg, rgba(1, 1, 1, .54) 0%, rgba(1, 1, 1, .1) 45%, rgba(1, 1, 1, 0) 70%),
    linear-gradient(0deg, rgba(1, 1, 1, .22), rgba(1, 1, 1, .22));
}


/* --------------------------------------------------------------------------
   4. Hero typography on dark
   -------------------------------------------------------------------------- */

.home-hero-section h1 {
  color: var(--colors--pure);
  text-shadow: 0 2px 26px rgba(1, 1, 1, .55);
}

/* Brand gold accent — amber reads far better than base gold over footage. */
.home-hero-section .accent-text {
  color: var(--colors--amber);
}

.home-hero-section .hero-text-details p {
  color: var(--colors--ivory);
  text-shadow: 0 1px 18px rgba(1, 1, 1, .6);
}

.home-hero-section .subheadline {
  color: var(--colors--pure);
  text-shadow: 0 1px 16px rgba(1, 1, 1, .6);
}

/* .subheadline-line stays brand gold — decorative rule, left untouched. */


/* --------------------------------------------------------------------------
   5. Dark CTA / booking card over the video
   -------------------------------------------------------------------------- */

.home-hero-section .hero-content-wrapper {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  background-color: rgba(1, 1, 1, .78);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 30px 70px rgba(1, 1, 1, .45);
}

@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .home-hero-section .hero-content-wrapper {
    background-color: rgba(1, 1, 1, .58);
    -webkit-backdrop-filter: blur(20px) saturate(115%);
    backdrop-filter: blur(20px) saturate(115%);
  }
}

/* Booking form goes frosted like the rest of the hero card. No own
   backdrop-filter: the parent .hero-content-wrapper already blurs on
   desktop and is near-opaque on mobile, so a translucent panel is enough
   and avoids double-blur compositing cost. */
.home-hero-section .booking-form-wrapper {
  background-color: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}

.home-hero-section .booking-form-label {
  color: rgba(255, 255, 255, .78);
}

.home-hero-section .booking-form-field {
  color: var(--colors--pure);
}

.home-hero-section .booking-form-field::placeholder {
  color: rgba(255, 255, 255, .48);
}

/* Native select popups paint their own background — keep options readable */
.home-hero-section .booking-form-field option {
  background-color: #161616;
  color: var(--colors--pure);
}

/* Onyx button disappears on the dark glass — give it an edge, and flip the
   hover (base hover goes transparent + onyx text, invisible here). */
.home-hero-section .booking-form-button {
  border-color: rgba(255, 255, 255, .28);
}

.home-hero-section .booking-form-button:hover {
  background-color: var(--colors--transparent);
  border-color: var(--colors--amber);
  color: var(--colors--pure);
}


/* --------------------------------------------------------------------------
   6. The still hero image is replaced by the video (markup kept in place)
   -------------------------------------------------------------------------- */

.home-hero-section .hero-image-wrapper {
  display: none !important;
}


/* --------------------------------------------------------------------------
   7. Tablet
   -------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {
  .section.home-hero-section {
    min-height: 86vh;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .home-hero-section .hero-container {
    grid-column-gap: 36px;
    grid-row-gap: 36px;
  }

  .home-hero-section .hero-content-wrapper {
    grid-column-gap: 22px;
    grid-row-gap: 22px;
  }
}


/* --------------------------------------------------------------------------
   8. Mobile — full-screen hero, vertical poster, lighter compositing
   -------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
  .section.home-hero-section {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .home-hero-section .hero-video-wrapper {
    background-image: url('/videos/hero-poster-mobile.webp');
  }

  /* Layout is stacked here, so the scrim reads top-to-bottom instead of
     diagonally. */
  .home-hero-section .hero-video-scrim {
    background-image:
      linear-gradient(180deg, rgba(1, 1, 1, .74) 0%, rgba(1, 1, 1, .47) 28%, rgba(1, 1, 1, .34) 55%, rgba(1, 1, 1, .64) 100%),
      linear-gradient(0deg, rgba(1, 1, 1, .2), rgba(1, 1, 1, .2));
  }

  .home-hero-section .hero-container {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  /* Blurring a full-width card on top of a playing video is expensive on
     phones — trade it for a more opaque panel. */
  .home-hero-section .hero-content-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    background-color: rgba(1, 1, 1, .86);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}


/* --------------------------------------------------------------------------
   9. Small mobile
   -------------------------------------------------------------------------- */

@media screen and (max-width: 479px) {
  .section.home-hero-section {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .home-hero-section .hero-container {
    grid-column-gap: 28px;
    grid-row-gap: 28px;
  }

  .home-hero-section .hero-content-wrapper {
    grid-column-gap: 18px;
    grid-row-gap: 18px;
  }
}


/* --------------------------------------------------------------------------
   10. Reduced motion — drop the video, keep the poster background
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .home-hero-section .hero-video {
    display: none;
  }
}