/* Motion layer inspired by the Wix daycare hero */

body.home .home-hero,
body.inner-page .page-hero {
  --hero-scroll-shift: 0px;
  --hero-entry-shift: 0px;
  --card-scroll-y: 0px;
  --title-scroll-y: 0px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-image: none !important;
}

body.home .home-hero::before,
body.inner-page .page-hero::before {
  content: "";
  position: absolute;
  inset: -5% 0 -10%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateY(calc(var(--hero-entry-shift) + var(--hero-scroll-shift)));
  transform-origin: center center;
  opacity: 1;
  transition:
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.72s ease-out,
    filter 0.9s ease-out;
  will-change: transform, opacity;
  pointer-events: none;
}

body.home .home-hero::before {
  background-image: linear-gradient(90deg, rgba(58, 36, 19, 0.42), rgba(58, 36, 19, 0.05)), var(--hero-image);
  background-position: center 12%;
}

body.inner-page .page-hero::before {
  background-image: var(--hero-image);
  background-position: center 50%;
}

body.home .home-hero__inner,
body.inner-page .page-hero__inner {
  position: relative;
  z-index: 1;
}

body.home .home-hero.motion-ready,
body.inner-page .page-hero.motion-ready {
  --hero-entry-shift: 2.4rem;
}

body.home .home-hero.motion-ready::before,
body.inner-page .page-hero.motion-ready::before {
  opacity: 0;
  filter: saturate(0.94);
}

body.home .home-hero.motion-ready.motion-in,
body.inner-page .page-hero.motion-ready.motion-in {
  --hero-entry-shift: 0px;
}

body.home .home-hero.motion-ready.motion-in::before,
body.inner-page .page-hero.motion-ready.motion-in::before {
  opacity: 1;
  filter: none;
}

body.home .home-hero.motion-live::before,
body.inner-page .page-hero.motion-live::before {
  transition:
    opacity 0.3s ease-out,
    filter 0.3s ease-out;
}

body.home .home-hero__card {
  position: relative;
  z-index: 1;
  transform: translateY(var(--card-scroll-y));
  transform-origin: 50% 100%;
  transition:
    transform 1.02s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.74s ease-out,
    box-shadow 1.02s ease-out;
  will-change: transform, opacity;
}

body.home .home-hero.motion-ready .home-hero__card {
  opacity: 0;
  transform: translateY(calc(4.25rem + var(--card-scroll-y)));
}

body.home .home-hero.motion-ready.motion-in .home-hero__card {
  opacity: 1;
  transform: translateY(var(--card-scroll-y));
  box-shadow: 0 1.4rem 3rem rgba(93, 65, 37, 0.08);
}

body.home .home-hero.motion-live .home-hero__card {
  transition:
    opacity 0.3s ease-out,
    box-shadow 1.02s ease-out;
}

body.home .home-hero__eyebrow,
body.home .home-hero__card .hr_kwadrat,
body.home .home-hero .kita_napis,
body.inner-page .page-hero h1,
body.inner-page .page-content__body h1.animate-reveal {
  will-change: transform, opacity;
}

body.home .home-hero__eyebrow,
body.home .home-hero__card .hr_kwadrat,
body.home .home-hero .kita_napis,
body.inner-page .page-hero h1 {
  transition:
    transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.68s ease-out;
}

body.home .home-hero.motion-ready .home-hero__eyebrow,
body.home .home-hero.motion-ready .kita_napis {
  opacity: 0;
  transform: translateY(1rem);
}

body.home .home-hero.motion-ready .home-hero__card .hr_kwadrat {
  opacity: 0;
  transform: scaleX(0.42);
  transform-origin: 50% 50%;
}

body.home .home-hero.motion-ready.motion-in .home-hero__eyebrow:first-of-type {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

body.home .home-hero.motion-ready.motion-in .home-hero__eyebrow--muted {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.56s;
}

body.home .home-hero.motion-ready.motion-in .home-hero__card .hr_kwadrat {
  opacity: 1;
  transform: scaleX(1);
  transition-delay: 0.72s;
}

body.home .home-hero.motion-ready.motion-in .kita_napis {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.86s;
}

body.inner-page .page-hero h1 {
  position: relative;
  z-index: 1;
  transform: translateY(var(--title-scroll-y));
}

body.inner-page .page-hero.motion-ready h1 {
  opacity: 0;
  transform: translateY(calc(3.2rem + var(--title-scroll-y)));
}

body.inner-page .page-hero.motion-ready.motion-in h1 {
  opacity: 1;
  transform: translateY(var(--title-scroll-y));
  transition-delay: 0.26s;
}

body.inner-page .page-hero.motion-live h1 {
  transition: opacity 0.3s ease-out;
}

body.inner-page .page-content__body h1.animate-reveal {
  opacity: 0;
  transform: translateY(3.2rem);
  transition:
    transform 1.02s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.72s ease-out;
}

body.inner-page .page-content__body h1.animate-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 991.98px) {
  body.home .home-hero.motion-ready,
  body.inner-page .page-hero.motion-ready {
    --hero-entry-shift: 1.9rem;
  }

  body.home .home-hero.motion-ready .home-hero__card {
    transform: translateY(calc(2.9rem + var(--card-scroll-y)));
  }
}

@media (max-width: 767.98px) {
  body.home .home-hero::before,
  body.inner-page .page-hero::before {
    inset: -3% 0 -6%;
  }
}