@charset "utf-8";

/*===== # opening =====*//*#region*/
figure#motif-curtain {
  animation: opening-curtain 1s linear 1.5s forwards;
}
@keyframes opening-curtain {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    display: none;
  }
}
figure#motif-curtain img  {
  animation: opening-curtain_logo 1s ease 0s forwards;
}
@keyframes opening-curtain_logo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
figure#motif-bridge {
  animation: appear-bridge 1s ease 0.5s backwards, transfer-bridge 2s ease 1.5s backwards;
  transition: width 1s ease, left 1s ease;
}
@keyframes appear-bridge {
  from {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
  }
  to {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
}
@keyframes transfer-bridge {
  from {
    width: calc(var(--motif-bridge-width) * 2);
  }
}
figure#motif-post {
  animation: opening-post 2s ease 1.5s forwards;
}
@keyframes opening-post {
  from {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
  }
  to {
    -webkit-clip-path: inset(100% 0 0 0);
    clip-path: inset(100% 0 0 0);
  }
}
figure#motif-wave {
  animation: appear-wave 1s ease 0.5s backwards, transfer-wave 2s ease-in-out 1.5s none;
  transition: transform 1s ease;
}
@keyframes appear-wave {
  from {
    transform: translateY(300px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes transfer-wave {
  from {
    transform: translateY(0);
  }
}

section#firstview figure figcaption .main-copy .mark{
  animation: marker-draw 1s ease-out 2.5s forwards;
}
section#firstview figure figcaption .main-copy .mark:nth-of-type(2){
  animation-delay: 3s;
}

@keyframes marker-draw {
  to {
    background-size: 100% 100%;
  }
}
header {
  opacity: 1;
  animation: appear-header 1s ease 2s backwards;
}
@keyframes appear-header {
  from {
    opacity: 0;
  }
}
/*===== / opening =====*//*#endregion*/

/*===== # navigation =====*//*#region*/
body.navigation figure#motif-bridge {
  width: calc(var(--motif-bridge-width) * 3);
}
body.navigation figure#motif-wave {
  transform: translateY(0);
}
body:not(.navigation) figure#motif-background {
  opacity: 0;
  transition: opacity 0.5s ease;
}
body.navigation figure#motif-background {
  opacity: 0.9;
  pointer-events: auto;
}
/* internal-link */
header nav#internal-link {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
body.navigation header nav#internal-link {
  opacity: 1;
  pointer-events: auto;
}
body.navigation header nav#internal-link li {
  opacity: 0;
  --delay-interval: 0.1s;
  animation: wave-in 1s ease-in-out forwards;
  animation-delay: calc((var(--sibling-index) - 1) * var(--delay-interval));
}
@supports (animation-delay: calc(sibling-index() * 1s)) {
body.navigation header nav#internal-link li {
  animation-delay: calc((sibling-index() - 1) * var(--delay-interval));
}
}
body.navigation header nav#internal-link li img {
  transition: transform 0.5s ease;
}
body.navigation header nav#internal-link li:hover img {
  transform: scale(1);
}
/* external-link */
header nav#external-link {
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}
body.navigation header nav#external-link {
  opacity: 1;
  pointer-events: auto;
}
body.navigation header nav#external-link li {
  opacity: 0;
  --delay-interval: 0.1s;
  animation: wave-in 1s ease-in-out forwards;
  animation-delay: calc((var(--sibling-index) - 1) * var(--delay-interval) + 0.5s );
}
@supports (animation-delay: calc(sibling-index() * 1s)) {
body.navigation header nav#external-link li {
  animation-delay: calc((sibling-index() - 1) * var(--delay-interval) + 0.5s );
}
}
/*===== / navigation =====*//*#endregion*/

/*===== # heading =====*//*#region*/

h2.animation .main-heading span {
  opacity: 0;
}
h2.inview .main-heading span {
  --delay-interval: 0.1s;
  animation: wave-in 1s ease-in-out forwards;
  animation-delay: calc((var(--sibling-index) - 1) * var(--delay-interval));
}
@supports (animation-delay: calc(sibling-index() * 1s)) {
h2.inview .main-heading span {
  animation-delay: calc((sibling-index() - 1) * var(--delay-interval));
}
}
@keyframes wave-in {
  0% {
    opacity: 0;
    transform: translateY(0.2em);
  }
  50% {
    opacity: 1;
    transform: translateY(-0.2em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*===== / heading =====*//*#endregion*/

/*===== # case-logo =====*//*#region*/
article#about-2 ul.case.animation {
  --case-duration: 5s;
  animation: case-marquee calc(var(--case-duration) * var(--case-visible-count)) linear infinite;
}
@keyframes case-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/*===== / case-logo =====*//*#endregion*/

/*===== # hover =====*//*#region*/
a[role="button"] {
  transition: filter 0.5s ease;
}
a[role="button"]:hover {
  filter: drop-shadow(0px 0px 10px var(--darkgray));
  transform: translateZ(0);
}

header nav#internal-link li {
  color: var(--black);
  transition: color 0.5s ease;
}
header nav#internal-link li:hover{
  color: var(--darkgray);
}

article#blog-1 .blog-article .e-card {
  transition: filter 0.5s ease;
}
article#blog-1 .blog-article .e-card:hover {
  filter: drop-shadow(0px 0px 10px var(--darkgray));
  transform: translateZ(0);
}
/*===== / hover =====*//*#endregion*/