/*
 * Ultra-wide hero adaptation
 * Scope: viewport widths >= 1920px only.
 * Rollback: remove this stylesheet link from server.mjs.
 */

@media (min-width: 1920px) {
  /* Keep the navigation legible when the canvas grows beyond desktop width. */
  .header {
    min-height: clamp(64px, 3vw, 72px);
  }

  .header__logo-lockup {
    scale: 1.35;
    transform-origin: left center;
  }

  .header__right {
    scale: 1.02;
    transform-origin: right center;
  }

  /* Grow the key lockup elements without disturbing the hero's centering transform. */
  .hero__wordmark,
  .hero__cta .download-os-btn {
    scale: 1.04;
    transform-origin: center center;
  }

  .hero-experience .hero__tagline {
    font-size: 40px;
  }

  .hero-experience .hero__cta .download-chooser {
    column-gap: 32px;
  }

  /* Preserve the orbit animation's transform while increasing visual density. */
  .hero-orbit__item {
    scale: 1.03;
    transform-origin: center center;
  }
}

@media (min-width: 2200px) {
  .header__right {
    scale: 1.06;
  }

  .header__logo-lockup {
    scale: 1.45;
  }

  .hero__wordmark,
  .hero__cta .download-os-btn {
    scale: 1.1;
  }

  .hero-experience .hero__tagline {
    font-size: 42px;
  }

  .hero-experience .hero__cta .download-chooser {
    column-gap: 44px;
  }

  .hero-orbit__item {
    scale: 1.08;
  }
}

@media (min-width: 2400px) {
  .header__right {
    scale: 1.09;
  }

  .header__logo-lockup {
    scale: 1.55;
  }

  .hero__wordmark,
  .hero__cta .download-os-btn {
    scale: 1.15;
  }

  .hero-experience .hero__tagline {
    font-size: 44px;
  }

  .hero-experience .hero__cta .download-chooser {
    column-gap: 56px;
  }

  .hero-orbit__item {
    scale: 1.12;
  }
}

@media (min-width: 2400px) and (min-height: 1050px) {
  /* A slight upward bias balances the extra vertical whitespace on 2K/4K displays. */
  .hero__copy {
    translate: 0 -1.2vh;
  }
}

@media (prefers-reduced-motion: reduce) and (min-width: 1920px) {
  .hero__wordmark,
  .hero__cta .download-os-btn,
  .hero-orbit__item,
  .header__logo-lockup,
  .header__right {
    transition: none;
  }
}