@charset "UTF-8";

/**animation******/


/** 文字化け風のアニメーション
 * *****/
@keyframes FadeIn-left {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.js-glitch-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  inset: 0;
  display: inline-block;
  animation: FadeIn-left 0.8s forwards;
}


.glitch-wrapper {
  position: relative;
  display: inline-block;
}

.glitch-base {
  visibility: hidden;
}

.mono .glitch-text{
  position: absolute;
  inset: 0;
}
/* 常時表示するズレ文字 */
.glitch-text::before,
.glitch-text::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  white-space: nowrap;
  pointer-events: none;
  color: inherit;
  opacity: .85;
  z-index: 10;
  color: inherit;
  background: transparent;

  /* 通常時はアニメーションなし */
  animation: none;
}
.glitch-text::before{
  transform: translateX(2px);
  text-shadow: -1px 0 red;
  left: -2px;
  animation: noise-anim 2s infinite linear alternate-reverse;
}

.glitch-text::after{
  transform: translateX(-2px);
  text-shadow: 1px 0 blue;
  left: 2px;
  animation: noise-anim-2 2s infinite linear alternate-reverse;
}


@keyframes glitchNoise {
  0%, 88%, 100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }

  89% {
    opacity: 1;
    transform: translate(2px, -1px);
    clip-path: inset(10% 0 65% 0);
  }

  90% {
    opacity: 1;
    transform: translate(-3px, 1px);
    clip-path: inset(45% 0 30% 0);
  }

  91% {
    opacity: 1;
    transform: translate(3px, 2px);
    clip-path: inset(70% 0 8% 0);
  }

  92% {
    opacity: 0;
    transform: translate(0, 0);
  }
}




/*****************/





/***
 * コンテンツを隠してから表示させる
 * ******************/

.mask-reveal {
  position: relative;
  overflow: hidden;
}

.mask-reveal__content {
  opacity: 0;
  transform: translateY(16px);
}

.mask-reveal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-black);
  z-index: 2;
  transform: translateX(0);
}
.mask-reveal.bg-green::before {
  background: var(--bg-black);

}


.mask-reveal.is-active::before {
  animation: maskSlideOut 0.8s cubic-bezier(.77, 0, .175, 1) forwards;
}
.animation-set .mask-reveal:nth-child(2).is-active::before {
  animation-delay: 0.2s;
}
.animation-set .mask-reveal:nth-child(3).is-active::before {
  animation-delay: 0.4s;
}
.animation-set .mask-reveal:nth-child(4).is-active::before {
  animation-delay: 0.6s;
}
.animation-set .mask-reveal:nth-child(5).is-active::before {
  animation-delay: 0.8s;
}

.mask-reveal.is-active .mask-reveal__content {
  animation: contentFadeIn 0.5s ease forwards;
  animation-delay: 0.45s;
}
.animation-set .mask-reveal:nth-child(2).is-active .mask-reveal__content{
  animation-delay: 0.65s;
}
.animation-set .mask-reveal:nth-child(3).is-active .mask-reveal__content{
  animation-delay: 0.85s;
}
.animation-set .mask-reveal:nth-child(4).is-active .mask-reveal__content{
  animation-delay: 1.05s;
}
.animation-set .mask-reveal:nth-child(5).is-active .mask-reveal__content{
  animation-delay: 1.25s;
}



@keyframes maskSlideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(105%);
  }
}

@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



/***********************************************************/

@keyframes glitch-outline-noise{

  0%,90%,100%{
    opacity:0;
    transform:translate(0,0);
    clip-path:inset(0 0 0 0);
  }

  91%{
    opacity:1;
    transform:translate(3px,0);
    clip-path:inset(5% 0 70% 0);
  }

  92%{
    transform:translate(-3px,0);
    clip-path:inset(40% 0 30% 0);
  }

  93%{
    transform:translate(2px,0);
    clip-path:inset(70% 0 5% 0);
  }

  94%{
    opacity:0;
    transform:translate(0,0);
    clip-path:inset(0 0 0 0);
  }

}

@keyframes noise-anim {
  0% {
    -webkit-clip-path: inset(83% 0 28% 0);
            clip-path: inset(83% 0 28% 0);
  }
  5% {
    -webkit-clip-path: inset(72% 0 6% 0);
            clip-path: inset(72% 0 6% 0);
  }
  10% {
    -webkit-clip-path: inset(25% 0 75% 0);
            clip-path: inset(25% 0 75% 0);
  }
  15% {
    -webkit-clip-path: inset(53% 0 3% 0);
            clip-path: inset(53% 0 3% 0);
  }
  20% {
    -webkit-clip-path: inset(2% 0 92% 0);
            clip-path: inset(2% 0 92% 0);
  }
  25% {
    -webkit-clip-path: inset(75% 0 55% 0);
            clip-path: inset(75% 0 55% 0);
  }
  30% {
    -webkit-clip-path: inset(90% 0 50% 0);
            clip-path: inset(90% 0 50% 0);
  }
  35% {
    -webkit-clip-path: inset(45% 0 56% 0);
            clip-path: inset(45% 0 56% 0);
  }
  40% {
    -webkit-clip-path: inset(95% 0 38% 0);
            clip-path: inset(95% 0 38% 0);
  }
  45% {
    -webkit-clip-path: inset(59% 0 44% 0);
            clip-path: inset(59% 0 44% 0);
  }
  50% {
    -webkit-clip-path: inset(8% 0 83% 0);
            clip-path: inset(8% 0 83% 0);
  }
  55% {
    -webkit-clip-path: inset(93% 0 30% 0);
            clip-path: inset(93% 0 30% 0);
  }
  60% {
    -webkit-clip-path: inset(9% 0 38% 0);
            clip-path: inset(9% 0 38% 0);
  }
  65% {
    -webkit-clip-path: inset(75% 0 96% 0);
            clip-path: inset(75% 0 96% 0);
  }
  70% {
    -webkit-clip-path: inset(26% 0 97% 0);
            clip-path: inset(26% 0 97% 0);
  }
  75% {
    -webkit-clip-path: inset(86% 0 41% 0);
            clip-path: inset(86% 0 41% 0);
  }
  80% {
    -webkit-clip-path: inset(51% 0 76% 0);
            clip-path: inset(51% 0 76% 0);
  }
  85% {
    -webkit-clip-path: inset(4% 0 56% 0);
            clip-path: inset(4% 0 56% 0);
  }
  90% {
    -webkit-clip-path: inset(58% 0 95% 0);
            clip-path: inset(58% 0 95% 0);
  }
  95% {
    -webkit-clip-path: inset(48% 0 14% 0);
            clip-path: inset(48% 0 14% 0);
  }
  100% {
    -webkit-clip-path: inset(2% 0 14% 0);
            clip-path: inset(2% 0 14% 0);
  }
}
@keyframes noise-anim-2 {
  0% {
    -webkit-clip-path: inset(20% 0 42% 0);
            clip-path: inset(20% 0 42% 0);
  }
  5% {
    -webkit-clip-path: inset(16% 0 89% 0);
            clip-path: inset(16% 0 89% 0);
  }
  10% {
    -webkit-clip-path: inset(52% 0 69% 0);
            clip-path: inset(52% 0 69% 0);
  }
  15% {
    -webkit-clip-path: inset(63% 0 84% 0);
            clip-path: inset(63% 0 84% 0);
  }
  20% {
    -webkit-clip-path: inset(99% 0 54% 0);
            clip-path: inset(99% 0 54% 0);
  }
  25% {
    -webkit-clip-path: inset(70% 0 59% 0);
            clip-path: inset(70% 0 59% 0);
  }
  30% {
    -webkit-clip-path: inset(21% 0 95% 0);
            clip-path: inset(21% 0 95% 0);
  }
  35% {
    -webkit-clip-path: inset(45% 0 32% 0);
            clip-path: inset(45% 0 32% 0);
  }
  40% {
    -webkit-clip-path: inset(80% 0 31% 0);
            clip-path: inset(80% 0 31% 0);
  }
  45% {
    -webkit-clip-path: inset(45% 0 85% 0);
            clip-path: inset(45% 0 85% 0);
  }
  50% {
    -webkit-clip-path: inset(44% 0 11% 0);
            clip-path: inset(44% 0 11% 0);
  }
  55% {
    -webkit-clip-path: inset(28% 0 94% 0);
            clip-path: inset(28% 0 94% 0);
  }
  60% {
    -webkit-clip-path: inset(57% 0 18% 0);
            clip-path: inset(57% 0 18% 0);
  }
  65% {
    -webkit-clip-path: inset(51% 0 12% 0);
            clip-path: inset(51% 0 12% 0);
  }
  70% {
    -webkit-clip-path: inset(56% 0 30% 0);
            clip-path: inset(56% 0 30% 0);
  }
  75% {
    -webkit-clip-path: inset(90% 0 46% 0);
            clip-path: inset(90% 0 46% 0);
  }
  80% {
    -webkit-clip-path: inset(60% 0 2% 0);
            clip-path: inset(60% 0 2% 0);
  }
  85% {
    -webkit-clip-path: inset(43% 0 50% 0);
            clip-path: inset(43% 0 50% 0);
  }
  90% {
    -webkit-clip-path: inset(78% 0 91% 0);
            clip-path: inset(78% 0 91% 0);
  }
  95% {
    -webkit-clip-path: inset(62% 0 24% 0);
            clip-path: inset(62% 0 24% 0);
  }
  100% {
    -webkit-clip-path: inset(90% 0 21% 0);
            clip-path: inset(90% 0 21% 0);
  }
}
/*********************/