/*!
 * Sparkool Academy - "grow on scroll" intro video (homepage)
 *
 * Mirrors dashcreative.co/services, which is deliberately minimal:
 *   .sticky-track { height: 270vh }
 *   .sticky-wrap  { position: sticky; top: 0; height: 100vh; flex-centered }
 *   .grow-hero    { starts 360x525, scrubbed up to full size }
 * Same structure here - a plain sticky element, no fixed positioning and
 * no manual position math. The only JS job is writing --sk-* from scroll
 * progress, with a scrub-style delay for weight.
 */

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {

  /* the tall track that supplies the scroll distance */
  .sk-grow-track {
    position: relative;
    display: block !important;
    height: 270vh;
    padding: 0 !important;
  }

  /* sticky viewport-height stage, exactly like .sticky-wrap */
  .sk-grow-stage {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* the growing frame, exactly like .grow-hero */
  .sk-grow-stage .elementor-wrapper {
    position: relative;
    width: var(--sk-w, 360px);
    height: var(--sk-h, 525px);
    max-width: none;
    max-height: none;
    border-radius: var(--sk-r, 16px);
    overflow: hidden;
    background: #05070a;
  }

  /* any wrapper Elementor puts between the frame and the player */
  .sk-grow-stage .sk-fill {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* the player keeps a fixed pixel size and is only scaled, so the video
     is cover-cropped inside the frame at every stage of the growth.
     !important because the YouTube iframe API writes inline sizes. */
  .sk-grow-stage .sk-player {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: var(--sk-base-w, 1200px) !important;
    height: var(--sk-base-h, 675px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translate(-50%, -50%) scale(var(--sk-k, 1)) !important;
    transform-origin: 50% 50% !important;
  }

  /* position:sticky breaks inside an overflow-x:hidden scroll container;
     `clip` gives the same visual result without breaking it */
  html.sk-js,
  html.sk-js body {
    overflow-x: clip;
  }
}

/* ------------------------------------------------------------------
   Mobile - no pinning, just a soft reveal
   ------------------------------------------------------------------ */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  html.sk-js .sk-grow-stage .elementor-wrapper {
    opacity: 0;
    transform: translateY(22px) scale(.94);
    transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  }

  html.sk-js .sk-grow-stage.sk-in .elementor-wrapper {
    opacity: 1;
    transform: none;
  }
}