@charset "UTF-8";

@keyframes fade_in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade_out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes scale_up {
  0% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes scale_down {
  0% { transform: scale(1); }
  100% { transform: scale(0.96); }
}

@keyframes slide_in {
  0% { transform: translateX(-8%); }
  100% { transform: translateX(0); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes clip_in {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0); }
}

@keyframes trace_in {
  0% { transform: translateX(-101%); }
  40%, 60% { transform: translateX(0); }
  100% { transform: translateX(101%); }
}

@keyframes blur_in {
  0% { filter: blur(1.6rem); }
  100% { filter: blur(0); }
}


/*============================================================
  motion
============================================================*/
.motion-in-fade {
  opacity: 0;
}

.motion-in-fade.active {
  animation: fade_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both;
}

.motion-in-fade-clip {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.motion-in-fade-clip.active {
  animation: fade_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both, clip_in 1.6s cubic-bezier(0.76, 0, 0.24, 1) both;
}

span.motion-in-fade-clip {
  display: inline-block;
}

.delay.active {
  animation-delay: 0.4s;
}


/*============================================================
  hover
============================================================*/
@media (hover: hover) {
  .a-button,
  .a-text .icon,
  .input-submit,
  .page-numbers {
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .a-item .picture img {
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
}


/*============================================================
  html
============================================================*/
html {
  opacity: 0;
}

html.active {
  animation: fade_in 0.4s cubic-bezier(0.45, 0, 0.55, 1) both;
}


/*============================================================
  header
============================================================*/
#header-global.floating {
  animation: header_in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes header_in {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

#header-global .button-menu .text {
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

#header-global .button-menu::before,
#header-global .button-menu::after {
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 768px) and (orientation: portrait) {
  #header-global .nav-header.active {
    animation: header_menu_in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes header_menu_in {
  0% { transform: translateY(-0.4rem); }
  100% { transform: translateY(0); }
}


/*============================================================
  slider
============================================================*/
#front-products .div-slider .ul-slider-items {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#front-products .div-slider .ul-slider-items.return.prev {
  animation: slider_return_prev 0.4s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slider_return_prev {
  0% { right: 0; }
  50% { right: calc(var(--grid) * -2); }
  100% { right: 0; }
}

#front-products .div-slider .ul-slider-items.return.next {
  animation: slider_return_next 0.4s cubic-bezier(0.76, 0, 0.24, 1) both;
}

@keyframes slider_return_next {
  0% { left: 0; }
  50% { left: calc(var(--grid) * -2); }
  100% { left: 0; }
}