/* SG motion — CSS replacements for Webflow IX2 (riandoris.com source) */

:root {
  --sg-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --sg-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --sg-duration-reveal: 1000ms;
  --sg-distance-slide: 100px;
}

@keyframes sg-slide-in-left {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--sg-distance-slide) * -1), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sg-slide-in-right {
  from {
    opacity: 0;
    transform: translate3d(var(--sg-distance-slide), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sg-slide-in-bottom {
  from {
    opacity: 0;
    transform: translate3d(0, var(--sg-distance-slide), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sg-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes sg-scroll-bounce {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, 0.5em, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hero — slideInLeft, staggered 0 / 500 / 1000ms (source: e-9, e-11, e-13) */
  .secton-home_hero .hero_heading {
    animation: sg-slide-in-left var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
  }

  .secton-home_hero .hero_bio {
    animation: sg-slide-in-left var(--sg-duration-reveal) var(--sg-ease-out-quart) 500ms both;
  }

  .secton-home_hero .hero_grid > .button-secondary {
    animation: sg-slide-in-left var(--sg-duration-reveal) var(--sg-ease-out-quart) 1000ms both;
  }

  /* Inner-page heroes */
  .section-doing_hero .heading_pages,
  .section-thinking_hero .heading_pages {
    animation: sg-slide-in-left var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
  }

  /* Scroll indicator — fadeIn 500ms delay, then looping bounce on chevron (source: e-15, a-3) */
  .scroll_icon-div {
    animation: sg-fade-in var(--sg-duration-reveal) var(--sg-ease-out-quart) 500ms both;
  }

  .scroll_icon {
    animation: sg-scroll-bounce 1000ms var(--sg-ease-in-out) 1500ms infinite;
    will-change: transform;
  }

  @supports (animation-timeline: view()) {
    @media screen and (min-width: 992px) {
    /* Scroll reveals — 25% viewport entry offset (source: scrollOffsetValue 25%) */
    .section-logos .grid {
      animation: sg-slide-in-bottom var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section_home-info ._2col-grid_image,
    .section-building ._2col-grid_image,
    .sg-program-intro ._2col-grid_image {
      animation: sg-slide-in-left var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section_home-info .wrapper_text-2col,
    .section-building .wrapper_text-2col,
    .sg-program-intro .wrapper_text-2col {
      animation: sg-slide-in-right var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section-backstory .hero_text-wrap {
      animation: sg-slide-in-left var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section-backstory .backstory_image {
      animation: sg-slide-in-right var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section-tedx .tedx_text-wrap {
      animation: sg-slide-in-left var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section-tedx .backstory_image {
      animation: sg-slide-in-right var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section_home-education > .page-padding > .container-medium > h2.text-align-center,
    .sg-program-section-header {
      animation: sg-fade-in var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .sg-program-card,
    .sg-program-include-card {
      animation: sg-slide-in-bottom var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .sg-program-card:nth-child(2),
    .sg-program-include-card:nth-child(2) {
      animation-delay: 120ms;
    }

    .sg-program-card:nth-child(3),
    .sg-program-include-card:nth-child(3) {
      animation-delay: 240ms;
    }

    .sg-program-card:nth-child(4),
    .sg-program-include-card:nth-child(4) {
      animation-delay: 360ms;
    }

    .sg-program-pricing-card,
    .sg-program-apply-inner {
      animation: sg-fade-in var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .section-what_now .wrapper_what-now {
      animation: sg-fade-in var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .grid-education .education_image-wrap {
      animation: sg-slide-in-bottom var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }

    .grid-education .education_image-wrap:nth-child(2) {
      animation-delay: 150ms;
    }

    .grid-education .education_image-wrap:nth-child(3) {
      animation-delay: 300ms;
    }

    .sg-team-photo {
      animation: sg-fade-in var(--sg-duration-reveal) var(--sg-ease-out-quart) both;
      animation-timeline: view();
      animation-range: entry 25% entry 100%;
    }
    }
  }

  /* Mobile hero — no horizontal slide (100px offset clips bio/button off-screen) */
  @media screen and (max-width: 767px) {
    .secton-home_hero .hero_heading,
    .secton-home_hero .hero_bio,
    .secton-home_hero .hero_grid > .button-secondary {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .section-doing_hero .heading_pages,
    .section-thinking_hero .heading_pages {
      animation: none !important;
      opacity: 1 !important;
      transform: translateY(-50%) !important;
    }

    .scroll_icon-div.pages {
      animation: none !important;
      opacity: 1 !important;
    }
  }

  /* Mobile scroll reveals — text-only fade (images stay static to avoid layout bugs) */
  @media screen and (max-width: 991px) {
    .section_home-info ._2col-grid_image,
    .section-building ._2col-grid_image,
    .sg-program-intro ._2col-grid_image,
    .section-backstory .backstory_image,
    .section-tedx .backstory_image,
    .sg-team-photo {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }

    .section-logos .grid,
    .section_home-info .wrapper_text-2col,
    .section-building .wrapper_text-2col,
    .sg-program-intro .wrapper_text-2col,
    .section-backstory .hero_text-wrap,
    .section-tedx .tedx_text-wrap,
    .sg-program-section-header,
    .sg-program-card,
    .sg-program-include-card,
    .sg-program-pricing-card,
    .sg-program-apply-inner,
    .section-what_now .wrapper_what-now,
    .grid-education .education_image-wrap {
      animation: sg-fade-in 700ms var(--sg-ease-out-quart) both;
      animation-timeline: auto;
      animation-range: normal;
    }

    .sg-program-card:nth-child(2),
    .sg-program-include-card:nth-child(2) {
      animation-delay: 80ms;
    }

    .sg-program-card:nth-child(3),
    .sg-program-include-card:nth-child(3) {
      animation-delay: 160ms;
    }
  }
}