@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-clip {
  clip-path: inset(0 100% 0 0);
}

.motion-in-clip.in {
  animation: clip_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

html.chrome .motion-in-clip {
  clip-path: inset(0);
  opacity: 0;
}

html.chrome .motion-in-clip.in {
  opacity: 1;
}

.motion-in-blur {
  opacity: 0;
  filter: blur(8rem);
}

.motion-in-blur.in {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, blur_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

.motion-in-fade {
  opacity: 0;
}

.motion-in-fade.in {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

.motion-in-fade-scale {
  opacity: 0;
  transform: scale(0.96);
}

.motion-in-fade-scale.in {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, scale_up 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

.motion-in-fade-clip.in {
  animation: fade_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both, clip_in 0.8s cubic-bezier(0.83, 0, 0.17, 1) both;
}

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

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

html.chrome .motion-in-fade-clip.in {
  opacity: 1;
}


/*============================================================
  hover
============================================================*/
@media (hover: hover) {
  .button-link,
  .button-accordion,
  .button-contact,
  .button-submit,
  .page-numbers {
    transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}


/*============================================================
  header
============================================================*/
@keyframes header_in {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

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

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

@media (max-width: 768px) and (orientation: portrait) {
  #header-global .nav-header {
    opacity: 0;
    transform: translateY(-4rem);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #header-global .input-menu:checked ~ .nav-header {
    opacity: 1;
    transform: translateY(0);
  }
}


/*============================================================
  image-piece
============================================================*/
@keyframes image-piece_in_out {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-1.6rem); opacity: 0; }
  16% { opacity: 1; }
  20%, 80% { clip-path: inset(0); transform: translateX(0); opacity: 1; }
  84% { opacity: 1; }
  100% { clip-path: inset(0 0 0 100%); transform: translateX(1.6rem); opacity: 0; }
}
/*
@keyframes image-piece_in_out {
  0% { clip-path: inset(0 100% 0 0); transform: translateX(-1.6rem);  }
  20%, 80% { clip-path: inset(0); transform: translateX(0);  }
  100% { clip-path: inset(0 0 0 100%); transform: translateX(1.6rem);  }
}*/

/*  top-header ----------------------------------------*/

@keyframes top-header_image-piece_1_ratio {
  0%, 24.9% { width: calc(var(--grid) * 10); aspect-ratio: 2 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 18); aspect-ratio: 20 / 1; }
  50%, 74.9% { width: calc(var(--grid) * 8); aspect-ratio: 3 / 2; }
  75%, 100% { width: calc(var(--grid) * 20); aspect-ratio: 32 / 1; }
}

#top-header .image-piece.piece-1 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             top-header_image-piece_1_ratio 16s linear infinite;
}

@keyframes top-header_image-piece_2_ratio {
  0%, 24.9% { width: calc(var(--grid) * 6); aspect-ratio: 3 / 2; }
  25%, 49.9% { width: calc(var(--grid) * 4); aspect-ratio: 4 / 3; }
  50%, 74.9% { width: calc(var(--grid) * 16); aspect-ratio: 24 / 1; }
  75%, 100% { width: calc(var(--grid) * 8); aspect-ratio: 8 / 5; }
}

#top-header .image-piece.piece-2 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             top-header_image-piece_2_ratio 16s linear infinite;
}

@keyframes top-header_image-piece_3_ratio {
  0%, 24.9% { width: calc(var(--grid) * 6); aspect-ratio: 16 / 9; }
  25%, 49.9% { width: calc(var(--grid) * 8); aspect-ratio: 3 / 2; }
  50%, 74.9% { width: calc(var(--grid) * 24); aspect-ratio: 32 / 1; }
  75%, 100% { width: calc(var(--grid) * 12); aspect-ratio: 2 / 1; }
}

#top-header .image-piece.piece-3 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             top-header_image-piece_3_ratio 16s linear infinite;
}

@keyframes top-header_image-piece_4_ratio {
  0%, 24.9% { width: calc(var(--grid) * 24); aspect-ratio: 32 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 16); aspect-ratio: 24 / 1; }
  50%, 74.9% { width: calc(var(--grid) * 6); aspect-ratio: 4 / 3; }
  75%, 100% { width: calc(var(--grid) * 8); aspect-ratio: 3 /2; }
}

#top-header .image-piece.piece-4 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             top-header_image-piece_4_ratio 16s linear infinite;
}

@keyframes top-header_image-piece_5_ratio {
  0%, 24.9% { width: calc(var(--grid) * 16); aspect-ratio: 24 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 8); aspect-ratio: 16 / 9; }
  50%, 74.9% { width: calc(var(--grid) * 20); aspect-ratio: 32 / 1; }
  75%, 100% { width: calc(var(--grid) * 10); aspect-ratio: 3 / 2; }
}

#top-header .image-piece.piece-5 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             top-header_image-piece_5_ratio 16s linear infinite;
}

/*  item-work ----------------------------------------*/

@keyframes item-work_image-piece_1_ratio {
  0%, 24.9% { width: calc(var(--grid) * 10); aspect-ratio: 2 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 6); aspect-ratio: 8 / 5; }
  50%, 74.9% { width: calc(var(--grid) * 8); aspect-ratio: 16 / 9; }
  75%, 100% { width: calc(var(--grid) * 12); aspect-ratio: 32 / 1; }
}

.item-work .image-piece.piece-1 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             item-work_image-piece_1_ratio 16s linear infinite;
}

@keyframes item-work_image-piece_2_ratio {
  0%, 24.9% { width: calc(var(--grid) * 6); aspect-ratio: 4 / 3; }
  25%, 49.9% { width: calc(var(--grid) * 12); aspect-ratio: 24 / 1; }
  50%, 74.9% { width: calc(var(--grid) * 6); aspect-ratio: 16 / 9; }
  75%, 100% { width: calc(var(--grid) * 8); aspect-ratio: 32 / 1; }
}

.item-work .image-piece.piece-2 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             item-work_image-piece_2_ratio 16s linear infinite;
}

@keyframes item-work_image-piece_3_ratio {
  0%, 24.9% { width: calc(var(--grid) * 6); aspect-ratio: 16 / 9; }
  25%, 49.9% { width: calc(var(--grid) * 8); aspect-ratio: 3 / 2; }
  50%, 74.9% { width: calc(var(--grid) * 12); aspect-ratio: 32 / 1; }
  75%, 100% { width: calc(var(--grid) * 10); aspect-ratio: 2 / 1; }
}

.item-work .image-piece.piece-3 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             item-work_image-piece_3_ratio 16s linear infinite;
}

@keyframes item-work_image-piece_4_ratio {
  0%, 24.9% { width: calc(var(--grid) * 8); aspect-ratio: 24 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 4); aspect-ratio: 4 / 3; }
  50%, 74.9% { width: calc(var(--grid) * 16); aspect-ratio: 32 / 1; }
  75%, 100% { width: calc(var(--grid) * 4); aspect-ratio: 3 / 2; }
}

.item-work .image-piece.piece-4 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             item-work_image-piece_4_ratio 16s linear infinite;
}

/*  work-single-header ----------------------------------------*/

@keyframes work-single-header_image-piece_1_ratio {
  0%, 24.9% { width: calc(var(--grid) * 12); aspect-ratio: 8 / 5; }
  25%, 49.9% { width: calc(var(--grid) * 6); aspect-ratio: 4 / 3; }
  50%, 74.9% { width: calc(var(--grid) * 10); aspect-ratio: 16 / 9; }
  75%, 100% { width: calc(var(--grid) * 16); aspect-ratio: 40 / 1; }
}

#work-single-header .image-piece.piece-1 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             work-single-header_image-piece_1_ratio 16s linear infinite;
}

@keyframes work-single-header_image-piece_2_ratio {
  0%, 24.9% { width: calc(var(--grid) * 12); aspect-ratio: 2 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 16); aspect-ratio: 32 / 1; }
  50%, 74.9% { width: calc(var(--grid) * 6); aspect-ratio: 16 / 9; }
  75%, 100% { width: calc(var(--grid) * 8); aspect-ratio: 4 / 3; }
}

#work-single-header .image-piece.piece-2 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             work-single-header_image-piece_2_ratio 16s linear infinite;
}

@keyframes work-single-header_image-piece_3_ratio {
  0%, 24.9% { width: calc(var(--grid) * 8); aspect-ratio: 3 / 2; }
  25%, 49.9% { width: calc(var(--grid) * 4); aspect-ratio: 4 / 3; }
  50%, 74.9% { width: calc(var(--grid) * 12); aspect-ratio: 16 / 9; }
  75%, 100% { width: calc(var(--grid) * 10); aspect-ratio: 2 / 1; }
}

#work-single-header .image-piece.piece-3 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             work-single-header_image-piece_3_ratio 16s linear infinite;
}

@keyframes work-single-header_image-piece_4_ratio {
  0%, 24.9% { width: calc(var(--grid) * 6); aspect-ratio: 4 / 3; }
  25%, 49.9% { width: calc(var(--grid) * 12); aspect-ratio: 2 / 1; }
  50%, 74.9% { width: calc(var(--grid) * 16); aspect-ratio: 32 / 1; }
  75%, 100% { width: calc(var(--grid) * 8); aspect-ratio: 8 / 5; }
}

#work-single-header .image-piece.piece-4 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             work-single-header_image-piece_4_ratio 16s linear infinite;
}

@keyframes work-single-header_image-piece_5_ratio {
  0%, 24.9% { width: calc(var(--grid) * 10); aspect-ratio: 4 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 12); aspect-ratio: 32 / 1; }
  50%, 74.9% { width: calc(var(--grid) * 10); aspect-ratio: 3 / 2; }
  75%, 100% { width: calc(var(--grid) * 6); aspect-ratio: 16 / 9; }
}

#work-single-header .image-piece.piece-5 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             work-single-header_image-piece_5_ratio 16s linear infinite;
}

@keyframes work-single-header_image-piece_6_ratio {
  0%, 24.9% { width: calc(var(--grid) * 16); aspect-ratio: 24 / 1; }
  25%, 49.9% { width: calc(var(--grid) * 12); aspect-ratio: 8 / 5; }
  50%, 74.9% { width: calc(var(--grid) * 16); aspect-ratio: 32 / 1; }
  75%, 100% { width: calc(var(--grid) * 8); aspect-ratio: 16 / 1; }
}

#work-single-header .image-piece.piece-6 {
  animation: image-piece_in_out 4s cubic-bezier(0.83, 0, 0.17, 1) infinite,
             work-single-header_image-piece_6_ratio 16s linear infinite;
}

.image-piece.piece-1 { clip-path: inset(0 100% 0 0); opacity: 0; animation-delay: calc(0.12s * 1) !important; }
.image-piece.piece-2 { clip-path: inset(0 100% 0 0); opacity: 0; animation-delay: calc(0.12s * 2) !important; }
.image-piece.piece-3 { clip-path: inset(0 100% 0 0); opacity: 0; animation-delay: calc(0.12s * 3) !important; }
.image-piece.piece-4 { clip-path: inset(0 100% 0 0); opacity: 0; animation-delay: calc(0.12s * 4) !important; }
.image-piece.piece-5 { clip-path: inset(0 100% 0 0); opacity: 0; animation-delay: calc(0.12s * 5) !important; }
.image-piece.piece-6 { clip-path: inset(0 100% 0 0); opacity: 0; animation-delay: calc(0.12s * 6) !important; }