/*
 * Parallax background system for Silverstone
 * -----------------------------------------
 * Applies a responsive parallax treatment to the themed body sections that
 * sit between the cinematic hero and the CTA banner on every page.  Desktop
 * viewports receive a traditional fixed background while mobile devices use
 * a lightweight JavaScript-assisted layer that simulates the same visual
 * effect without relying on background-attachment: fixed (which performs
 * poorly on many mobile browsers).
 */

:root {
  --parallax-overlay: none;
  --parallax-backdrop: #050B18;
}

.parallax-section {
  position: relative;
  overflow: hidden;
  background-color: var(--parallax-backdrop);
  isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .parallax-section.animate,
  .parallax-section.animate.visible {
    transform: none !important;
  }
}

.parallax-section > * {
  position: relative;
  z-index: 1;
}

.parallax-section .parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  opacity: 0;
  transition: opacity 320ms ease;
  z-index: 0;
}

.parallax-section.parallax-ready .parallax-layer {
  opacity: 1;
}

/* Theme-specific assets -------------------------------------------------- */
.parallax-section[data-parallax-theme="lines"] {
  background-image: var(--parallax-overlay), url('../images/internet/section-abstract-lines.webp');
  --parallax-mobile-fallback: url('../images/internet/mobile/section-abstract-lines@1x.webp');
  --parallax-mobile-image-set: image-set(
    url('../images/internet/mobile/section-abstract-lines@1x.webp') 1x,
    url('../images/internet/mobile/section-abstract-lines@2x.webp') 2x,
    url('../images/internet/mobile/section-abstract-lines@3x.webp') 3x
  );
  --parallax-mobile-image-set-webkit: -webkit-image-set(
    url('../images/internet/mobile/section-abstract-lines@1x.webp') 1x,
    url('../images/internet/mobile/section-abstract-lines@2x.webp') 2x,
    url('../images/internet/mobile/section-abstract-lines@3x.webp') 3x
  );
}

.parallax-section[data-parallax-theme="circuit"] {
  background-image: var(--parallax-overlay), url('../images/internet/section-circuit.webp');
  --parallax-mobile-fallback: url('../images/internet/mobile/section-circuit@1x.webp');
  --parallax-mobile-image-set: image-set(
    url('../images/internet/mobile/section-circuit@1x.webp') 1x,
    url('../images/internet/mobile/section-circuit@2x.webp') 2x,
    url('../images/internet/mobile/section-circuit@3x.webp') 3x
  );
  --parallax-mobile-image-set-webkit: -webkit-image-set(
    url('../images/internet/mobile/section-circuit@1x.webp') 1x,
    url('../images/internet/mobile/section-circuit@2x.webp') 2x,
    url('../images/internet/mobile/section-circuit@3x.webp') 3x
  );
}

.parallax-section[data-parallax-theme="mesh"] {
  background-image: var(--parallax-overlay), url('../images/internet/section-mesh.webp');
  --parallax-mobile-fallback: url('../images/internet/mobile/section-mesh@1x.webp');
  --parallax-mobile-image-set: image-set(
    url('../images/internet/mobile/section-mesh@1x.webp') 1x,
    url('../images/internet/mobile/section-mesh@2x.webp') 2x,
    url('../images/internet/mobile/section-mesh@3x.webp') 3x
  );
  --parallax-mobile-image-set-webkit: -webkit-image-set(
    url('../images/internet/mobile/section-mesh@1x.webp') 1x,
    url('../images/internet/mobile/section-mesh@2x.webp') 2x,
    url('../images/internet/mobile/section-mesh@3x.webp') 3x
  );
}

.parallax-section[data-parallax-theme="waves"] {
  background-image: var(--parallax-overlay), url('../images/internet/section-waves.webp');
  --parallax-mobile-fallback: url('../images/internet/mobile/section-waves@1x.webp');
  --parallax-mobile-image-set: image-set(
    url('../images/internet/mobile/section-waves@1x.webp') 1x,
    url('../images/internet/mobile/section-waves@2x.webp') 2x,
    url('../images/internet/mobile/section-waves@3x.webp') 3x
  );
  --parallax-mobile-image-set-webkit: -webkit-image-set(
    url('../images/internet/mobile/section-waves@1x.webp') 1x,
    url('../images/internet/mobile/section-waves@2x.webp') 2x,
    url('../images/internet/mobile/section-waves@3x.webp') 3x
  );
}

.parallax-section[data-parallax-theme="book"] {
  background-image: var(--parallax-overlay), url('../images/internet/hero/book-hero-calendly-mobile-2025.png');
  --parallax-mobile-fallback: url('../images/internet/mobile/book-hero-calendly-mobile-2025@1x.webp');
  --parallax-mobile-image-set: image-set(
    url('../images/internet/mobile/book-hero-calendly-mobile-2025@1x.webp') 1x,
    url('../images/internet/mobile/book-hero-calendly-mobile-2025@2x.webp') 2x,
    url('../images/internet/mobile/book-hero-calendly-mobile-2025@3x.webp') 3x
  );
  --parallax-mobile-image-set-webkit: -webkit-image-set(
    url('../images/internet/mobile/book-hero-calendly-mobile-2025@1x.webp') 1x,
    url('../images/internet/mobile/book-hero-calendly-mobile-2025@2x.webp') 2x,
    url('../images/internet/mobile/book-hero-calendly-mobile-2025@3x.webp') 3x
  );
}

/* High-resolution desktop support */
@supports (background-image: image-set(url("data:image/gif;base64,R0lGODlhAQABAAAAACw=") 1x)) {
  .parallax-section[data-parallax-theme="lines"] {
    background-image: var(--parallax-overlay), image-set(
      url('../images/internet/section-abstract-lines.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="circuit"] {
    background-image: var(--parallax-overlay), image-set(
      url('../images/internet/section-circuit.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="mesh"] {
    background-image: var(--parallax-overlay), image-set(
      url('../images/internet/section-mesh.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="waves"] {
    background-image: var(--parallax-overlay), image-set(
      url('../images/internet/section-waves.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="book"] {
    background-image: var(--parallax-overlay), image-set(
      url('../images/internet/hero/book-hero-calendly-mobile-2025.png') 1x
    );
  }
}

/* WebKit image-set fallbacks */
@supports (background-image: -webkit-image-set(url("data:image/gif;base64,R0lGODlhAQABAAAAACw=") 1x)) {
  .parallax-section[data-parallax-theme="lines"] {
    background-image: var(--parallax-overlay), -webkit-image-set(
      url('../images/internet/section-abstract-lines.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="circuit"] {
    background-image: var(--parallax-overlay), -webkit-image-set(
      url('../images/internet/section-circuit.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="mesh"] {
    background-image: var(--parallax-overlay), -webkit-image-set(
      url('../images/internet/section-mesh.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="waves"] {
    background-image: var(--parallax-overlay), -webkit-image-set(
      url('../images/internet/section-waves.webp') 1x
    );
  }
  .parallax-section[data-parallax-theme="book"] {
    background-image: var(--parallax-overlay), -webkit-image-set(
      url('../images/internet/hero/book-hero-calendly-mobile-2025.png') 1x
    );
  }
}

/* Desktop parallax ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  .parallax-section .parallax-layer {
    display: none;
  }
}

/* Mobile parallax -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
  .parallax-section {
    background-image: none !important;
    background-color: transparent;
    isolation: auto;
  }
  .parallax-section.parallax-mobile-active {
    position: relative;
    z-index: 1;
  }
  .parallax-section.parallax-mobile-active > * {
    position: relative;
    z-index: 2;
  }
  .parallax-section .parallax-layer {
    display: none !important;
  }
  .parallax-mobile-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--parallax-backdrop);
  }
  .parallax-mobile-layer {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    opacity: 0;
    transition: opacity 320ms ease;
  }
  .parallax-mobile-layer.is-active {
    opacity: 1;
  }
}

/* Reduced motion: keep static imagery */
@media (prefers-reduced-motion: reduce) {
  .parallax-section .parallax-layer {
    display: none !important;
  }
  .parallax-mobile-stage {
    display: none !important;
  }
}