/* Zoom in image on scroll */
.animate--zoom-in {
    --zoom-in-ratio: 1;
  }
  
  .animate--zoom-in  img ,.animate--zoom-in  picture,
  .animate--zoom-in > svg {
    transition: scale var(--duration-short) linear;
    scale: var(--zoom-in-ratio);
  }
  :root {
    --duration-announcement-bar: 250ms;
    --duration-medium: 300ms;
    --duration-long: 500ms;
    --duration-extra-long: 800ms;
    --duration-extra-longer: 1000ms;
    --duration-extended: 3s;
    --animation-slide-in: slideIn var(--duration-extra-long) ease forwards;
    --animation-fade-in: fadeIn var(--duration-extra-long) ease forwards;
    --animation-zoom-in: zoomIn var(--duration-extra-longer) ease forwards;
  }
  
  /* Animations */
  
  @media (prefers-reduced-motion: no-preference) {
    .animate--ambient > img,
    .animate--ambient > svg {
      animation: animateAmbient 30s linear infinite;
    }
  
    @keyframes animateAmbient {
      0% {
        transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
      }
  
      100% {
        transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
      }
    }
    .scroll-trigger:is(.zoom_in, .fade_in, .slide_in) {
      opacity: 0.01;
    }
    .scroll-trigger:not(.scroll-trigger--offscreen).zoom_in {
      animation: var(--animation-zoom-in);
      animation-delay: calc(var(--animation-order) * 75ms);
    }
    .scroll-trigger:not(.scroll-trigger--offscreen).fade_in {
      animation: var(--animation-fade-in);
    }
  
    .scroll-trigger:not(.scroll-trigger--offscreen).slide_in {
      animation: var(--animation-slide-in);
      animation-delay: calc(var(--animation-order) * 75ms);
    }
    .scroll-trigger.scroll-trigger--design-mode.fade_in,
    .scroll-trigger.scroll-trigger--design-mode.slide_in,
    .scroll-trigger.scroll-trigger--design-mode .slider,
    .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
      opacity: 1;
      animation: none;
      transition: none;
    }
    .scroll-trigger[animation-end] {
      opacity: 1;
      animation: none !important;
      transition: none;
    }
    /* .collection-tab__tab-content
      .scroll-trigger:not(.scroll-trigger--offscreen).zoom_in {
      animation-delay: calc(0.5s + var(--animation-order) * 75ms);
    } */
    .scroll-trigger.scroll-trigger--design-mode.slide_in {
      transform: translateY(0);
    }
    @keyframes ripple {
      0% {
        opacity: 0;
        -webkit-transform: scale(0.2);
        transform: scale(0.2);
      }
      50% {
        opacity: 0.8;
      }
      100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
      }
    }
    @keyframes prdmove {
      0% {
        -moz-transform: scale(1) translateX(0);
        -ms-transform: scale(1) translateX(0);
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0); }
    
      25% {
        -moz-transform: scale(1.35) translateX(0);
        -ms-transform: scale(1.35) translateX(0);
        -webkit-transform: scale(1.35) translateX(0);
        transform: scale(1.35) translateX(0); }
    
      50% {
        -moz-transform: scale(1.35) translateX(30px);
        -ms-transform: scale(1.35) translateX(30px);
        -webkit-transform: scale(1.35) translateX(30px);
        transform: scale(1.35) translateX(30px); }
    
      75% {
        -moz-transform: scale(1.35) translateX(-30px);
        -ms-transform: scale(1.35) translateX(-30px);
        -webkit-transform: scale(1.35) translateX(-30px);
        transform: scale(1.35) translateX(-30px); }
    
      100% {
        -moz-transform: scale(1) translateX(0);
        -ms-transform: scale(1) translateX(0);
        -webkit-transform: scale(1) translateX(0);
        transform: scale(1) translateX(0); } }
    @keyframes slideIn {
      from {
        transform: translateY(3rem);
        opacity: 0.01;
      }
  
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    @keyframes zoomIn {
      from {
        opacity: 0;
        transform: scale(1.06);
      }
  
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
  }
  
  @media screen and (max-width: 989px) {
    .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
      animation: var(--animation-slide-in);
    }
  }
  
  @media screen and (min-width: 990px) {
    .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
      animation: var(--animation-slide-in);
    }
  }
  .scroll-trigger.scroll-trigger--design-mode.fade_in,
  .scroll-trigger.scroll-trigger--design-mode.slide_in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
  }
  
  .scroll-trigger.scroll-trigger--design-mode.slide_in {
    transform: translateY(0);
  }
  
  @keyframes slideIn {
    from {
      transform: translateY(2rem);
      opacity: 0.01;
    }
  
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0.01;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @media (prefers-reduced-motion: no-preference) {
    .animate--ambient > img,.animate--ambient > picture,
    .animate--ambient > .svg-wrapper {
      animation: animateAmbient 30s linear infinite;
    }
  
    @keyframes animateAmbient {
      0% {
        transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2);
      }
      100% {
        transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2);
      }
    }
  
  }
  .animate-fixed-parent {
    display: initial !important;
  }
  
  /* Fixed background */
  .animate--fixed {
    clip-path: inset(0);
  }
  
  .animate--fixed > img:not(.zoom),.animate--fixed > picture:not(.zoom),
  .animate--fixed > svg:not(.zoom) {
    position: fixed;
    height: 100vh;
  }
  .animate--zoom-in {
    --zoom-in-ratio: 1
}

.animate--zoom-in img,.animate--zoom-in picture,.animate--zoom-in>svg {
    transition: scale var(--duration-short) linear;
    scale: var(--zoom-in-ratio)
}

:root {
    --duration-announcement-bar: .25s;
    --duration-medium: .3s;
    --duration-long: .5s;
    --duration-extra-long: .8s;
    --duration-extra-longer: 1s;
    --duration-extended: 3s;
    --animation-slide-in: slideIn var(--duration-extra-long) ease forwards;
    --animation-fade-in: fadeIn var(--duration-extra-long) ease forwards;
    --animation-zoom-in: zoomIn var(--duration-extra-longer) ease forwards
}

@media (prefers-reduced-motion: no-preference) {
    .animate--ambient>img,.animate--ambient>svg {
        animation: animateAmbient 30s linear infinite
    }

    @keyframes animateAmbient {
        0% {
            transform: rotate(0) translate(1em) rotate(0) scale(1.2)
        }

        to {
            transform: rotate(360deg) translate(1em) rotate(-360deg) scale(1.2)
        }
    }

    .scroll-trigger:is(.zoom_in,.fade_in,.slide_in) {
        opacity: .01
    }

    .scroll-trigger:not(.scroll-trigger--offscreen).zoom_in {
        animation: var(--animation-zoom-in);
        animation-delay: calc(var(--animation-order) * 75ms)
    }

    .scroll-trigger:not(.scroll-trigger--offscreen).fade_in {
        animation: var(--animation-fade-in)
    }

    .scroll-trigger:not(.scroll-trigger--offscreen).slide_in {
        animation: var(--animation-slide-in);
        animation-delay: calc(var(--animation-order) * 75ms)
    }

    .scroll-trigger.scroll-trigger--design-mode.fade_in,.scroll-trigger.scroll-trigger--design-mode.slide_in,.scroll-trigger.scroll-trigger--design-mode .slider,.scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
        opacity: 1;
        animation: none;
        transition: none
    }

    .scroll-trigger[animation-end] {
        opacity: 1;
        animation: none!important;
        transition: none
    }

    .scroll-trigger.scroll-trigger--design-mode.slide_in {
        transform: translateY(0)
    }

    @keyframes ripple {
        0% {
            opacity: 0;
            -webkit-transform: scale(.2);
            transform: scale(.2)
        }

        50% {
            opacity: .8
        }

        to {
            opacity: 0;
            -webkit-transform: scale(1.1);
            transform: scale(1.1)
        }
    }

    @keyframes prdmove {
        0% {
            -moz-transform: scale(1) translateX(0);
            -ms-transform: scale(1) translateX(0);
            -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translate(0)
        }

        25% {
            -moz-transform: scale(1.35) translateX(0);
            -ms-transform: scale(1.35) translateX(0);
            -webkit-transform: scale(1.35) translateX(0);
            transform: scale(1.35) translate(0)
        }

        50% {
            -moz-transform: scale(1.35) translateX(30px);
            -ms-transform: scale(1.35) translateX(30px);
            -webkit-transform: scale(1.35) translateX(30px);
            transform: scale(1.35) translate(30px)
        }

        75% {
            -moz-transform: scale(1.35) translateX(-30px);
            -ms-transform: scale(1.35) translateX(-30px);
            -webkit-transform: scale(1.35) translateX(-30px);
            transform: scale(1.35) translate(-30px)
        }

        to {
            -moz-transform: scale(1) translateX(0);
            -ms-transform: scale(1) translateX(0);
            -webkit-transform: scale(1) translateX(0);
            transform: scale(1) translate(0)
        }
    }

    @keyframes slideIn {
        0% {
            transform: translateY(3rem);
            opacity: .01
        }

        to {
            transform: translateY(0);
            opacity: 1
        }
    }

    @keyframes zoomIn {
        0% {
            opacity: 0;
            transform: scale(1.06)
        }

        to {
            opacity: 1;
            transform: scale(1)
        }
    }
}

@media screen and (max-width: 989px) {
    .scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
        animation:var(--animation-slide-in)
    }
}

@media screen and (min-width: 990px) {
    .scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
        animation:var(--animation-slide-in)
    }
}

.scroll-trigger.scroll-trigger--design-mode.fade_in,.scroll-trigger.scroll-trigger--design-mode.slide_in,.scroll-trigger.scroll-trigger--design-mode .slider,.scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none
}

.scroll-trigger.scroll-trigger--design-mode.slide_in {
    transform: translateY(0)
}

@keyframes slideIn {
    0% {
        transform: translateY(2rem);
        opacity: .01
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: .01
    }

    to {
        opacity: 1
    }
}

@media (prefers-reduced-motion: no-preference) {
    .animate--ambient>img,.animate--ambient>picture,.animate--ambient>.svg-wrapper {
        animation: animateAmbient 30s linear infinite
    }

    @keyframes animateAmbient {
        0% {
            transform: rotate(0) translate(1em) rotate(0) scale(1.2)
        }

        to {
            transform: rotate(360deg) translate(1em) rotate(-360deg) scale(1.2)
        }
    }
}

.animate-fixed-parent {
    display: initial!important
}

.animate--fixed {
    clip-path: inset(0)
}

.animate--fixed>img:not(.zoom),.animate--fixed>picture:not(.zoom),.animate--fixed>svg:not(.zoom) {
    position: fixed;
    height: 100vh
}

/*# sourceMappingURL=/cdn/shop/t/30/assets/animation.css.map?v=148616399047851135611745121510 */