/* @use 'variables' as *; */
/*----------------------------------------
	animation keyframes
------------------------------------------*/
@-webkit-keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* animation: rotation 60s linear infinite; */
@-webkit-keyframes rotation_r {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes rotation_r {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
/* animation: rotation 60s linear infinite; */
@-webkit-keyframes hor_move_l {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes hor_move_l {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* animation: hor_move_l 60s linear infinite; */
@-webkit-keyframes hor_move_r {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes hor_move_r {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
/* animation: hor_move_r 60s linear infinite; */
@-webkit-keyframes ver_move_t {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes ver_move_t {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}
/* animation: ver_move_t 60s linear infinite; */
@-webkit-keyframes ver_move_b {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes ver_move_b {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
/* animation: ver_move_b 60s linear infinite; */
@-webkit-keyframes fade_out {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(1);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes fade_out {
  0% {
    filter: blur(0);
    opacity: 1;
  }
  100% {
    filter: blur(1);
    opacity: 0;
    visibility: hidden;
  }
}
/* animation: fade_out 0.4s ease forwards; */
@keyframes glitch_reveal {
  0%   { opacity: 0;    transform: translateX(0);     filter: blur(16px) drop-shadow(-6px 0 #ff2b6b) drop-shadow(6px 0 #29e0ff);  clip-path: inset(0 0 35% 0);   animation-timing-function: steps(1, end); }
  8%   { opacity: 0.15; transform: translateX(9px);  filter: blur(15px) drop-shadow(7px 0 #ff2b6b) drop-shadow(-7px 0 #29e0ff); clip-path: inset(30% 0 4% 0);  animation-timing-function: steps(1, end); }
  16%  { opacity: 0.55; transform: translateX(-8px); filter: blur(12px) drop-shadow(-5px 0 #ff2b6b) drop-shadow(5px 0 #29e0ff); clip-path: inset(6% 0 26% 0); animation-timing-function: steps(1, end); }
  24%  { opacity: 0.2;  transform: translateX(7px);   filter: blur(13px) drop-shadow(6px 0 #ff2b6b) drop-shadow(-6px 0 #29e0ff); clip-path: inset(34% 0 5% 0);  animation-timing-function: steps(1, end); }
  34%  { opacity: 0.7;  transform: translateX(-5px); filter: blur(8px) drop-shadow(-4px 0 #ff2b6b) drop-shadow(4px 0 #29e0ff);  clip-path: inset(13% 0 17% 0); animation-timing-function: steps(1, end); }
  44%  { opacity: 0.35; transform: translateX(6px);  filter: blur(9px) drop-shadow(4px 0 #ff2b6b) drop-shadow(-4px 0 #29e0ff);  clip-path: inset(26% 0 9% 0); animation-timing-function: steps(1, end); }
  58%  { opacity: 0.9;  transform: translateX(-4px); filter: blur(3px) drop-shadow(-2px 0 #ff2b6b) drop-shadow(2px 0 #29e0ff);  clip-path: inset(4% 0 4% 0);   animation-timing-function: ease-out; }
  70%  { opacity: 0.95; transform: translateX(3px);  filter: blur(1.5px) drop-shadow(1px 0 #ff2b6b) drop-shadow(-1px 0 #29e0ff); clip-path: inset(2% 0 2% 0); animation-timing-function: ease-out; }
  82%  { opacity: 0.97; transform: translateX(-2px); filter: blur(0.5px) drop-shadow(-1px 0 #ff2b6b) drop-shadow(1px 0 #29e0ff); clip-path: inset(1% 0 1% 0); animation-timing-function: ease-out; }
  92%  { opacity: 1;    transform: translateX(1); filter: blur(0.5px) drop-shadow(-1px 0 #ff2b6b) drop-shadow(1px 0 #29e0ff);  clip-path: inset(0 0 0 0);   animation-timing-function: ease-out; }
  100% { opacity: 1;    transform: translateX(0);       filter: blur(0) drop-shadow(0 0 transparent);                              clip-path: inset(0 0 0 0); }
}
/* animation: glitch_reveal 1s linear forwards; -- full glitch: use on elements with no hover transform/filter of their own */
@keyframes glitch_reveal_scale {
  0%   { opacity: 0;    transform: translateX(0);     clip-path: inset(0 0 35% 0);   animation-timing-function: steps(1, end); }
  8%   { opacity: 0.15; transform: translateX(9px);  clip-path: inset(30% 0 4% 0);  animation-timing-function: steps(1, end); }
  16%  { opacity: 0.55; transform: translateX(-8px); clip-path: inset(6% 0 26% 0); animation-timing-function: steps(1, end); }
  24%  { opacity: 0.2;  transform: translateX(7px);   clip-path: inset(34% 0 5% 0);  animation-timing-function: steps(1, end); }
  34%  { opacity: 0.7;  transform: translateX(-5px); clip-path: inset(13% 0 17% 0); animation-timing-function: steps(1, end); }
  44%  { opacity: 0.35; transform: translateX(6px);  clip-path: inset(26% 0 9% 0); animation-timing-function: steps(1, end); }
  58%  { opacity: 0.9;  transform: translateX(-2px); clip-path: inset(4% 0 4% 0);   animation-timing-function: ease-out; }
  70%  { opacity: 0.95; transform: translateX(0px);  clip-path: inset(2% 0 2% 0); animation-timing-function: ease-out; }
  82%  { opacity: 0.97; transform: translateX(0); clip-path: inset(1% 0 1% 0); animation-timing-function: ease-out; }
  92%  { opacity: 1;    transform: translateX(0);     clip-path: inset(0 0 0 0);   animation-timing-function: ease-out; }
  100% { opacity: 1;    transform: translateX(0);       clip-path: inset(0 0 0 0); }
}
/* animation: glitch_reveal_scale 1s linear forwards; -- keeps filter free: use where the element's own hover animates filter */
@keyframes glitch_reveal_fade {
  0%   { opacity: 0;    filter: blur(16px) drop-shadow(-6px 0 #ff2b6b) drop-shadow(6px 0 #29e0ff);  clip-path: inset(0 0 35% 0);   animation-timing-function: steps(1, end); }
  8%   { opacity: 0.15; filter: blur(15px) drop-shadow(7px 0 #ff2b6b) drop-shadow(-7px 0 #29e0ff); clip-path: inset(30% 0 4% 0);  animation-timing-function: steps(1, end); }
  16%  { opacity: 0.55; filter: blur(12px) drop-shadow(-5px 0 #ff2b6b) drop-shadow(5px 0 #29e0ff); clip-path: inset(6% 0 26% 0); animation-timing-function: steps(1, end); }
  24%  { opacity: 0.2;  filter: blur(13px) drop-shadow(6px 0 #ff2b6b) drop-shadow(-6px 0 #29e0ff); clip-path: inset(34% 0 5% 0);  animation-timing-function: steps(1, end); }
  34%  { opacity: 0.7;  filter: blur(8px) drop-shadow(-4px 0 #ff2b6b) drop-shadow(4px 0 #29e0ff);  clip-path: inset(13% 0 17% 0); animation-timing-function: steps(1, end); }
  44%  { opacity: 0.35; filter: blur(9px) drop-shadow(4px 0 #ff2b6b) drop-shadow(-4px 0 #29e0ff);  clip-path: inset(26% 0 9% 0); animation-timing-function: steps(1, end); }
  58%  { opacity: 0.9;  filter: blur(3px) drop-shadow(-2px 0 #ff2b6b) drop-shadow(2px 0 #29e0ff);  clip-path: inset(4% 0 4% 0);   animation-timing-function: ease-out; }
  70%  { opacity: 0.95; filter: blur(1.5px) drop-shadow(1px 0 #ff2b6b) drop-shadow(-1px 0 #29e0ff); clip-path: inset(2% 0 2% 0); animation-timing-function: ease-out; }
  82%  { opacity: 0.97; filter: blur(0.5px) drop-shadow(-1px 0 #ff2b6b) drop-shadow(1px 0 #29e0ff); clip-path: inset(1% 0 1% 0); animation-timing-function: ease-out; }
  92%  { opacity: 1;    filter: blur(0.5px) drop-shadow(-1px 0 #ff2b6b) drop-shadow(1px 0 #29e0ff); clip-path: inset(0 0 0 0);   animation-timing-function: ease-out; }
  100% { opacity: 1;    filter: blur(0) drop-shadow(0 0 transparent);                              clip-path: inset(0 0 0 0); }
}
/* animation: glitch_reveal_fade 1s linear forwards; -- keeps transform free: use where the element's own hover/animation moves transform */
@keyframes glitch_reveal_clip {
  0%   { opacity: 0;    clip-path: inset(0 0 35% 0);   animation-timing-function: steps(1, end); }
  8%   { opacity: 0.15; clip-path: inset(30% 0 4% 0);  animation-timing-function: steps(1, end); }
  16%  { opacity: 0.55; clip-path: inset(6% 0 26% 0); animation-timing-function: steps(1, end); }
  24%  { opacity: 0.2;  clip-path: inset(34% 0 5% 0);  animation-timing-function: steps(1, end); }
  34%  { opacity: 0.7;  clip-path: inset(13% 0 17% 0); animation-timing-function: steps(1, end); }
  44%  { opacity: 0.35; clip-path: inset(26% 0 9% 0); animation-timing-function: steps(1, end); }
  58%  { opacity: 0.9;  clip-path: inset(4% 0 4% 0);   animation-timing-function: ease-out; }
  70%  { opacity: 0.95; clip-path: inset(2% 0 2% 0); animation-timing-function: ease-out; }
  82%  { opacity: 0.97; clip-path: inset(1% 0 1% 0); animation-timing-function: ease-out; }
  92%  { opacity: 1;    clip-path: inset(0 0 0 0);   animation-timing-function: ease-out; }
  100% { opacity: 1;    clip-path: inset(0 0 0 0); }
}
/* animation: glitch_reveal_clip 1s linear forwards; -- keeps both transform and filter free: use where the element owns both (e.g. its own resting transform + hover filter) */
@keyframes clip_release {
  to { clip-path: none; }
}
/* animation: clip_release 1ms linear 1s forwards; -- pair with any glitch_reveal* animation (delay = its duration) so children that later move/scale outside the box aren't clipped by the reveal's leftover inset(0) */
/*----------------------------------------
	common animation
------------------------------------------*/
/*----------------------------------------
	pages animation
------------------------------------------*/
/*# sourceMappingURL=animation.css.map */