/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

   .hero {
    position: relative;
  
    display: flex;
    align-items: flex-start;
  
    width: 100%;
  
    aspect-ratio: 1635 / 940;
  
    overflow: hidden;
  
    /*
     * Fallback. The split background for ultra-wide
     * screens is introduced below.
     */
    background-color: var(--color-dark);
  
    padding-inline: var(--container-pad);
  
    padding-top: clamp(
      var(--space-7),
      7vw,
      var(--space-8)
    );
  }
  
  
  /*
   * Artwork layer
   */
  .hero::before {
    content: "";
  
    position: absolute;
    inset: 0;
  
    background-image:
      url("../../assets/images/ui/intro-background.jpg");
  
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
  
    pointer-events: none;
  }


/* --------------------------------------------------------------------------
   CONTENT
   -------------------------------------------------------------------------- */

.hero__content {
  position: relative;
  z-index: var(--z-base);

  width: min(100%, 620px);

  /*
   * Slightly lift the content visually.
   * The illustration carries more visual weight on the right.
   */
  transform: translateY(calc(var(--space-2) * -1));
}


/* --------------------------------------------------------------------------
   EYEBROW
   -------------------------------------------------------------------------- */

.hero__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: var(--space-2);

  margin: 0 0 var(--space-3);

  color: var(--color-text-muted);

  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);

  line-height: var(--line-height-snug);
  letter-spacing: var(--letter-spacing-wide);

  text-transform: uppercase;
}

.hero__eyebrow-separator {
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}


/* --------------------------------------------------------------------------
   TITLE
   -------------------------------------------------------------------------- */

.hero__title {
  display: flex;
  flex-direction: column;

  width: max-content;
  max-width: 100%;

  margin: 0 0 var(--space-4);

  font-size: clamp(var(--space-5), 5.2vw, var(--space-6));
  font-weight: var(--font-weight-bold);

  line-height: 0.98;
  letter-spacing: var(--letter-spacing-tight);

  color: var(--color-text);
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  color: var(--color-accent);
}


/* --------------------------------------------------------------------------
   DESCRIPTION
   -------------------------------------------------------------------------- */

.hero__subtitle {
  max-width: var(--container-narrow);

  margin: 0 0 var(--space-4);

  color: var(--color-text-muted);

  font-size: var(--font-size-md);
  line-height: var(--line-height-loose);

  text-wrap: balance;
}


/* --------------------------------------------------------------------------
   ACTIONS
   -------------------------------------------------------------------------- */

.hero__actions {
  display: flex;
  flex-wrap: wrap;

  gap: var(--space-2);
}

.hero__actions .button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-3);

  min-height: var(--space-5);
  padding-inline: var(--space-3);

  font-weight: var(--font-weight-bold);
}

.hero__actions .button span {
  transition: transform var(--duration-2) var(--ease-standard);
}

.hero__actions .button:hover span {
  transform: translateX(5px);
}

/* ==========================================================================
   NATIVE HERO CANVAS

   Above 1635px:
   - artwork stops growing
   - artwork stays centered
   - content stays inside the same 1635px canvas
   - left overflow becomes #050912
   - right overflow becomes #FAFBFD
   ========================================================================== */

@media (min-width: 102.1875rem) { /* 1635px */

  .hero {
    /*
      * Stop following the viewport aspect ratio.
      */
    aspect-ratio: auto;

    width: 100%;
    height: 941px;
    min-height: 941px;

    /*
      * 50/50 split exactly through the center of the viewport.
      *
      * Because the 1635px artwork itself is centered, its left edge
      * lands in the dark half and its right edge in the light half.
      */
    background:
      linear-gradient(
        to right,
        #050912 0%,
        #050912 50%,
        #fafbfd 50%,
        #fafbfd 100%
      );

    /*
      * Content starts from the left edge of the centered
      * 1635px artwork + the normal inner spacing.
      */
    padding-left:
      calc(
        (100vw - 1635px) / 2
        + var(--container-pad)
      );

    padding-right:
      calc(
        (100vw - 1635px) / 2
        + var(--container-pad)
      );

    /*
      * Fixed because the canvas no longer scales.
      */
    padding-top: var(--space-8);
  }


  /* ------------------------------------------------------------------------
      FIXED ARTWORK
      ------------------------------------------------------------------------ */

  .hero::before {
    /*
      * Native artwork size.
      */
    width: 1635px;
    height: 941px;

    inset: 0 auto auto 50%;

    transform: translateX(-50%);

    background-size: 1635px 941px;
    background-position: center top;

    box-shadow:
      -34px 0 55px -34px
        rgba(5, 9, 18, 0.45),

      34px 0 55px -34px
        rgba(8, 13, 20, 0.16);
  }

  .hero::before {
    width: 1635px;
    height: 941px;

    inset: 0 auto auto 50%;

    transform: translateX(-50%);

    background-image:
      url("../../assets/images/ui/intro-background.jpg");

    background-size: 1635px 941px;
    background-position: left top;
    background-repeat: no-repeat;

    box-shadow: none;
  }


  /*
   * Right-side continuation.
   *
   * Starts EXACTLY where the centered 1635px artwork ends.
   */
  .hero::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 0;

    /*
     * Center of viewport + half of the fixed artwork.
     * This is the exact right edge of intro-background.jpg.
     */
    left: calc(50% + 817px);

    /*
     * Fill everything from that point to the
     * right edge of the viewport.
     */
    right: 0;

    height: 941px;

    background-image:
      url("../../assets/images/ui/intro-background-right.jpg");

    background-repeat: no-repeat;

    /*
     * Critical:
     * always anchor the continuation image at its LEFT edge.
     */
    background-position: left top;

    background-size: auto 941px;

    pointer-events: none;
  }
  
  
  /* ------------------------------------------------------------------------
      CONTENT
      ------------------------------------------------------------------------ */

  .hero__content {
    /*
      * Stop scaling the copy with viewport width as well.
      */
    width: 620px;

    transform: translateY(
      calc(var(--space-2) * -1)
    );
  }


  .hero__eyebrow {
    font-size: var(--font-size-xs);
  }


  .hero__title {
    /*
      * Fixed visual scale matching the native artwork.
      */
    font-size: var(--space-6);
  }


  .hero__subtitle {
    max-width: var(--container-narrow);
  }

}

@media (max-width: 89rem) {
  .hero__subtitle {
    max-width: var(--space-9);
  }
}

/* --------------------------------------------------------------------------
   MEDIUM DESKTOP / LAPTOP
   -------------------------------------------------------------------------- */

@media (max-width: 75rem) {
  .hero {
    /*
     * This breakpoint is important.
     *
     * At narrower desktop widths we preserve the image ratio but move
     * its focal point slightly right so the illustration doesn't fight
     * with the copy.
     */
    min-height: 650px;

    background-size: cover;
    background-position: 56% top;

    padding-top: clamp(var(--space-6), 6.2vw, var(--space-7));
  }

  .hero__content {
    width: min(48vw, 550px);
  }

  .hero__title {
    font-size: clamp(var(--space-5), 6vw, 72px);
  }

  .hero__subtitle {
    max-width: 29rem;
  }
}


/* --------------------------------------------------------------------------
   TABLET
   -------------------------------------------------------------------------- */

@media (max-width: 62rem) {
  .hero__content {
    width: min(50vw, 480px);
  }

  .hero__title {
    font-size: clamp(46px, 6vw, 61px);
  }

  .hero__subtitle {
    max-width: var(--space-9);
    font-size: var(--font-size-base);
  }
}

@media (max-width: 53.5rem) {
  .hero__subtitle {
    max-width: var(--space-8);
  }
}


@media (min-width: 47.9375rem) and (max-width: 71.875rem) { /* 768px – 1150px */

  .hero {
    /*
     * Hero and artwork now have exactly the same height.
     */
    height: 620px;
    min-height: 620px;
    aspect-ratio: auto;
  }

  .hero::before {
    width: auto;
    height: 620px;

    inset: 0;

    background-size: auto 620px;
    background-repeat: no-repeat;

    /*
     * Shift the oversized artwork horizontally so that
     * both the copy area and illustration remain visible.
     */
    background-position: 48% top;
  }

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 47.9375rem) {
  .hero {
    --hero-mobile-offset: var(--space-7); /* 144px */

    display: flex;
    align-items: flex-start;

    width: 100%;

    /*
     * No aspect ratio on the parent.
     * Its height is:
     *
     * top offset
     * +
     * exact rendered height of the 1159 / 1358 artwork
     */
    height: calc(
      var(--hero-mobile-offset)
      + (100vw * 1358 / 1159)
    );

    min-height: 0;
    aspect-ratio: auto;

    padding:
      var(--space-6)
      var(--container-pad)
      0;

      background: linear-gradient(
        90deg,
        #0B1727 0%,
        #0F2034 50%,
        #0B182B 100%
      );
  }


  .hero::before {
    /*
     * Artwork begins lower down.
     */
    inset:
      var(--hero-mobile-offset)
      0
      auto;

    width: 100%;

    /*
     * Exact image height based on its original ratio.
     */
    height: calc(100vw * 1358 / 1159);

    background-image:
      url("../../assets/images/ui/intro-background-mobile.jpg");

    background-size: 100% 100%;
    background-position: center top;
    background-repeat: no-repeat;
  }


  .hero__content {
    width: 100%;
    transform: none;
  }


  .hero__eyebrow {
    margin-bottom: var(--space-3);

    font-size: 11px;
    gap: var(--space-1);
  }

  .hero__title {
    margin-bottom: var(--space-3);

    font-size: clamp(42px, 12vw, var(--space-5));
    line-height: 0.98;
  }

  .hero__subtitle {
    max-width: 29rem;

    margin-bottom: var(--space-4);

    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .hero__actions {
    gap: var(--space-2);
  }
}

@media (max-width: 38rem) {
  .hero {
    --hero-mobile-smaller-offset: var(--space-8);

    height: calc(
      var(--hero-mobile-smaller-offset)
      + (100vw * 1358 / 1159)
    );
  }

  .hero::before {
    inset:
      var(--hero-mobile-smaller-offset)
      0
      auto;
  }
}


/* --------------------------------------------------------------------------
   SMALL MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 30rem) {
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .button {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__actions .button span {
    transition: none;
  }
}