/* Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: Michroma, sans-serif;
  color: #ccc;
  background: #000;
  overflow-x: hidden;
  text-size-adjust: 100%;
}

/* Glitch effect */
.hero {
  font-size: clamp(30px, 10vw, 225px);
  font-weight: 300;
  line-height: 1;
  display: inline-block;
  color: #fff;
  z-index: 2;
  letter-spacing: 0.15em;
  margin-right: -0.15em;
  padding: 0 0.3em;
  -webkit-text-stroke: 1px #00a6ff;
  filter: blur(0.5px) drop-shadow(0 8px 15px #0066FF);
}

.layers {
  position: relative;
}

.layers::before,
.layers::after {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: 10;
}

.layers::before {
  top: 15px;
  left: 22px;
  color: #fff;
}

.layers::after {
  top: 8px;
  left: -15px;
  color: #1bc7fb;
}

@keyframes paths {
  /* Burst 1: 0-4% */
  0% {
    clip-path: polygon(
      0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%,
      18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%,
      18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%,
      76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%,
      36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%
    );
  }
  1% {
    clip-path: polygon(
      0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%,
      94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%,
      10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%,
      35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%
    );
  }
  3% {
    clip-path: polygon(
      0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%,
      13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%,
      81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%,
      55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%,
      63% 4%, 65% 4%
    );
  }
  /* Calm: 4-55% */
  4%, 5% {
    clip-path: none;
  }
  /* Burst 2: 55-59% */
  55% {
    clip-path: polygon(
      0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%,
      33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%,
      79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%,
      96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%,
      63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%,
      15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%,
      97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%,
      39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%
    );
  }
  56% {
    clip-path: polygon(
      0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%,
      8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%,
      26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%,
      42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%,
      49% 25%, 63% 25%, 63% 14%
    );
  }
  58% {
    clip-path: polygon(
      0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%,
      89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%,
      0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%,
      89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%,
      80% 85%, 38% 85%, 38% 62%
    );
  }
  /* Calm: 59-100% */
  59%, 60%, 100% {
    clip-path: none;
  }
}

@keyframes movement {
  /* Burst 1 */
  0%   { top: 0px;  left: -30px; }
  1%   { top: 15px; left: 15px; }
  3%   { top: 8px;  left: -15px; }
  /* Calm */
  4%   { top: 0; left: 0; }
  /* Burst 2 */
  55%  { top: -8px; left: 30px; }
  56%  { top: 15px; left: -15px; }
  58%  { top: 8px;  left: 15px; }
  /* Calm */
  59%  { top: 0; left: 0; }
  100% { top: 0; left: 0; }
}

@keyframes opacity {
  /* Burst 1 */
  0%  { opacity: 0.1; }
  1%  { opacity: 0.7; }
  2%  { opacity: 0.4; }
  3%  { opacity: 0.6; }
  /* Calm */
  4%, 54% { opacity: 0; }
  /* Burst 2 */
  55% { opacity: 0.4; }
  56% { opacity: 0.8; }
  58% { opacity: 0.5; }
  /* Calm */
  59%, 100% { opacity: 0; }
}

@keyframes font {
  /* Burst 1 */
  0%  { font-weight: 100; color: #fff; filter: blur(3px); }
  1%  { font-weight: 500; color: #fff; filter: blur(0); }
  3%  { font-weight: 300; color: #fff; filter: blur(2px); }
  /* Calm */
  4%  { font-weight: 400; color: #fff; filter: blur(0); }
  /* Burst 2 */
  55% { font-weight: 700; color: #fff; filter: blur(0); }
  56% { font-weight: 100; color: #fff; filter: blur(4px); }
  58% { font-weight: 500; color: #fff; filter: blur(0); }
  /* Calm */
  59% { font-weight: 400; color: #fff; filter: blur(0); }
}

.glitch span {
  animation: paths 12s step-end infinite;
}

.glitch::before {
  animation: paths 12s step-end infinite, opacity 12s step-end infinite,
    font 12s step-end infinite, movement 12s step-end infinite;
}

.glitch::after {
  animation: paths 12s step-end infinite, opacity 12s step-end infinite,
    font 12s step-end infinite, movement 12s step-end infinite;
}

@keyframes jitter {
  /* Burst 1: synced with glitch 0-4% */
  0%  { transform: translate(-1px, 1px); }
  1%  { transform: translate(1px, -1px); }
  2%  { transform: translate(-1px, 0); }
  3%  { transform: translate(1px, 1px); }
  /* Calm */
  4%  { transform: translate(0, 0); }
  /* Burst 2: synced with glitch 55-59% */
  55% { transform: translate(1px, -1px); }
  56% { transform: translate(-1px, 1px); }
  57% { transform: translate(1px, 0); }
  58% { transform: translate(-1px, -1px); }
  /* Calm */
  59% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}

/* Layout */
.hero-container {
  display: grid;
  place-items: center;
  text-align: center;
  height: 100dvh;
  padding-bottom: 5vh;
}

.hero {
  animation: jitter 12s step-end infinite;
}

/* Client info */
.client-info {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.05em;
}

.client-flag {
  height: 1em;
  vertical-align: middle;
  margin-right: 0.15em;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}