*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'Bungee', cursive;
  font-weight: 700;
  background: #111;
  color: #fff;
  overflow: hidden;
}

/* Background Screen with GlitchClock effects */
.screen {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #111;
}

/* Geometric figure from GlitchClock */
.figure {
  display: block;
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top: 250px solid #fff;
  border-right: 125px solid transparent;
  border-left: 125px solid transparent;
  border-bottom: 0 solid transparent;
}

.figure:before {
  display: block;
  content: '';
  position: absolute;
  z-index: 99;
  width: 0;
  height: 0;
  top: -242px;
  left: -112px;
  margin: auto;
  border-top: 225px solid #111;
  border-right: 112px solid transparent;
  border-left: 112px solid transparent;
  border-bottom: 0 solid transparent;
}

.figure-mask {
  display: block;
  position: absolute;
  z-index: 2;
  width: 0;
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-top: 250px solid transparent;
  border-right: 125px solid #111;
  border-left: 125px solid #111;
  border-bottom: 0 solid transparent;
}

/* Hero content container */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

/* Small text "I AM" */
.small-text {
  font-family: "Bungee", cursive;
  font-size: 24px;
  color: #ffffff;
  position: absolute;
  top: 50px;
  left: 50px;
  text-transform: uppercase;
  opacity: 0.8;
}

/* Text styling like GlitchClock */
.glitch__title {
  font-family: "Bungee", cursive;
  font-size: 150px;
  color: #ffffff;
  position: relative;
  text-transform: uppercase;
  cursor: default;
  line-height: 1;
  transition: font-family 0.1s ease;
}

/* Handwritten font for TheYoungAnimator */
.glitch__title.handwritten {
  font-family: "Dancing Script", cursive;
  font-weight: 700;
  text-transform: none;
  font-size: 125px;
}

/* GlitchClock text glitch effects */
.glitch .glitch__title:before,
.glitch .glitch__title:after {
  display: block;
  content: attr(data-text);
  position: absolute;
  top: 0;
  color: #fff;
  background: #111;
  overflow: hidden;
  width: 100%;
  height: 100%;
  clip: rect(0, 9999px, 0, 0);
}

.glitch .glitch__title:before {
  left: -2px;
  text-shadow: 2px 0 #00f;
  animation: c2-burst 3.5s infinite linear;
}

.glitch .glitch__title:after {
  left: 3px;
  text-shadow: -2px 0 #f00;
  animation: c1-burst 4s infinite linear;
}

/* Glitch background effects from GlitchClock */
.glitch:before {
  position: absolute;
  z-index: 999999;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: bg-move-burst 5s linear infinite;
  background-size: 100% 8px;
  background-image: linear-gradient(0, rgba(255,255,255,0.04) 10%, transparent 10%, transparent 50%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.04) 60%, transparent 60%, transparent);
}

.glitch .figure,
.glitch .figure-mask {
  transform: skewX(0deg) scaleY(1);
  animation: tr-bag-burst 6s linear infinite;
}

.glitch .hero-content {
  transform: skewX(0deg) scaleY(1);
  animation: clock-bag-burst 5.5s linear infinite;
}

/* GlitchClock text glitch animations */
@keyframes c1 {
  0% { clip: rect(1px, 9999px, 55px, 0); }
  5% { clip: rect(35px, 9999px, 17px, 0); }
  10% { clip: rect(71px, 9999px, 47px, 0); }
  15% { clip: rect(88px, 9999px, 4px, 0); }
  20% { clip: rect(14px, 9999px, 32px, 0); }
  25% { clip: rect(66px, 9999px, 40px, 0); }
  30% { clip: rect(70px, 9999px, 17px, 0); }
  35% { clip: rect(11px, 9999px, 39px, 0); }
  40% { clip: rect(50px, 9999px, 91px, 0); }
  45% { clip: rect(40px, 9999px, 20px, 0); }
  50% { clip: rect(26px, 9999px, 49px, 0); }
  55% { clip: rect(37px, 9999px, 26px, 0); }
  60% { clip: rect(13px, 9999px, 5px, 0); }
  65% { clip: rect(82px, 9999px, 61px, 0); }
  70% { clip: rect(6px, 9999px, 74px, 0); }
  75% { clip: rect(21px, 9999px, 69px, 0); }
  80% { clip: rect(78px, 9999px, 24px, 0); }
  85% { clip: rect(35px, 9999px, 35px, 0); }
  90% { clip: rect(96px, 9999px, 75px, 0); }
  95% { clip: rect(76px, 9999px, 24px, 0); }
  100% { clip: rect(72px, 9999px, 80px, 0); }
}

@keyframes c2 {
  0% { clip: rect(92px, 9999px, 24px, 0); }
  5% { clip: rect(73px, 9999px, 39px, 0); }
  10% { clip: rect(39px, 9999px, 83px, 0); }
  15% { clip: rect(30px, 9999px, 65px, 0); }
  20% { clip: rect(9px, 9999px, 91px, 0); }
  25% { clip: rect(25px, 9999px, 14px, 0); }
  30% { clip: rect(95px, 9999px, 68px, 0); }
  35% { clip: rect(26px, 9999px, 28px, 0); }
  40% { clip: rect(83px, 9999px, 59px, 0); }
  45% { clip: rect(76px, 9999px, 55px, 0); }
  50% { clip: rect(23px, 9999px, 40px, 0); }
  55% { clip: rect(17px, 9999px, 9px, 0); }
  60% { clip: rect(57px, 9999px, 27px, 0); }
  65% { clip: rect(56px, 9999px, 86px, 0); }
  70% { clip: rect(65px, 9999px, 50px, 0); }
  75% { clip: rect(73px, 9999px, 12px, 0); }
  80% { clip: rect(48px, 9999px, 66px, 0); }
  85% { clip: rect(51px, 9999px, 26px, 0); }
  90% { clip: rect(60px, 9999px, 8px, 0); }
  95% { clip: rect(19px, 9999px, 60px, 0); }
  100% { clip: rect(73px, 9999px, 53px, 0); }
  23% { transform: scaleX(0.8); }
}

/* Background movement animation */
@keyframes bg-move {
  0% { background-position: 0 0; }
  100% { background-position: 0 -32px; }
}

/* Burst-style animations - fast glitches with long pauses */
@keyframes c1-burst {
  0% { clip: rect(0, 9999px, 0, 0); }
  12% { clip: rect(0, 9999px, 0, 0); }
  12.5% { clip: rect(1px, 9999px, 55px, 0); }
  13% { clip: rect(35px, 9999px, 17px, 0); }
  13.5% { clip: rect(71px, 9999px, 47px, 0); }
  14% { clip: rect(88px, 9999px, 4px, 0); }
  14.5% { clip: rect(14px, 9999px, 32px, 0); }
  15% { clip: rect(66px, 9999px, 40px, 0); }
  15.5% { clip: rect(70px, 9999px, 17px, 0); }
  16% { clip: rect(11px, 9999px, 39px, 0); }
  16.5% { clip: rect(50px, 9999px, 91px, 0); }
  17% { clip: rect(0, 9999px, 0, 0); }
  32% { clip: rect(0, 9999px, 0, 0); }
  32.5% { clip: rect(40px, 9999px, 20px, 0); }
  33% { clip: rect(26px, 9999px, 49px, 0); }
  33.5% { clip: rect(37px, 9999px, 26px, 0); }
  34% { clip: rect(13px, 9999px, 5px, 0); }
  34.5% { clip: rect(82px, 9999px, 61px, 0); }
  35% { clip: rect(6px, 9999px, 74px, 0); }
  35.5% { clip: rect(21px, 9999px, 69px, 0); }
  36% { clip: rect(78px, 9999px, 24px, 0); }
  36.5% { clip: rect(35px, 9999px, 35px, 0); }
  37% { clip: rect(0, 9999px, 0, 0); }
  52% { clip: rect(0, 9999px, 0, 0); }
  52.5% { clip: rect(96px, 9999px, 75px, 0); }
  53% { clip: rect(76px, 9999px, 24px, 0); }
  53.5% { clip: rect(72px, 9999px, 80px, 0); }
  54% { clip: rect(1px, 9999px, 55px, 0); }
  54.5% { clip: rect(35px, 9999px, 17px, 0); }
  55% { clip: rect(71px, 9999px, 47px, 0); }
  55.5% { clip: rect(88px, 9999px, 4px, 0); }
  56% { clip: rect(14px, 9999px, 32px, 0); }
  56.5% { clip: rect(66px, 9999px, 40px, 0); }
  57% { clip: rect(0, 9999px, 0, 0); }
  75% { clip: rect(0, 9999px, 0, 0); }
  75.5% { clip: rect(70px, 9999px, 17px, 0); }
  76% { clip: rect(11px, 9999px, 39px, 0); }
  76.5% { clip: rect(50px, 9999px, 91px, 0); }
  77% { clip: rect(40px, 9999px, 20px, 0); }
  77.5% { clip: rect(26px, 9999px, 49px, 0); }
  78% { clip: rect(37px, 9999px, 26px, 0); }
  78.5% { clip: rect(13px, 9999px, 5px, 0); }
  79% { clip: rect(0, 9999px, 0, 0); }
  100% { clip: rect(0, 9999px, 0, 0); }
}

@keyframes c2-burst {
  0% { clip: rect(0, 9999px, 0, 0); }
  15% { clip: rect(0, 9999px, 0, 0); }
  15.5% { clip: rect(92px, 9999px, 24px, 0); }
  16% { clip: rect(73px, 9999px, 39px, 0); }
  16.5% { clip: rect(39px, 9999px, 83px, 0); }
  17% { clip: rect(30px, 9999px, 65px, 0); }
  17.5% { clip: rect(9px, 9999px, 91px, 0); }
  18% { clip: rect(25px, 9999px, 14px, 0); }
  18.5% { clip: rect(95px, 9999px, 68px, 0); }
  19% { clip: rect(26px, 9999px, 28px, 0); }
  19.5% { clip: rect(83px, 9999px, 59px, 0); }
  20% { clip: rect(0, 9999px, 0, 0); }
  35% { clip: rect(0, 9999px, 0, 0); }
  35.5% { clip: rect(76px, 9999px, 55px, 0); }
  36% { clip: rect(23px, 9999px, 40px, 0); }
  36.5% { clip: rect(17px, 9999px, 9px, 0); }
  37% { clip: rect(57px, 9999px, 27px, 0); }
  37.5% { clip: rect(56px, 9999px, 86px, 0); }
  38% { clip: rect(65px, 9999px, 50px, 0); }
  38.5% { clip: rect(73px, 9999px, 12px, 0); }
  39% { clip: rect(48px, 9999px, 66px, 0); }
  39.5% { clip: rect(51px, 9999px, 26px, 0); }
  40% { clip: rect(0, 9999px, 0, 0); }
  58% { clip: rect(0, 9999px, 0, 0); }
  58.5% { clip: rect(60px, 9999px, 8px, 0); }
  59% { clip: rect(19px, 9999px, 60px, 0); }
  59.5% { clip: rect(73px, 9999px, 53px, 0); }
  60% { clip: rect(92px, 9999px, 24px, 0); }
  60.5% { clip: rect(73px, 9999px, 39px, 0); }
  61% { clip: rect(39px, 9999px, 83px, 0); }
  61.5% { clip: rect(30px, 9999px, 65px, 0); }
  62% { clip: rect(9px, 9999px, 91px, 0); }
  62.5% { clip: rect(25px, 9999px, 14px, 0); }
  63% { clip: rect(0, 9999px, 0, 0); }
  80% { clip: rect(0, 9999px, 0, 0); }
  80.5% { clip: rect(95px, 9999px, 68px, 0); }
  81% { clip: rect(26px, 9999px, 28px, 0); }
  81.5% { clip: rect(83px, 9999px, 59px, 0); }
  82% { clip: rect(76px, 9999px, 55px, 0); }
  82.5% { clip: rect(23px, 9999px, 40px, 0); }
  83% { clip: rect(17px, 9999px, 9px, 0); }
  83.5% { clip: rect(57px, 9999px, 27px, 0); }
  84% { clip: rect(0, 9999px, 0, 0); }
  100% { clip: rect(0, 9999px, 0, 0); }
}

@keyframes bg-move-burst {
  0% { background-position: 0 0; }
  18% { background-position: 0 0; }
  18.5% { background-position: 0 -8px; }
  19% { background-position: 0 -16px; }
  19.5% { background-position: 0 -24px; }
  20% { background-position: 0 -32px; }
  20.5% { background-position: 0 -40px; }
  21% { background-position: 0 -32px; }
  21.5% { background-position: 0 -24px; }
  22% { background-position: 0 -16px; }
  22.5% { background-position: 0 -8px; }
  23% { background-position: 0 0; }
  40% { background-position: 0 0; }
  40.5% { background-position: 0 -8px; }
  41% { background-position: 0 -16px; }
  41.5% { background-position: 0 -24px; }
  42% { background-position: 0 -32px; }
  42.5% { background-position: 0 -40px; }
  43% { background-position: 0 -32px; }
  43.5% { background-position: 0 -24px; }
  44% { background-position: 0 -16px; }
  44.5% { background-position: 0 -8px; }
  45% { background-position: 0 0; }
  62% { background-position: 0 0; }
  62.5% { background-position: 0 -8px; }
  63% { background-position: 0 -16px; }
  63.5% { background-position: 0 -24px; }
  64% { background-position: 0 -32px; }
  64.5% { background-position: 0 -40px; }
  65% { background-position: 0 -32px; }
  65.5% { background-position: 0 -24px; }
  66% { background-position: 0 -16px; }
  66.5% { background-position: 0 -8px; }
  67% { background-position: 0 0; }
  85% { background-position: 0 0; }
  85.5% { background-position: 0 -8px; }
  86% { background-position: 0 -16px; }
  86.5% { background-position: 0 -24px; }
  87% { background-position: 0 -32px; }
  87.5% { background-position: 0 -40px; }
  88% { background-position: 0 -32px; }
  88.5% { background-position: 0 -24px; }
  89% { background-position: 0 -16px; }
  89.5% { background-position: 0 -8px; }
  90% { background-position: 0 0; }
  100% { background-position: 0 0; }
}

@keyframes clock-bag-burst {
  0% { transform: translate(0, 0); }
  18% { transform: translate(0, 0); }
  18.2% { transform: translate(1px, 1px); }
  18.4% { transform: translate(1px, 0px); }
  18.6% { transform: translate(1px, 1px); }
  18.8% { transform: translate(0px, 0px); }
  19% { transform: translate(1px, 1px); }
  19.2% { transform: translate(1px, 0px); }
  19.4% { transform: translate(0px, 1px); }
  19.6% { transform: translate(1px, 0px); }
  19.8% { transform: translate(1px, 1px); }
  20% { transform: translate(0px, 0px); }
  20.2% { transform: translate(0px, 1px); }
  20.4% { transform: translate(0px, 1px); }
  20.6% { transform: translate(0px, 1px); }
  20.8% { transform: translate(1px, 1px); }
  21% { transform: translate(1px, 1px); }
  21.2% { transform: translate(1px, 1px); }
  21.4% { transform: translate(1px, 1px); }
  21.6% { transform: translate(0px, 1px); }
  21.8% { transform: translate(1px, 1px); }
  22% { transform: translate(0, 0); }
  45% { transform: translate(0, 0); }
  45.2% { transform: translate(1px, 1px); }
  45.4% { transform: translate(1px, 1px); }
  45.6% { transform: translate(0px, 1px); }
  45.8% { transform: translate(1px, 1px); }
  46% { transform: translate(0px, 1px); }
  46.2% { transform: translate(1px, 1px); }
  46.4% { transform: translate(1px, 1px); }
  46.6% { transform: translate(1px, 1px); }
  46.8% { transform: translate(1px, 1px); }
  47% { transform: translate(1px, 0px); }
  47.2% { transform: translate(1px, 1px); }
  47.4% { transform: translate(0px, 0px); }
  47.6% { transform: translate(1px, 1px); }
  47.8% { transform: translate(1px, 0px); }
  48% { transform: translate(0, 0); }
  72% { transform: translate(0, 0); }
  72.2% { transform: translate(0px, 1px); }
  72.4% { transform: translate(1px, 0px); }
  72.6% { transform: translate(1px, 1px); }
  72.8% { transform: translate(1px, 1px); }
  73% { transform: translate(1px, 1px); }
  73.2% { transform: translate(1px, 1px); }
  73.4% { transform: translate(1px, 1px); }
  73.6% { transform: translate(1px, 1px); }
  73.8% { transform: translate(0px, 1px); }
  74% { transform: translate(1px, 1px); }
  74.2% { transform: translate(1px, 0px); }
  74.4% { transform: translate(1px, 1px); }
  74.6% { transform: translate(1px, 1px); }
  74.8% { transform: translate(1px, 1px); }
  75% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

@keyframes tr-bag-burst {
  0% { transform: translate(0, 0); }
  22% { transform: translate(0, 0); }
  22.2% { transform: translate(1px, 0px); }
  22.4% { transform: translate(1px, 1px); }
  22.6% { transform: translate(1px, 1px); }
  22.8% { transform: translate(0px, 1px); }
  23% { transform: translate(1px, 0px); }
  23.2% { transform: translate(1px, 0px); }
  23.4% { transform: translate(1px, 0px); }
  23.6% { transform: translate(0px, 1px); }
  23.8% { transform: translate(0px, 1px); }
  24% { transform: translate(0px, 0px); }
  24.2% { transform: translate(1px, 1px); }
  24.4% { transform: translate(0px, 1px); }
  24.6% { transform: translate(1px, 1px); }
  24.8% { transform: translate(0px, 0px); }
  25% { transform: translate(1px, 1px); }
  25.2% { transform: translate(0px, 0px); }
  25.4% { transform: translate(0px, 1px); }
  25.6% { transform: translate(1px, 1px); }
  25.8% { transform: translate(1px, 0px); }
  26% { transform: translate(0, 0); }
  50% { transform: translate(0, 0); }
  50.2% { transform: translate(1px, 1px); }
  50.4% { transform: translate(1px, 1px); }
  50.6% { transform: translate(0px, 1px); }
  50.8% { transform: translate(1px, 0px); }
  51% { transform: translate(1px, 0px); }
  51.2% { transform: translate(1px, 0px); }
  51.4% { transform: translate(0px, 1px); }
  51.6% { transform: translate(0px, 1px); }
  51.8% { transform: translate(0px, 0px); }
  52% { transform: translate(1px, 1px); }
  52.2% { transform: translate(0px, 1px); }
  52.4% { transform: translate(1px, 1px); }
  52.6% { transform: translate(0px, 0px); }
  52.8% { transform: translate(1px, 1px); }
  53% { transform: translate(0px, 0px); }
  53.2% { transform: translate(0px, 1px); }
  53.4% { transform: translate(1px, 1px); }
  53.6% { transform: translate(1px, 0px); }
  53.8% { transform: translate(0px, 1px); }
  54% { transform: translate(0, 0); }
  78% { transform: translate(0, 0); }
  78.2% { transform: translate(1px, 1px); }
  78.4% { transform: translate(0px, 1px); }
  78.6% { transform: translate(1px, 1px); }
  78.8% { transform: translate(0px, 0px); }
  79% { transform: translate(1px, 1px); }
  79.2% { transform: translate(0px, 0px); }
  79.4% { transform: translate(0px, 1px); }
  79.6% { transform: translate(1px, 1px); }
  79.8% { transform: translate(1px, 0px); }
  80% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

/* Reduced shake animation */
@keyframes clock-bag {
  0% { transform: translate(1px, 1px); }
  2% { transform: translate(1px, 0px); }
  4% { transform: translate(1px, 1px); }
  6% { transform: translate(0px, 0px); }
  8% { transform: translate(1px, 1px); }
  10% { transform: translate(1px, 0px); }
  12% { transform: translate(0px, 1px); }
  14% { transform: translate(1px, 0px); }
  16% { transform: translate(1px, 1px); }
  18% { transform: translate(0px, 0px); }
  20% { transform: translate(0px, 1px); }
  22% { transform: translate(0px, 1px); }
  24% { transform: translate(0px, 1px); }
  26% { transform: translate(1px, 1px); }
  28% { transform: translate(1px, 1px); }
  30% { transform: translate(1px, 1px); }
  32% { transform: translate(1px, 1px); }
  34% { transform: translate(0px, 1px); }
  36% { transform: translate(1px, 1px); }
  38% { transform: translate(1px, 1px); }
  40% { transform: translate(0px, 1px); }
  42% { transform: translate(1px, 0px); }
  44% { transform: translate(1px, 0px); }
  46% { transform: translate(1px, 1px); }
  48% { transform: translate(0px, 0px); }
  50% { transform: translate(1px, 1px); }
  52% { transform: translate(1px, 0px); }
  54% { transform: translate(1px, 1px); }
  56% { transform: translate(0px, 1px); }
  58% { transform: translate(0px, 1px); }
  60% { transform: translate(1px, 1px); }
  62% { transform: translate(1px, 1px); }
  64% { transform: translate(1px, 1px); }
  66% { transform: translate(0px, 1px); }
  68% { transform: translate(1px, 1px); }
  70% { transform: translate(0px, 1px); }
  72% { transform: translate(1px, 1px); }
  74% { transform: translate(1px, 1px); }
  76% { transform: translate(1px, 1px); }
  78% { transform: translate(1px, 1px); }
  80% { transform: translate(1px, 0px); }
  82% { transform: translate(0px, 1px); }
  84% { transform: translate(1px, 1px); }
  86% { transform: translate(1px, 1px); }
  88% { transform: translate(0px, 1px); }
  90% { transform: translate(0px, 1px); }
  92% { transform: translate(1px, 1px); }
  94% { transform: translate(1px, 0px); }
  96% { transform: translate(1px, 1px); }
  98% { transform: translate(1px, 1px); }
  100% { transform: translate(1px, 1px); }
}

/* Reduced triangle shake animation */
@keyframes tr-bag {
  0% { transform: translate(1px, 0px); }
  2% { transform: translate(1px, 1px); }
  4% { transform: translate(1px, 1px); }
  6% { transform: translate(0px, 1px); }
  8% { transform: translate(1px, 0px); }
  10% { transform: translate(1px, 0px); }
  12% { transform: translate(1px, 0px); }
  14% { transform: translate(0px, 1px); }
  16% { transform: translate(0px, 1px); }
  18% { transform: translate(0px, 0px); }
  20% { transform: translate(1px, 1px); }
  22% { transform: translate(0px, 1px); }
  24% { transform: translate(1px, 1px); }
  26% { transform: translate(0px, 0px); }
  28% { transform: translate(1px, 1px); }
  30% { transform: translate(0px, 0px); }
  32% { transform: translate(0px, 1px); }
  34% { transform: translate(1px, 1px); }
  36% { transform: translate(1px, 1px); }
  38% { transform: translate(0px, 1px); }
  40% { transform: translate(1px, 1px); }
  42% { transform: translate(1px, 0px); }
  44% { transform: translate(0px, 0px); }
  46% { transform: translate(0px, 0px); }
  48% { transform: translate(0px, 1px); }
  50% { transform: translate(0px, 0px); }
  52% { transform: translate(0px, 1px); }
  54% { transform: translate(0px, 0px); }
  56% { transform: translate(1px, 0px); }
  58% { transform: translate(1px, 0px); }
  60% { transform: translate(1px, 0px); }
  62% { transform: translate(1px, 1px); }
  64% { transform: translate(1px, 1px); }
  66% { transform: translate(0px, 0px); }
  68% { transform: translate(1px, 0px); }
  70% { transform: translate(0px, 0px); }
  72% { transform: translate(0px, 0px); }
  74% { transform: translate(1px, 0px); }
  76% { transform: translate(1px, 1px); }
  78% { transform: translate(1px, 0px); }
  80% { transform: translate(1px, 1px); }
  82% { transform: translate(1px, 1px); }
  84% { transform: translate(0px, 0px); }
  86% { transform: translate(0px, 1px); }
  88% { transform: translate(0px, 1px); }
  90% { transform: translate(0px, 1px); }
  92% { transform: translate(0px, 1px); }
  94% { transform: translate(1px, 1px); }
  96% { transform: translate(0px, 1px); }
  98% { transform: translate(1px, 0px); }
  100% { transform: translate(0px, 0px); }
}

/* Fast massive glitch effects for text switching */
.massive-glitch .glitch__title {
  animation: massive-glitch-anim 0.2s linear;
}

.massive-glitch .glitch__title:before {
  animation: massive-glitch-before 0.15s linear infinite;
}

.massive-glitch .glitch__title:after {
  animation: massive-glitch-after 0.18s linear infinite;
}

/* Stack glitch effect variant - ultra fast */
.stack-glitch .glitch__title {
  animation: stack-glitch-anim 0.1s cubic-bezier(.46,.29,0,1.24);
}

.stack-glitch .glitch__title:before {
  animation: stack-glitch-before 0.1s cubic-bezier(.46,.29,0,1.24);
}

.stack-glitch .glitch__title:after {
  animation: stack-glitch-after 0.1s cubic-bezier(.46,.29,0,1.24);
}

/* Experimental glitch effect variant */
.experimental-glitch .glitch__title {
  animation: experimental-glitch-anim 0.3s linear;
}

.experimental-glitch .glitch__title:before {
  text-shadow: -5px 0 magenta;
  animation: experimental-glitch-before 0.3s linear;
}

.experimental-glitch .glitch__title:after {
  text-shadow: -5px 0 lightgreen;
  animation: experimental-glitch-after 0.3s linear;
}

.massive-glitch .figure,
.massive-glitch .figure-mask {
  animation: massive-triangle-glitch 0.2s linear;
}

.massive-glitch:before {
  animation: massive-bg-glitch 0.1s linear infinite;
}

/* Triangle pointing upward when showing TheYoungAnimator */
.triangle-up .figure {
  border-top: 0 solid transparent;
  border-bottom: 250px solid #fff;
  border-right: 125px solid transparent;
  border-left: 125px solid transparent;
}

.triangle-up .figure:before {
  top: 17px;
  left: -112px;
  border-top: 0 solid transparent;
  border-bottom: 225px solid #111;
  border-right: 112px solid transparent;
  border-left: 112px solid transparent;
}

.triangle-up .figure-mask {
  border-top: 0 solid transparent;
  border-bottom: 250px solid transparent;
  border-right: 125px solid #111;
  border-left: 125px solid #111;
}

@keyframes massive-glitch-anim {
  0% { transform: translate(0) scaleX(1) scaleY(1); }
  5% { transform: translate(-8px, 4px) scaleX(0.8) scaleY(1.3); }
  10% { transform: translate(6px, -3px) scaleX(1.2) scaleY(0.7); }
  15% { transform: translate(-4px, 6px) scaleX(0.9) scaleY(1.4); }
  20% { transform: translate(7px, -2px) scaleX(1.3) scaleY(0.6); }
  25% { transform: translate(-5px, 3px) scaleX(0.7) scaleY(1.2); }
  30% { transform: translate(8px, -4px) scaleX(1.1) scaleY(0.8); }
  35% { transform: translate(-6px, 5px) scaleX(0.85) scaleY(1.5); }
  40% { transform: translate(4px, -6px) scaleX(1.4) scaleY(0.5); }
  45% { transform: translate(-7px, 2px) scaleX(0.6) scaleY(1.3); }
  50% { transform: translate(5px, -1px) scaleX(1.2) scaleY(0.9); }
  55% { transform: translate(-3px, 4px) scaleX(0.9) scaleY(1.1); }
  60% { transform: translate(6px, -5px) scaleX(1.3) scaleY(0.7); }
  65% { transform: translate(-8px, 3px) scaleX(0.8) scaleY(1.4); }
  70% { transform: translate(4px, -2px) scaleX(1.1) scaleY(0.8); }
  75% { transform: translate(-2px, 5px) scaleX(0.95) scaleY(1.2); }
  80% { transform: translate(7px, -3px) scaleX(1.2) scaleY(0.9); }
  85% { transform: translate(-5px, 1px) scaleX(0.85) scaleY(1.1); }
  90% { transform: translate(3px, -4px) scaleX(1.05) scaleY(0.95); }
  95% { transform: translate(-1px, 2px) scaleX(0.98) scaleY(1.02); }
  100% { transform: translate(0) scaleX(1) scaleY(1); }
}

@keyframes massive-glitch-before {
  0% { clip: rect(10px, 9999px, 30px, 0); transform: translate(-5px, 0); }
  10% { clip: rect(50px, 9999px, 80px, 0); transform: translate(8px, 0); }
  20% { clip: rect(20px, 9999px, 60px, 0); transform: translate(-3px, 0); }
  30% { clip: rect(70px, 9999px, 100px, 0); transform: translate(6px, 0); }
  40% { clip: rect(5px, 9999px, 40px, 0); transform: translate(-7px, 0); }
  50% { clip: rect(90px, 9999px, 120px, 0); transform: translate(4px, 0); }
  60% { clip: rect(30px, 9999px, 70px, 0); transform: translate(-6px, 0); }
  70% { clip: rect(60px, 9999px, 90px, 0); transform: translate(5px, 0); }
  80% { clip: rect(15px, 9999px, 50px, 0); transform: translate(-4px, 0); }
  90% { clip: rect(80px, 9999px, 110px, 0); transform: translate(3px, 0); }
  100% { clip: rect(25px, 9999px, 65px, 0); transform: translate(-2px, 0); }
}

@keyframes massive-glitch-after {
  0% { clip: rect(40px, 9999px, 70px, 0); transform: translate(4px, 0); }
  15% { clip: rect(80px, 9999px, 110px, 0); transform: translate(-6px, 0); }
  30% { clip: rect(10px, 9999px, 45px, 0); transform: translate(7px, 0); }
  45% { clip: rect(60px, 9999px, 95px, 0); transform: translate(-5px, 0); }
  60% { clip: rect(25px, 9999px, 55px, 0); transform: translate(8px, 0); }
  75% { clip: rect(75px, 9999px, 105px, 0); transform: translate(-4px, 0); }
  90% { clip: rect(35px, 9999px, 65px, 0); transform: translate(3px, 0); }
  100% { clip: rect(50px, 9999px, 85px, 0); transform: translate(-2px, 0); }
}

@keyframes massive-triangle-glitch {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  10% { transform: translate(-10px, 5px) rotate(-5deg) scale(1.1); }
  20% { transform: translate(8px, -3px) rotate(3deg) scale(0.9); }
  30% { transform: translate(-6px, 7px) rotate(-2deg) scale(1.2); }
  40% { transform: translate(12px, -4px) rotate(4deg) scale(0.8); }
  50% { transform: translate(-8px, 2px) rotate(-3deg) scale(1.05); }
  60% { transform: translate(5px, -6px) rotate(2deg) scale(0.95); }
  70% { transform: translate(-4px, 8px) rotate(-4deg) scale(1.1); }
  80% { transform: translate(7px, -2px) rotate(1deg) scale(0.9); }
  90% { transform: translate(-3px, 4px) rotate(-1deg) scale(1.02); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}

@keyframes massive-bg-glitch {
  0% { background-position: 0 0; opacity: 0.8; }
  25% { background-position: -20px -10px; opacity: 1; }
  50% { background-position: 15px -5px; opacity: 0.9; }
  75% { background-position: -10px -15px; opacity: 1; }
  100% { background-position: 0 -8px; opacity: 0.8; }
}

/* Intense glitch effects - even more dramatic */
.intense-glitch .glitch__title {
  animation: intense-glitch-anim 0.5s linear;
}

.intense-glitch .glitch__title:before {
  animation: intense-glitch-before 0.3s linear infinite;
}

.intense-glitch .glitch__title:after {
  animation: intense-glitch-after 0.4s linear infinite;
}

.intense-glitch .figure,
.intense-glitch .figure-mask {
  animation: intense-triangle-glitch 0.5s linear;
}

.intense-glitch:before {
  animation: intense-bg-glitch 0.2s linear infinite;
}

.intense-glitch .hero-content {
  animation: intense-content-glitch 0.5s linear;
}

@keyframes intense-glitch-anim {
  0% { transform: translate(0) scaleX(1) scaleY(1) rotate(0deg); }
  3% { transform: translate(-15px, 8px) scaleX(0.6) scaleY(1.8) rotate(-2deg); }
  6% { transform: translate(12px, -6px) scaleX(1.5) scaleY(0.4) rotate(1deg); }
  9% { transform: translate(-8px, 12px) scaleX(0.8) scaleY(1.6) rotate(-3deg); }
  12% { transform: translate(18px, -4px) scaleX(1.7) scaleY(0.3) rotate(2deg); }
  15% { transform: translate(-10px, 6px) scaleX(0.5) scaleY(1.9) rotate(-1deg); }
  18% { transform: translate(14px, -8px) scaleX(1.4) scaleY(0.6) rotate(3deg); }
  21% { transform: translate(-12px, 10px) scaleX(0.7) scaleY(1.7) rotate(-2deg); }
  24% { transform: translate(8px, -12px) scaleX(1.8) scaleY(0.2) rotate(1deg); }
  27% { transform: translate(-16px, 4px) scaleX(0.4) scaleY(2.0) rotate(-3deg); }
  30% { transform: translate(10px, -2px) scaleX(1.3) scaleY(0.7) rotate(2deg); }
  35% { transform: translate(-6px, 8px) scaleX(0.9) scaleY(1.4) rotate(-1deg); }
  40% { transform: translate(12px, -10px) scaleX(1.6) scaleY(0.5) rotate(3deg); }
  45% { transform: translate(-14px, 6px) scaleX(0.6) scaleY(1.8) rotate(-2deg); }
  50% { transform: translate(8px, -4px) scaleX(1.2) scaleY(0.8) rotate(1deg); }
  55% { transform: translate(-4px, 10px) scaleX(0.85) scaleY(1.5) rotate(-3deg); }
  60% { transform: translate(16px, -6px) scaleX(1.7) scaleY(0.4) rotate(2deg); }
  65% { transform: translate(-18px, 8px) scaleX(0.5) scaleY(1.9) rotate(-1deg); }
  70% { transform: translate(6px, -8px) scaleX(1.4) scaleY(0.6) rotate(3deg); }
  75% { transform: translate(-8px, 12px) scaleX(0.75) scaleY(1.6) rotate(-2deg); }
  80% { transform: translate(14px, -2px) scaleX(1.5) scaleY(0.7) rotate(1deg); }
  85% { transform: translate(-10px, 4px) scaleX(0.8) scaleY(1.3) rotate(-3deg); }
  90% { transform: translate(6px, -6px) scaleX(1.2) scaleY(0.9) rotate(2deg); }
  95% { transform: translate(-2px, 8px) scaleX(0.95) scaleY(1.1) rotate(-1deg); }
  100% { transform: translate(0) scaleX(1) scaleY(1) rotate(0deg); }
}

@keyframes intense-glitch-before {
  0% { clip: rect(5px, 9999px, 25px, 0); transform: translate(-10px, 0) scaleX(0.8); }
  8% { clip: rect(45px, 9999px, 75px, 0); transform: translate(15px, 0) scaleX(1.3); }
  16% { clip: rect(15px, 9999px, 55px, 0); transform: translate(-8px, 0) scaleX(0.6); }
  24% { clip: rect(65px, 9999px, 95px, 0); transform: translate(12px, 0) scaleX(1.5); }
  32% { clip: rect(2px, 9999px, 35px, 0); transform: translate(-12px, 0) scaleX(0.7); }
  40% { clip: rect(85px, 9999px, 115px, 0); transform: translate(8px, 0) scaleX(1.2); }
  48% { clip: rect(25px, 9999px, 65px, 0); transform: translate(-15px, 0) scaleX(0.5); }
  56% { clip: rect(55px, 9999px, 85px, 0); transform: translate(10px, 0) scaleX(1.4); }
  64% { clip: rect(10px, 9999px, 45px, 0); transform: translate(-6px, 0) scaleX(0.9); }
  72% { clip: rect(75px, 9999px, 105px, 0); transform: translate(14px, 0) scaleX(1.1); }
  80% { clip: rect(35px, 9999px, 70px, 0); transform: translate(-9px, 0) scaleX(0.8); }
  88% { clip: rect(20px, 9999px, 60px, 0); transform: translate(7px, 0) scaleX(1.3); }
  96% { clip: rect(50px, 9999px, 90px, 0); transform: translate(-4px, 0) scaleX(0.95); }
  100% { clip: rect(30px, 9999px, 70px, 0); transform: translate(-3px, 0) scaleX(1); }
}

@keyframes intense-glitch-after {
  0% { clip: rect(35px, 9999px, 65px, 0); transform: translate(8px, 0) scaleX(1.2); }
  10% { clip: rect(75px, 9999px, 105px, 0); transform: translate(-12px, 0) scaleX(0.6); }
  20% { clip: rect(5px, 9999px, 40px, 0); transform: translate(16px, 0) scaleX(1.6); }
  30% { clip: rect(55px, 9999px, 90px, 0); transform: translate(-8px, 0) scaleX(0.7); }
  40% { clip: rect(20px, 9999px, 50px, 0); transform: translate(14px, 0) scaleX(1.4); }
  50% { clip: rect(70px, 9999px, 100px, 0); transform: translate(-10px, 0) scaleX(0.5); }
  60% { clip: rect(30px, 9999px, 60px, 0); transform: translate(6px, 0) scaleX(1.3); }
  70% { clip: rect(45px, 9999px, 80px, 0); transform: translate(-14px, 0) scaleX(0.8); }
  80% { clip: rect(10px, 9999px, 45px, 0); transform: translate(12px, 0) scaleX(1.5); }
  90% { clip: rect(60px, 9999px, 95px, 0); transform: translate(-6px, 0) scaleX(0.9); }
  100% { clip: rect(25px, 9999px, 65px, 0); transform: translate(4px, 0) scaleX(1.1); }
}

@keyframes intense-triangle-glitch {
  0% { transform: translate(0, 0) rotate(0deg) scale(1) skew(0deg); }
  5% { transform: translate(-20px, 10px) rotate(-8deg) scale(1.3) skew(-5deg); }
  10% { transform: translate(15px, -8px) rotate(6deg) scale(0.7) skew(3deg); }
  15% { transform: translate(-12px, 15px) rotate(-4deg) scale(1.5) skew(-2deg); }
  20% { transform: translate(25px, -6px) rotate(10deg) scale(0.6) skew(4deg); }
  25% { transform: translate(-18px, 8px) rotate(-6deg) scale(1.2) skew(-3deg); }
  30% { transform: translate(10px, -12px) rotate(3deg) scale(0.9) skew(2deg); }
  35% { transform: translate(-8px, 18px) rotate(-9deg) scale(1.4) skew(-4deg); }
  40% { transform: translate(22px, -4px) rotate(7deg) scale(0.8) skew(5deg); }
  45% { transform: translate(-15px, 12px) rotate(-5deg) scale(1.1) skew(-1deg); }
  50% { transform: translate(8px, -10px) rotate(4deg) scale(1.0) skew(3deg); }
  55% { transform: translate(-10px, 14px) rotate(-7deg) scale(1.3) skew(-2deg); }
  60% { transform: translate(18px, -8px) rotate(5deg) scale(0.85) skew(4deg); }
  65% { transform: translate(-22px, 6px) rotate(-3deg) scale(1.2) skew(-3deg); }
  70% { transform: translate(12px, -14px) rotate(8deg) scale(0.9) skew(2deg); }
  75% { transform: translate(-6px, 16px) rotate(-4deg) scale(1.1) skew(-1deg); }
  80% { transform: translate(16px, -2px) rotate(2deg) scale(0.95) skew(3deg); }
  85% { transform: translate(-14px, 10px) rotate(-6deg) scale(1.05) skew(-2deg); }
  90% { transform: translate(8px, -6px) rotate(3deg) scale(1.02) skew(1deg); }
  95% { transform: translate(-4px, 8px) rotate(-2deg) scale(1.01) skew(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1) skew(0deg); }
}

@keyframes intense-bg-glitch {
  0% { background-position: 0 0; opacity: 0.7; }
  12% { background-position: -30px -15px; opacity: 1; }
  25% { background-position: 25px -8px; opacity: 0.8; }
  37% { background-position: -15px -25px; opacity: 1; }
  50% { background-position: 20px -12px; opacity: 0.9; }
  62% { background-position: -25px -5px; opacity: 1; }
  75% { background-position: 10px -20px; opacity: 0.8; }
  87% { background-position: -20px -10px; opacity: 1; }
  100% { background-position: 0 -15px; opacity: 0.7; }
}

@keyframes intense-content-glitch {
  0% { transform: translate(0, 0) rotate(0deg); }
  8% { transform: translate(-5px, 3px) rotate(-1deg); }
  16% { transform: translate(4px, -2px) rotate(0.5deg); }
  24% { transform: translate(-3px, 4px) rotate(-0.8deg); }
  32% { transform: translate(6px, -1px) rotate(1deg); }
  40% { transform: translate(-2px, 2px) rotate(-0.5deg); }
  48% { transform: translate(3px, -3px) rotate(0.8deg); }
  56% { transform: translate(-4px, 1px) rotate(-0.3deg); }
  64% { transform: translate(2px, -4px) rotate(0.6deg); }
  72% { transform: translate(-1px, 3px) rotate(-0.4deg); }
  80% { transform: translate(5px, -2px) rotate(0.7deg); }
  88% { transform: translate(-3px, 1px) rotate(-0.2deg); }
  96% { transform: translate(1px, -1px) rotate(0.3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* Stack glitch animations */
@keyframes stack-glitch-anim {
  0% {
    opacity: 0;
    transform: translateX(-15px);
    text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
  }
  60% {
    opacity: 0.5;
    transform: translateX(15px);
  }
  80% {
    transform: translateX(0);
    opacity: 1;
    text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
  }
  100% {
    text-shadow: none;
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes stack-glitch-before {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    text-shadow: -3px 2px 0 red;
    clip-path: inset(0 0 70% 0);
  }
  60% {
    opacity: 0.7;
    transform: translateX(10px);
    clip-path: inset(0 0 50% 0);
  }
  80% {
    transform: translateX(4px);
    opacity: 1;
    text-shadow: 3px -2px 0 red;
    clip-path: inset(0 0 60% 0);
  }
  100% {
    text-shadow: 2px 0 #00f;
    opacity: 1;
    transform: translateX(-2px);
    clip-path: inset(0 0 50% 0);
  }
}

@keyframes stack-glitch-after {
  0% {
    opacity: 0;
    transform: translateX(10px);
    text-shadow: 3px -2px 0 blue;
    clip-path: inset(30% 0 0 0);
  }
  60% {
    opacity: 0.7;
    transform: translateX(-10px);
    clip-path: inset(50% 0 0 0);
  }
  80% {
    transform: translateX(-4px);
    opacity: 1;
    text-shadow: -3px 2px 0 blue;
    clip-path: inset(40% 0 0 0);
  }
  100% {
    text-shadow: -2px 0 #f00;
    opacity: 1;
    transform: translateX(3px);
    clip-path: inset(50% 0 0 0);
  }
}

/* Experimental glitch animations */
@keyframes experimental-glitch-anim {
  0% { transform: rotateX(0deg) skewX(0deg); }
  10% { transform: rotateX(10deg) skewX(90deg); }
  20% { transform: rotateX(-5deg) skewX(-45deg); }
  30% { transform: rotateX(8deg) skewX(70deg); }
  40% { transform: rotateX(-3deg) skewX(-30deg); }
  50% { transform: rotateX(12deg) skewX(85deg); }
  60% { transform: rotateX(-8deg) skewX(-60deg); }
  70% { transform: rotateX(5deg) skewX(40deg); }
  80% { transform: rotateX(-10deg) skewX(-80deg); }
  90% { transform: rotateX(3deg) skewX(20deg); }
  100% { transform: rotateX(0deg) skewX(0deg); }
}

@keyframes experimental-glitch-before {
  0% { clip-path: inset(46px 0 34px 0); }
  10% { clip-path: inset(93px 0 6px 0); }
  20% { clip-path: inset(18px 0 30px 0); }
  30% { clip-path: inset(95px 0 2px 0); }
  40% { clip-path: inset(58px 0 4px 0); }
  50% { clip-path: inset(9px 0 34px 0); }
  60% { clip-path: inset(58px 0 24px 0); }
  70% { clip-path: inset(50px 0 6px 0); }
  80% { clip-path: inset(100px 0 1px 0); }
  90% { clip-path: inset(99px 0 1px 0); }
  100% { clip-path: inset(20px 0 75px 0); }
}

@keyframes experimental-glitch-after {
  0% { clip-path: inset(36px 0 28px 0); }
  10% { clip-path: inset(39px 0 28px 0); }
  20% { clip-path: inset(23px 0 31px 0); }
  30% { clip-path: inset(19px 0 58px 0); }
  40% { clip-path: inset(63px 0 13px 0); }
  50% { clip-path: inset(53px 0 1px 0); }
  60% { clip-path: inset(26px 0 65px 0); }
  70% { clip-path: inset(24px 0 52px 0); }
  80% { clip-path: inset(88px 0 8px 0); }
  90% { clip-path: inset(32px 0 2px 0); }
  100% { clip-path: inset(68px 0 10px 0); }
}

/* Responsive design */
@media (max-width: 768px) {
  .glitch__title {
    font-size: 80px;
  }
  
  .glitch__title.handwritten {
    font-size: 70px;
  }
  
  .small-text {
    font-size: 20px;
    top: 30px;
    left: 30px;
  }
  
  .figure {
    border-top: 150px solid #fff;
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;
  }
  
  .figure:before {
    top: -145px;
    left: -67px;
    border-top: 135px solid #111;
    border-right: 67px solid transparent;
    border-left: 67px solid transparent;
  }
  
  .figure-mask {
    border-top: 150px solid transparent;
    border-right: 75px solid #111;
    border-left: 75px solid #111;
  }
  
  /* Responsive upward triangle */
  .triangle-up .figure {
    border-bottom: 150px solid #fff;
    border-right: 75px solid transparent;
    border-left: 75px solid transparent;
  }
  
  .triangle-up .figure:before {
    top: 10px;
    left: -67px;
    border-bottom: 135px solid #111;
    border-right: 67px solid transparent;
    border-left: 67px solid transparent;
  }
  
  .triangle-up .figure-mask {
    border-bottom: 150px solid transparent;
    border-right: 75px solid #111;
    border-left: 75px solid #111;
  }
}

@media (max-width: 480px) {
  .glitch__title {
    font-size: 50px;
  }
  
  .glitch__title.handwritten {
    font-size: 45px;
  }
  
  .small-text {
    font-size: 16px;
    top: 20px;
    left: 20px;
  }
  
  .figure {
    border-top: 120px solid #fff;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
  }
  
  .figure:before {
    top: -116px;
    left: -54px;
    border-top: 108px solid #111;
    border-right: 54px solid transparent;
    border-left: 54px solid transparent;
  }
  
  .figure-mask {
    border-top: 120px solid transparent;
    border-right: 60px solid #111;
    border-left: 60px solid #111;
  }
  
  /* Responsive upward triangle */
  .triangle-up .figure {
    border-bottom: 120px solid #fff;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
  }
  
  .triangle-up .figure:before {
    top: 8px;
    left: -54px;
    border-bottom: 108px solid #111;
    border-right: 54px solid transparent;
    border-left: 54px solid transparent;
  }
  
  .triangle-up .figure-mask {
    border-bottom: 120px solid transparent;
    border-right: 60px solid #111;
    border-left: 60px solid #111;
  }
}