/* RGB Channel Separation */
.glitch-rgb {
  position: relative;
}

.glitch-rgb::before,
.glitch-rgb::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-white);
  clip: rect(0, 0, 0, 0);
  /* Ensure identical text rendering */
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  white-space: inherit;
  word-break: inherit;
  overflow-wrap: inherit;
}

/* Red channel (using orange) shifted right */
.glitch-rgb::after {
  left: 3px;
  text-shadow: -2px 0 var(--color-primary);
  animation: glitch-rgb-red 2s infinite linear alternate-reverse;
}

/* Cyan channel (using teal) shifted left */
.glitch-rgb::before {
  left: -3px;
  text-shadow: 3px 0 var(--color-secondary);
  animation: glitch-rgb-cyan 2s infinite linear alternate-reverse;
}

/* Keyframes */
@keyframes glitch-rgb-red {
  0% {
    clip: rect(20px, 920px, 51px, 0);
    transform: skew(0.8deg);
  }
  10% {
    clip: rect(83px, 920px, 105px, 0);
    transform: skew(0.4deg);
  }
  20% {
    clip: rect(105px, 920px, 56px, 0);
    transform: skew(0.2deg);
  }
  30% {
    clip: rect(56px, 920px, 97px, 0);
    transform: skew(0.9deg);
  }
  40% {
    clip: rect(103px, 920px, 53px, 0);
    transform: skew(0.1deg);
  }
  50% {
    clip: rect(69px, 920px, 46px, 0);
    transform: skew(0.7deg);
  }
  60% {
    clip: rect(12px, 920px, 15px, 0);
    transform: skew(0.3deg);
  }
  70% {
    clip: rect(28px, 920px, 106px, 0);
    transform: skew(0.5deg);
  }
  80% {
    clip: rect(98px, 920px, 63px, 0);
    transform: skew(0.6deg);
  }
  90% {
    clip: rect(11px, 920px, 44px, 0);
    transform: skew(0.2deg);
  }
  100% {
    clip: rect(66px, 920px, 91px, 0);
    transform: skew(0deg);
  }
}

@keyframes glitch-rgb-cyan {
  0% {
    clip: rect(86px, 920px, 25px, 0);
    transform: skew(-0.3deg);
  }
  10% {
    clip: rect(54px, 920px, 43px, 0);
    transform: skew(-0.7deg);
  }
  20% {
    clip: rect(10px, 920px, 86px, 0);
    transform: skew(-0.1deg);
  }
  30% {
    clip: rect(61px, 920px, 24px, 0);
    transform: skew(-0.8deg);
  }
  40% {
    clip: rect(115px, 920px, 8px, 0);
    transform: skew(-0.4deg);
  }
  50% {
    clip: rect(6px, 920px, 65px, 0);
    transform: skew(-0.6deg);
  }
  60% {
    clip: rect(83px, 920px, 99px, 0);
    transform: skew(-0.2deg);
  }
  70% {
    clip: rect(37px, 920px, 55px, 0);
    transform: skew(-0.5deg);
  }
  80% {
    clip: rect(68px, 920px, 46px, 0);
    transform: skew(-0.3deg);
  }
  90% {
    clip: rect(47px, 920px, 31px, 0);
    transform: skew(-0.7deg);
  }
  100% {
    clip: rect(93px, 920px, 53px, 0);
    transform: skew(0deg);
  }
}

/* =============================================== */
/* =============================================== */
/* =============================================== */

/* SVG VERSION */

.he-logo {
  margin-bottom: 30px;
  width: 150px;
  display: none;
}
@media (max-width: 480px) {
  .he-logo {
    display: inline-block;
  }
  body.homepage .h-title {
    display: none;
  }
}

/* SVG colors */
.he-logo [class^="base-slice"] {
  fill: var(--color-dark);
}
.he-logo [class^="orange"] {
  fill: var(--color-primary);
}
.he-logo [class^="teal"] {
  fill: var(--color-secondary);
}

/* Optional: different flicker durations for realism */
.he-logo [class^="orange-slice"] {
  animation-duration: 0.12s;
}
.he-logo [class^="teal-slice"] {
  animation-duration: 0.18s;
}
.he-logo [class^="base-slice"] {
  animation-duration: 0.14s;
}

/* Base / Black slices */
.base-slice1 {
  animation: flicker 0.15s infinite alternate;
}
.base-slice2 {
  animation: glitch-slide2 2s infinite linear alternate-reverse,
    flicker 0.14s infinite alternate;
}
.base-slice3 {
  animation: glitch-slide3 2s infinite linear alternate-reverse,
    flicker 0.16s infinite alternate;
}
.base-slice4 {
  animation: flicker 0.13s infinite alternate;
}
.base-slice5 {
  animation: flicker 0.15s infinite alternate;
}
.base-slice6 {
  animation: flicker 0.14s infinite alternate;
}
.base-slice7 {
  animation: glitch-slide7 2s infinite linear alternate-reverse,
    flicker 0.16s infinite alternate;
}
.base-slice8 {
  animation: flicker 0.13s infinite alternate;
}
.base-slice9 {
  animation: glitch-slide9 2s infinite linear alternate-reverse,
    flicker 0.15s infinite alternate;
}
.base-slice10 {
  animation: flicker 0.14s infinite alternate;
}
.base-slice11 {
  animation: flicker 0.16s infinite alternate;
}
.base-slice12 {
  animation: glitch-slide12 2s infinite linear alternate-reverse,
    flicker 0.13s infinite alternate;
}
.base-slice13 {
  animation: flicker 0.15s infinite alternate;
}

/* Orange / Red slices */
.orange-slice1 {
  animation: flicker 0.12s infinite alternate;
}
.orange-slice2 {
  animation: glitch-slide3 2s infinite linear alternate-reverse,
    flicker 0.13s infinite alternate;
}
.orange-slice3 {
  animation: glitch-slide4 2s infinite linear alternate-reverse,
    flicker 0.14s infinite alternate;
}
.orange-slice4 {
  animation: flicker 0.12s infinite alternate;
}
.orange-slice5 {
  animation: flicker 0.15s infinite alternate;
}
.orange-slice6 {
  animation: flicker 0.13s infinite alternate;
}
.orange-slice7 {
  animation: glitch-slide8 2s infinite linear alternate-reverse,
    flicker 0.14s infinite alternate;
}
.orange-slice8 {
  animation: flicker 0.12s infinite alternate;
}
.orange-slice9 {
  animation: glitch-slide10 2s infinite linear alternate-reverse,
    flicker 0.15s infinite alternate;
}
.orange-slice10 {
  animation: flicker 0.13s infinite alternate;
}
.orange-slice11 {
  animation: flicker 0.14s infinite alternate;
}
.orange-slice12 {
  animation: glitch-slide13 2s infinite linear alternate-reverse,
    flicker 0.12s infinite alternate;
}
.orange-slice13 {
  animation: flicker 0.15s infinite alternate;
}

/* Cyan / Teal slices */
.teal-slice1 {
  animation: flicker 0.18s infinite alternate;
}
.teal-slice2 {
  animation: glitch-slide4 2s infinite linear alternate-reverse,
    flicker 0.16s infinite alternate;
}
.teal-slice3 {
  animation: glitch-slide5 2s infinite linear alternate-reverse,
    flicker 0.17s infinite alternate;
}
.teal-slice4 {
  animation: flicker 0.15s infinite alternate;
}
.teal-slice5 {
  animation: flicker 0.18s infinite alternate;
}
.teal-slice6 {
  animation: flicker 0.16s infinite alternate;
}
.teal-slice7 {
  animation: glitch-slide9 2s infinite linear alternate-reverse,
    flicker 0.17s infinite alternate;
}
.teal-slice8 {
  animation: flicker 0.15s infinite alternate;
}
.teal-slice9 {
  animation: glitch-slide11 2s infinite linear alternate-reverse,
    flicker 0.18s infinite alternate;
}
.teal-slice10 {
  animation: flicker 0.16s infinite alternate;
}
.teal-slice11 {
  animation: flicker 0.17s infinite alternate;
}
.teal-slice12 {
  animation: glitch-slide1 2s infinite linear alternate-reverse,
    flicker 0.15s infinite alternate;
}
.teal-slice13 {
  animation: flicker 0.18s infinite alternate;
}

.glitch-paused {
  animation: none !important; /* stop existing animations */
  transform: translateX(0) !important; /* reset to neutral */
  opacity: 1 !important; /* optional: reset flicker */
}

/* Keyframes for 13 jerky horizontal glitch slides */
@keyframes glitch-slide1 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(12px);
  }
  20% {
    transform: translateX(-8px);
  }
  30% {
    transform: translateX(15px);
  }
  40% {
    transform: translateX(-10px);
  }
}
@keyframes glitch-slide2 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(14px);
  }
  30% {
    transform: translateX(-12px);
  }
  40% {
    transform: translateX(8px);
  }
}
@keyframes glitch-slide3 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(8px);
  }
  20% {
    transform: translateX(-15px);
  }
  30% {
    transform: translateX(10px);
  }
  40% {
    transform: translateX(-8px);
  }
}
@keyframes glitch-slide4 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-12px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-15px);
  }
  40% {
    transform: translateX(12px);
  }
}
@keyframes glitch-slide5 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(14px);
  }
  20% {
    transform: translateX(-10px);
  }
  30% {
    transform: translateX(12px);
  }
  40% {
    transform: translateX(-14px);
  }
}
@keyframes glitch-slide6 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-8px);
  }
  20% {
    transform: translateX(12px);
  }
  30% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(7px);
  }
}
@keyframes glitch-slide7 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(10px);
  }
  20% {
    transform: translateX(-12px);
  }
  30% {
    transform: translateX(14px);
  }
  40% {
    transform: translateX(-11px);
  }
}
@keyframes glitch-slide8 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-15px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-12px);
  }
  40% {
    transform: translateX(13px);
  }
}
@keyframes glitch-slide9 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(12px);
  }
  20% {
    transform: translateX(-9px);
  }
  30% {
    transform: translateX(11px);
  }
  40% {
    transform: translateX(-13px);
  }
}
@keyframes glitch-slide10 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-11px);
  }
  20% {
    transform: translateX(14px);
  }
  30% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(10px);
  }
}
@keyframes glitch-slide11 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(9px);
  }
  20% {
    transform: translateX(-12px);
  }
  30% {
    transform: translateX(14px);
  }
  40% {
    transform: translateX(-7px);
  }
}
@keyframes glitch-slide12 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-13px);
  }
  20% {
    transform: translateX(10px);
  }
  30% {
    transform: translateX(-14px);
  }
  40% {
    transform: translateX(12px);
  }
}
@keyframes glitch-slide13 {
  0%,
  5%,
  50%,
  100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(15px);
  }
  20% {
    transform: translateX(-11px);
  }
  30% {
    transform: translateX(13px);
  }
  40% {
    transform: translateX(-9px);
  }
}

/* Flicker keyframes (shared by all slices) */
@keyframes flicker {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0.8;
  }
  20% {
    opacity: 1;
  }
  30% {
    opacity: 0.7;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0.9;
  }
  60% {
    opacity: 1;
  }
  70% {
    opacity: 0.8;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

/* Pauses the slice outside the 2s glitch window */
@keyframes glitch-burst {
  0%,
  16.66% {
    /* first 2s of 12s */
    animation-play-state: running;
  }
  16.67%,
  100% {
    /* remaining 10s */
    animation-play-state: paused;
  }
}