/* -------------------------------------------------------
   PAGE-LEVEL OVERFLOW SAFETY
-------------------------------------------------------- */

html,
body {
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}


/* -------------------------------------------------------
   HERO PIN SHELL

   ScrollTrigger pins this neutral wrapper instead of the
   Elementor hero itself. That prevents Elementor/theme
   transitions from animating ScrollTrigger's release
   transform and creating a visible slide at the handoff.
-------------------------------------------------------- */

.simantel-hero-pin-shell {
  position: relative;
  z-index: 1;

  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;

  margin: 0;
  padding: 0;

  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  animation: none !important;

  backface-visibility: hidden;
}


/* -------------------------------------------------------
   SECTION 1: HERO
-------------------------------------------------------- */

.js-parallax-hero {
  position: relative;
  z-index: 1;

  width: 100%;
  min-height: 100vh;
  min-height: 100svh;

  /* Crop the hero video without clipping the black section. */
  overflow: hidden;

  /*
   * ScrollTrigger no longer pins this element directly, but
   * disabling transform transitions also protects against
   * Elementor motion-effect styles left on the container.
   */
  transition: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
}


/* -------------------------------------------------------
   SECTION 2: BLACK CIRCLE SECTION
-------------------------------------------------------- */

.js-black-circle {
  --circle-color: #050505;
  --circle-radius: 75vw;

  position: relative;
  z-index: 3;
  isolation: isolate;

  background-color: var(--circle-color) !important;
  overflow: visible !important;
}


/* -------------------------------------------------------
   INTRO SHELL AND HEADING
-------------------------------------------------------- */

.js-black-circle-intro {
  position: relative;
  z-index: 2;
  padding-top: 0;

  transition: none !important;
}

.js-black-circle-heading,
.js-black-circle-heading .elementor-heading-title {
  position: relative;
  z-index: 2;

  will-change: opacity, transform;
  transition: none !important;
}


/* -------------------------------------------------------
   CIRCULAR CAPS
   These elements are inserted by parallax.js.
-------------------------------------------------------- */

.simantel-circle-cap {
  position: absolute;
  left: 0;

  width: 100%;
  height: 0;

  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle var(--circle-radius) at 50% var(--circle-radius),
      var(--circle-color) 0 calc(100% - 1px),
      transparent 100%
    );

  background-repeat: no-repeat;
  backface-visibility: hidden;
  will-change: height;
}

.simantel-circle-cap--top {
  top: 0;

  /* GSAP controls yPercent, y, and height. */
  transform: none;
  transform-origin: 50% 100%;

  will-change: height, transform;
  transition: none !important;
}

.simantel-circle-cap--bottom {
  top: 100%;
  transform: scaleY(-1);
  transform-origin: 50% 50%;

  transition: none !important;
}


/* -------------------------------------------------------
   SECTION 3: QUOTE / VIDEO SECTION
-------------------------------------------------------- */

.js-quote-video {
  position: relative;
  z-index: 1;
}


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

@media (max-width: 767px) {
  .js-black-circle {
    --circle-radius: 90vw;
  }

  .js-black-circle-intro {
    padding-top: 40px;
  }
}