@charset "utf-8";
body,div,dl,dd,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0; box-sizing:border-box; -moz-box-sizing:border-box;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style: none;}
ol, ul, li {font-family: inherit;font-size: 100%;font-weight: inherit;font-style: inherit;vertical-align: baseline;white-space: normal;text-align: left;margin: 0;padding: 0;border: 0;outline: 0;background: transparent;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight: normal;}
input:focus{outline:none;}
textarea:focus{outline:none;}
button{appearance: none; background: transparent;}
body{font-family:var(--playfair); min-height:100vh;} :root{
  --maxwidth:1440px;
  --gtime:0.4s;
}


.clearfix:after {visibility: hidden;display: block;font-size: 0; content:' '; clear: both; height: 0;}
.trans{transition:all var(--gtime);}
.transcolor{transition:color var(--gtime), background-color var(--gtime);}
.layer{display:block; position:absolute; top:0; right:0; bottom:0; left:0;}
:root{
 --bg:#333333;
 --bg:oklch(0.321 0.000 89.876 / 1.000);
 --fg:#e5e5e5;
 --fg:oklch(0.923 0.000 89.876 / 1.000);
 --accent:#fc007b;
 --accent:oklch(0.607 0.301 360.000 / 1.000);
 --new_color:#ff0053;
 --new_color:oklch(0.527 1.000 360.000 / 1.000);
}

/*variable font example*/
@font-face {
  font-family: 'FTD';
  src: url('ftd-regular.woff2') format('woff2-variations'),
  url('ftd-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal;
}
/*static font example*/
@font-face {
  font-family: 'oceanside';
  src: url('oceanside_typewriter.woff2') format('woff2'),
  url('oceanside_typewriter.woff2') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/*variable font example*/
@font-face {
  font-family: 'playfair';
  src: url('playfair_display_normal.woff2') format('woff2-variations'),
  url('playfair_display_normal.woff2') format('woff2');
  font-weight: 400; font-style: normal;
}

@font-face {
  font-family: 'playfair';
  src: url('playfair_display_italic.woff2') format('woff2-variations'),
  url('playfair_display_italic.woff2') format('woff2');
  font-weight: 400; font-style: italic;
}


:root{
  --FTD : 'FTD','Arial','Helvetica','Roboto',sans-serif;
  --oceanside : 'oceanside','Arial','Helvetica','Roboto',sans-serif;
  --playfair : 'playfair','Arial','Helvetica','Roboto',sans-serif;
}
div.xrtf{
  --g-fs:clamp(0.8em, 1.2vw, 1.2em);
  --p-fs:0.875em; --p-lh:2.000em;  --p-m:2.000em 0 2.000em 0;
  --h1-fs:2.559em; --h1-lh:1.368em; --h1-m:1.368em 0 0.684em 0;
  --h2-fs:1.789em; --h2-lh:1.956em; --h2-m:1.956em 0 0.978em 0;
  --h3-fs:1.251em; --h3-lh:1.399em; --h3-m:1.399em 0 1.399em 0;
  --h4-fs:0.875em; --h4-lh:2.000em; --h4-m:2.000em 0 2.000em 0;
  --h5-fs:0.875em; --h5-lh:2.000em; --h5-m:2.000em 0 2.000em 0;
  --h6-fs:0.875em; --h6-lh:2.000em; --h6-m:2.000em 0 2.000em 0;
  --p-color:var(--fg);
  --h1-color:var(--fg);
  --h2-color:var(--fg);
  --h3-color:var(--fg);
  --h4-color:var(--fg);
  --h5-color:var(--fg);
  --h6-color:var(--fg);
  --link:var(--fg);
  --visited:var(--fg);
  --hover:var(--fg);
  --active:var(--fg);
  --global-fontfamily:var(--playfair);
  --h1-fontfamily:var(--playfair);
  --h2-fontfamily:var(--playfair);
  --h3-fontfamily:var(--playfair);
  --h4-fontfamily:var(--playfair);
  --h5-fontfamily:var(--playfair);
  --h6-fontfamily:var(--playfair);
  --indent:1em;
}

div.xrtf em{font-weight:normal; font-style:italic;}
div.xrtf i{font-weight:normal; font-style:italic;}
div.xrtf strong{font-variation-settings:'wght' 685;}
div.xrtf em{font-variation-settings:'wght' 400;}
div.xrtf b{font-variation-settings:'wght' 685;}
div.xrtf i{font-variation-settings:'wght' 400;}


div.xrtf{font-size:var(--g-fs); font-family:var(--global-fontfamily); color:var(--p-color); font-variant-ligatures:normal; font-optical-sizing:auto;}
div.xrtf p {font-size: var(--p-fs);  line-height:var(--p-lh);   margin: var(--p-m); hyphens:auto; text-align:justify;}
div.xrtf h1{font-size: var(--h1-fs); line-height: var(--h1-lh); margin: var(--h1-m); color:var(--h1-color); font-family:var(--h1-fontfamily); text-wrap:balance;}
div.xrtf h2{font-size: var(--h2-fs); line-height: var(--h2-lh); margin: var(--h2-m); color:var(--h2-color); font-family:var(--h2-fontfamily); text-wrap:balance;}
div.xrtf h3{font-size: var(--h3-fs); line-height: var(--h3-lh); margin: var(--h3-m); color:var(--h3-color); font-family:var(--h3-fontfamily); text-wrap:balance;}
div.xrtf h4{font-size: var(--h4-fs); line-height: var(--h4-lh); margin: var(--h4-m); color:var(--h4-color); font-family:var(--h4-fontfamily); text-wrap:balance;}
div.xrtf h5{font-size: var(--h5-fs); line-height: var(--h5-lh); margin: var(--h5-m); color:var(--h5-color); font-family:var(--h5-fontfamily); text-wrap:balance;}
div.xrtf h6{font-size: var(--h6-fs); line-height: var(--h6-lh); margin: var(--h6-m); color:var(--h6-color); font-family:var(--h6-fontfamily); text-wrap:balance;}

div.xrtf strong{font-family:var(--strong-fontfamily);}
div.xrtf b{font-family:var(--strong-fontfamily);}
div.xrtf em{font-family:var(--italic-fontfamily);}
div.xrtf i{font-family:var(--italic-fontfamily);}
div.xrtf a:link{color:var(--link);}
div.xrtf a:visited{color:var(--visited);}
div.xrtf a:hover{color:var(--hover);}
div.xrtf a:active{color:var(--active);}

div.xrtf ol {list-style-type: decimal; margin:var(--p-m); margin-left:var(--indent); font-size:var(--p-fs); line-height:var(--p-lh);}
div.xrtf ul {list-style-type: disc; margin:var(--p-m); margin-left:var(--indent); font-size:var(--p-fs); line-height:var(--p-lh);}
div.xrtf li ol{margin:0 0 0 var(--indent); font-size:1em;}
div.xrtf li ul{margin:0 0 0 var(--indent); font-size:1em;}

div.xrtf dl {margin:var(--p-m); font-size:var(--p-fs); line-height:var(--p-lh); color:var(--p-color);}
div.xrtf dt {font-weight:bold;}
div.xrtf dd {margin-left: var(--indent);}

div.xrtf blockquote{margin-left: var(--indent);}
div.xrtf blockquote p:first-child:before{content:open-quote;}
div.xrtf blockquote p:last-child:after{content:close-quote;}

div.xrtf hr{ border:0; height:1px; color:var(--border); background-color:var(--border); margin:-1px auto 0 auto; width:50%; }
div.xrtf hr:after {visibility: hidden;display: block;font-size: 0; content:''; clear: both; height: 0;}

div.xrtf table{width:100%; border-collapse:collapse; margin:var(--p-m); font-size:var(--p-fs); line-height:var(--p-lh);}
div.xrtf table caption{padding:0px 5px 0px 5px; font-weight:bold;}
div.xrtf th,td {padding:0px 5px 0px 5px; vertical-align:top;}
div.xrtf td {position:relative;}
div.xrtf td:before{content:''; display:block; background:var(--p-color); position:absolute; top:0; left:0; right:0; height:1px;}
div.xrtf th {font-weight:bold;}

div.xrtf sup, sub {vertical-align: baseline; position: relative; top: -0.4em;}
div.xrtf sub {top: 0.4em;}

div.xrtf address{font-size:var(--p-fs); line-height:var(--p-lh); margin:var(--p-m);}
div.xrtf pre{font-size:var(--p-fs); line-height:var(--p-lh); margin:var(--p-m);}
div.xslide{position:fixed; inset:0; background:var(--bg); display:grid; grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr); grid-gap:0; padding:0;}
div.xslide div.holder{position:relative; display:grid;}

div.xslide div.img{position:absolute; top:0; left:0; right:0; bottom:0; background-repeat:no-repeat;}
div.xslide div.img.cover{background-size:cover;}
div.xslide div.img.contain{background-size:contain;}
div.xslide div.img.top-left{background-position:0 0;}
div.xslide div.img.top-center{background-position:50% 0;}
div.xslide div.img.top-right{background-position:100% 0;}
div.xslide div.img.center-left{background-position:0 50%;}
div.xslide div.img.center-center{background-position:50% 50%;}
div.xslide div.img.center-right{background-position:100% 50%;}
div.xslide div.img.bottom-left{background-position:0 100%;}
div.xslide div.img.bottom-center{background-position:50% 100%;}
div.xslide div.img.bottom-right{background-position:100% 100%;}
div.xslide div.img.round{aspect-ratio:1 / 1; border-radius:50%; top:50%; left:50%; right:auto; bottom:auto; width:100%; transform:translate(-50%,-50%);}
div.xslide img.cover{object-fit:cover;}
div.xslide img.contain{object-fit:contain;}

div.xslide div.video{position:absolute; top:0; left:0; right:0; bottom:0;}
div.xslide div.video video{width:100%; height:100%;}
div.xslide div.video.cover video{object-fit:cover;}
div.xslide div.video.contain video{object-fit:contain;}
div.xslide div.video.top-left video{object-position:top left;}
div.xslide div.video.top-center video{object-position:top center;}
div.xslide div.video.top-right video{object-position:top right;}
div.xslide div.video.center-left video{object-position:center left;}
div.xslide div.video.center-center video{object-position:center center;}
div.xslide div.video.center-right video{object-position:center right;}
div.xslide div.video.bottom-left video{object-position:bottom left;}
div.xslide div.video.bottom-center video{object-position:bottom center;}
div.xslide div.video.bottom-right video{object-position:bottom right;}


div.xslide div.txt.top-left{align-self:start; justify-self:start; text-align:left;}
div.xslide div.txt.top-center{align-self:start; justify-self:center; text-align:center;}
div.xslide div.txt.top-right{align-self:start; justify-self:end;  text-align:right;}
div.xslide div.txt.center-left{align-self:center; justify-self:start;  text-align:left;}
div.xslide div.txt.center-center{align-self:center; justify-self:center;  text-align:center;}
div.xslide div.txt.center-right{align-self:center; justify-self:end;  text-align:right;}
div.xslide div.txt.bottom-left{align-self:end; justify-self:start; text-align:left;}
div.xslide div.txt.bottom-center{align-self:end; justify-self:center;  text-align:center;}
div.xslide div.txt.bottom-right{align-self:end; justify-self:end;  text-align:right;}
div.xslide div.txt.s14{font-size:14cqmin;}
div.xslide div.txt.s12{font-size:12cqmin;}
div.xslide div.txt.s10{font-size:10cqmin;}
div.xslide div.txt.s8{font-size:8cqmin;}
div.xslide div.txt.s6{font-size:6cqmin;}
div.xslide div.txt.s5{font-size:5cqmin;}
div.xslide div.txt.s4{font-size:4cqmin;}
div.xslide div.txt.s3{font-size:3cqmin;}
div.xslide div.txt.s2{font-size:2cqmin;}
div.xslide div.txt.s1-5{font-size:1.5cqmin;}
div.xslide div.txt.s1{font-size:1cqmin;}
div.xslide div.txt{line-height:2em;}

div.xslide div.txt.white{font-weight:normal; color:#fff;}

div.xslide div.txt.perspective{
  transform:perspective(800px) rotateX(-3deg) rotateY(50deg) !important;
}
div.xslide div.txt.perspective-2{
  transform:perspective(800px) rotateX(-3deg) rotateY(-50deg) !important;
}


.floating{animation:wandering3 5s ease-in-out infinite;}
@keyframes wandering3{
 0%{translate:0px 2px;}
 50%{translate:0px -2px;}
100%{translate:0px 2px;}
}

.floating_2{animation:floating 5s ease-in-out infinite;}
@keyframes floating{
 0%{translate:0px -4px;}
 50%{translate:0px 4px;}
100%{translate:0px -4px;}
}


.fading{animation:fading 1s ease-out;}
@keyframes fading{
  0%{translate:calc(0 - 50px); opacity: 0;}
100%{translate:0 0; opacity 1;}
}

@keyframes deathbutton{
  0%{opacity: 0; visibility:hidden;}
  90%{opacity: 0; visibility:hidden;}
  100%{opacity:1; visibility:visible;}
} 




.rise-shake {
  display: inline-block;
  transition: transform 0.3s ease;
}

.rise-shake:hover {
  animation: jump-shaking 0.83s;
}

@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-9px) }
  35% { transform: translateY(-9px) rotate(17deg) }
  55% { transform: translateY(-9px) rotate(-17deg) }
  65% { transform: translateY(-9px) rotate(17deg) }
  75% { transform: translateY(-9px) rotate(-17deg) }
  100% { transform: translateY(0) rotate(0) }
}

.pulse {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
}

.pulse:hover {
  animation: pulse-animation 1s infinite;
}

@keyframes pulse-animation {
  0% {transform: scale(1);}
  50% {transform: scale(1.05);}
  100% {transform: scale(1);}
}






div.txt.opacity{opacity: 0.3;}

div.fadeout{position:fixed; inset:0; z-index:200000;}
div.fadeout video{width:100%; height:100%; object-fit:cover;}
div.fadein{position:fixed; inset:0; background:#000; z-index:200000;}
div.fadein video{width:100%; height:100%; object-fit:cover;}
div.xhidden{animation:deathbutton 10s;}

/*Text span styles here====================================================================*/
/*shivering*/
span.shivering{color:#f33;}

/*shake-float begin*/
span.shake-float {
  animation: float 0.2s ease-in-out infinite;
  display:inline-block
}
@keyframes float {
  0%, 100% {transform: none;}
  33% {transform: translateY(-1px) rotate(-2deg);}
  66% {transform: translateY(1px) rotate(2deg);}
}
/*shake-float end

/*neon*/
span.neon {
  &::before,
  &::after {content: ""; position: absolute; inset: 0; pointer-events: none;}
}

&::before {
    animation: shimmer 5s infinite linear;
    background: radial-gradient(circle, var(--spotlight-color), transparent 25%)
        0 0 / 25% 25%,
      radial-gradient(circle, var(--spotlight-color), black 25%) 50% 50% / 12.5%
        12.5%;
    inset-block-start: -100%;
    inset-inline-start: -100%;
    mix-blend-mode: color-dodge;
    z-index: 3;
  }

&::after {
    backdrop-filter: blur(1px) brightness(90%) contrast(150%);
    z-index: 4;
  }
}

@keyframes shimmer {
  100% {
    transform: translate3d(50%, 50%, 0);
  }
}





.fire {animation: burning 1s ease-in-out infinite alternate;}

.burn { animation: burning .65s ease-in-out infinite alternate;}
@keyframes burning {
  0% {
    text-shadow:
      0 0 0.375cqmin #fff,
      0.187cqmin -0.187cqmin 0.562cqmin #ddd,
      -0.375cqmin -0.375cqmin 0.75cqmin #bbb,
      0.375cqmin -0.75cqmin 0.937cqmin #999,
      -0.375cqmin -1.125cqmin 1.125cqmin #777,
      0 -1.5cqmin 1.312cqmin #555,
      0.187cqmin -1.687cqmin 1.5cqmin #000;
  }
  100% {
    text-shadow:
      0 0 0.375cqmin #fff,
      0.187cqmin -0.187cqmin 0.562cqmin #fff,
      -0.375cqmin -0.375cqmin 0.75cqmin #ddd,
      0.412cqmin -0.787cqmin 1.125cqmin #bbb,
      -0.412cqmin -1.087cqmin 0.937cqmin #999,
      0 -1.537cqmin 1.5cqmin #777,
      0.187cqmin -1.687cqmin 1.5cqmin #000;
  }
}







/*squiggly*/
/*<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>

    
    <filter id="squiggly-0">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0"/>
      <feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
    </filter>
    <filter id="squiggly-1">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="1"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
    </filter>
    
    <filter id="squiggly-2">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="2"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
    </filter>
    <filter id="squiggly-3">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="3"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="8" />
    </filter>
    
    <filter id="squiggly-4">
      <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="4"/>
<feDisplacementMap in="SourceGraphic" in2="noise" scale="6" />
    </filter>
  </defs> 
</svg>*/

@keyframes squiggly-anim
  0% filter url('#squiggly-0')
  25% filter url('#squiggly-1')
  50% filter url('#squiggly-2')
  75% filter url('#squiggly-3')
  100% filter url('#squiggly-4')
  
$squiggly
  animation squiggly-anim 0.34s linear infinite  
.test
  @extend $squiggly
  display inline-block
  vertical-align middle
  width 100%
  outline none
  text-align center
  line-height 1




.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -0.037cqmin;
  text-shadow: 0.018cqmin 0 blue;
  top: 0;
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  clip: rect(0, 16.875cqmin, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 0.037cqmin;
  text-shadow: -0.018cqmin 0 red;
  
  color: var(--fg);
  background: var(--bg);
  overflow: hidden;
  clip: rect(0, 16.875cqmin, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}


@keyframes noise-anim {
  0% {clip: rect(1.65cqmin, 9999px, 1.837cqmin, 0);}
  5% {clip: rect(0.731cqmin, 9999px, 0.037cqmin, 0);}
  10% {clip: rect(0.206cqmin, 9999px, 0.318cqmin, 0);}
  15% {clip: rect(0.693cqmin, 9999px, 0.412cqmin, 0);}
  20% {clip: rect(1.593cqmin, 9999px, 0.037cqmin, 0);}
  25% {clip: rect(0.843cqmin, 9999px, 0.281cqmin, 0);}
  30% {clip: rect(1.162cqmin, 9999px, 0.675cqmin, 0);}
  35% {clip: rect(1.443cqmin, 9999px, 0.675cqmin, 0);}
  40% {clip: rect(1.481cqmin, 9999px, 1.518cqmin, 0);}
  45% {clip: rect(0.956cqmin, 9999px, 1.537cqmin, 0);}
  50% {clip: rect(1.35cqmin, 9999px, 1.143cqmin, 0);}
  55% {clip: rect(0.918cqmin, 9999px, 1.275cqmin, 0);}
  60% {clip: rect(0.862cqmin, 9999px, 0.356cqmin, 0);}
  65% {clip: rect(1.05cqmin, 9999px, 1.068cqmin, 0);}
  70% {clip: rect(0.356cqmin, 9999px, 1.518cqmin, 0);}
  75% {clip: rect(0.9cqmin, 9999px, 0.825cqmin, 0);}
  80% {clip: rect(0.262cqmin, 9999px, 1.743cqmin, 0);}
  85% {clip: rect(0.45cqmin, 9999px, 0.9cqmin, 0);}
  90% {clip: rect(0.037cqmin, 9999px, 0.881cqmin, 0);}
  95% {clip: rect(1.631cqmin, 9999px, 1.875cqmin, 0);}
  100% {clip: rect(0.937cqmin, 9999px, 1.106cqmin, 0);}
}

 
@keyframes noise-anim-2 {
  0% {clip: rect(1.781cqmin, 9999px, 0.037cqmin, 0);}
  5% {clip: rect(1.781cqmin, 9999px, 1.725cqmin, 0);}
  10% {clip: rect(0.356cqmin, 9999px, 1.612cqmin, 0);}
  15% {clip: rect(0.056cqmin, 9999px, 0.581cqmin, 0);}
  20% {clip: rect(1.312cqmin, 9999px, 0.075cqmin, 0);}
  25% {clip: rect(0.543cqmin, 9999px, 1.031cqmin, 0);}
  30% {clip: rect(1.312cqmin, 9999px, 1.5cqmin, 0);}
  35% {clip: rect(0.018cqmin, 9999px, 0.375cqmin, 0);}
  40% {clip: rect(0.9cqmin, 9999px, 0.975cqmin, 0);}
  45% {clip: rect(0.993cqmin, 9999px, 0.337cqmin, 0);}
  50% {clip: rect(0.018cqmin, 9999px, 0.525cqmin, 0);}
  55% {clip: rect(0.75cqmin, 9999px, 1.012cqmin, 0);}
  60% {clip: rect(1.162cqmin, 9999px, 1.125cqmin, 0);}
  65% {clip: rect(1.762cqmin, 9999px, 0.675cqmin, 0);}
  70% {clip: rect(1.481cqmin, 9999px, 0.3cqmin, 0);}
  75% {clip: rect(1.237cqmin, 9999px, 0.093cqmin, 0);}
  80% {clip: rect(1.181cqmin, 9999px, 0.412cqmin, 0);}
  85% {clip: rect(0.675cqmin, 9999px, 1.068cqmin, 0);}
  90% {clip: rect(0.712cqmin, 9999px, 1.293cqmin, 0);}
  95% {clip: rect(0.712cqmin, 9999px, 1.706cqmin, 0);}
  100% {clip: rect(0.337cqmin, 9999px, 0.9cqmin, 0);}
}


*/


.shaking {
  animation: shake 1s infinite;
  position: relative;
  display: inline-block;
}
@keyframes shake {
  0% {transform: translateX(0);}
  10%, 90% {transform: translateX(-5px);}
  20%, 80% {transform: translateX(5px);}
  30%, 50%, 70% {transform: translateX(-5px);}
  40%, 60% {transform: translateX(5px);}
  100% {transform: translateX(0);}
}


/*glitch 2*/
/*span:first-child {
  margin-right: 20px;
}

span:last-child {
  color: black;
  background-color: black;
  animation: fadeWhite 4s forwards;
  animation-delay: 2s;
  position: relative;
}
span:last-child:after {
  content: "deepend";
  position: absolute;
  left: 2px;
  top: 2px;
  clip: rect(0, 900px, 0, 0);
  background-color: black;
  color: white;
  animation: glitch 3s infinite alternate-reverse;
  animation-delay: 4s;
}
span:last-child:before {
  content: "deepend";
  position: absolute;
  left: -2px;
  top: -2px;
  clip: rect(0, 900px, 0, 0);
  background-color: black;
  color: white;
  animation: glitch 3s infinite alternate-reverse;
  animation-delay: 4s;
}*/

@keyframes fadeWhite {
  100% {
    color: white;
  }
}
@keyframes glitch {
  0% {clip: rect(4px, 9999px, 100px, 0);}
  5% {clip: rect(35px, 9999px, 13px, 0);}
  10% {clip: rect(30px, 9999px, 29px, 0);}
  15% {clip: rect(55px, 9999px, 74px, 0);}
  20% {clip: rect(73px, 9999px, 1px, 0);}
  25% {clip: rect(59px, 9999px, 63px, 0);}
  30% {clip: rect(31px, 9999px, 49px, 0);}
  35% {clip: rect(95px, 9999px, 25px, 0);}
  40% {clip: rect(76px, 9999px, 20px, 0);}
  45% {clip: rect(67px, 9999px, 57px, 0);}
  50% {clip: rect(33px, 9999px, 49px, 0);}
  55% {clip: rect(32px, 9999px, 97px, 0);}
  60% {clip: rect(16px, 9999px, 23px, 0);}
  65% {clip: rect(19px, 9999px, 86px, 0);}
  70% {clip: rect(82px, 9999px, 91px, 0);}
  75% {clip: rect(44px, 9999px, 92px, 0);}
  80% {clip: rect(83px, 9999px, 17px, 0);}
  85% {clip: rect(35px, 9999px, 37px, 0);}
  90% {clip: rect(79px, 9999px, 32px, 0);}
  95% {clip: rect(90px, 9999px, 34px, 0);}
  100% {clip: rect(77px, 9999px, 48px, 0);}
}





/*glitch-3 https://codepen.io/himanishu/pen/LYmNpqv*/
.glitch-3{
  position: relative;
  }

.glitch-3::before, .glitch-3::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.glitch-3::before {
  left:-6px;
  text-shadow: 0.05cqmin 0 var(--fg);
  animation: glitch-effect 3s infinite linear alternate-reverse;
}
.glitch-3::after {
  left:3px;
  text-shadow: -0.05cqmin 0 var(--fg);
  animation: glitch-effect 2s infinite linear alternate-reverse;
}

@keyframes glitch-effect {
  0%   { clip: rect(1.52cqmin, 9999px, 0.71cqmin, 0); }
  5%   { clip: rect(0.34cqmin, 9999px, 1.52cqmin, 0); }
  10%  { clip: rect(1.50cqmin, 9999px, 0.84cqmin, 0); }
  15%  { clip: rect(0.08cqmin, 9999px, 0.24cqmin, 0); }
  20%  { clip: rect(1.46cqmin, 9999px, 1.56cqmin, 0); }
  25%  { clip: rect(1.33cqmin, 9999px, 0.71cqmin, 0); }
  30%  { clip: rect(1.03cqmin, 9999px, 1.39cqmin, 0); }
  35%  { clip: rect(1.48cqmin, 9999px, 1.74cqmin, 0); }
  40%  { clip: rect(1.29cqmin, 9999px, 0.32cqmin, 0); }
  45%  { clip: rect(0.09cqmin, 9999px, 0.17cqmin, 0); }
  50%  { clip: rect(1.22cqmin, 9999px, 1.18cqmin, 0); }
  55%  { clip: rect(1.67cqmin, 9999px, 1.29cqmin, 0); }
  60%  { clip: rect(1.39cqmin, 9999px, 0.75cqmin, 0); }
  65%  { clip: rect(0.26cqmin, 9999px, 0.02cqmin, 0); }
  70%  { clip: rect(0.96cqmin, 9999px, 1.82cqmin, 0); }
  75%  { clip: rect(1.82cqmin, 9999px, 1.69cqmin, 0); }
  80%  { clip: rect(1.16cqmin, 9999px, 1.16cqmin, 0); }
  85%  { clip: rect(1.07cqmin, 9999px, 1.45cqmin, 0); }
  90%  { clip: rect(0.47cqmin, 9999px, 1.05cqmin, 0); }
  95%  { clip: rect(0.45cqmin, 9999px, 0.17cqmin, 0); }
  100% { clip: rect(0.71cqmin, 9999px, 0.49cqmin, 0); }
}