/* Breaking Agents brand: palette, wordmark, animated glitch. Shared by every page. */
:root {
  --bg: #0E0E12;
  --fg: #EDECE8;
  --muted: #8E8D93;
  --red: #FF3B30;
  --orange: #F4732A;
  --cyan: #2AD8F4;
  --line: #24242C;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font: 17px/1.55 Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--fg); text-decoration: none; }
.nw { white-space: nowrap; }

/* ---- Wordmark ---------------------------------------------------------- */
.mark {
  display: block;
  margin: 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 0.92;
  text-transform: uppercase;
  font-size: clamp(56px, 12vw, 128px);
  text-align: center;
}
.mark.small { font-size: clamp(44px, 9vw, 72px); }
.mark .word { display: block; }

.glitch {
  position: relative;
  display: inline-block;
  color: var(--fg);
}
.glitch::before,
.glitch::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.85;
}
.glitch::before {
  color: var(--red);
  transform: translate(-0.045em, -0.03em);
  clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%);
}
.glitch::after {
  color: var(--cyan);
  transform: translate(0.045em, 0.03em);
  clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%);
}
/* Horizontal slices of the word, displaced sideways (the banner's orange "tear"). */
.glitch .slice {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.glitch .slice::before { content: attr(data-t); position: absolute; inset: 0; }
.glitch .s1 { color: var(--orange); clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%); transform: translateX(0.14em); }
.glitch .s2 { color: var(--fg);     clip-path: polygon(0 46%, 100% 46%, 100% 54%, 0 54%); transform: translateX(-0.22em); }
.glitch .s3 { color: var(--orange); clip-path: polygon(0 52%, 100% 52%, 100% 56%, 0 56%); transform: translateX(0.32em); opacity: .9; }

@media (prefers-reduced-motion: no-preference) {
  .glitch::before { animation: glitch-red 4s steps(1, end) infinite; }
  .glitch::after  { animation: glitch-cyan 4s steps(1, end) infinite; }
  .glitch .s1 { animation: slice-1 4s steps(1, end) infinite; }
  .glitch .s2 { animation: slice-2 4s steps(1, end) infinite; }
  .glitch .s3 { animation: slice-3 4s steps(1, end) infinite; }
  .glitch         { animation: glitch-base 4s steps(1, end) infinite; }
  /* start mid-loop so the first burst lands ~0.5s after load; the 4s spacing after that is unchanged */
  .glitch, .glitch::before, .glitch::after, .glitch .s1, .glitch .s2, .glitch .s3 { animation-delay: -2.8s; }

  /* Calm for most of the loop, then a burst of slices between 82% and 96%. */
  @keyframes glitch-red {
    0%, 82%, 96%, 100% { transform: translate(-0.045em, -0.03em); clip-path: polygon(0 0, 100% 0, 100% 38%, 0 38%); }
    83% { transform: translate(0.09em, -0.02em);  clip-path: polygon(0 10%, 100% 10%, 100% 24%, 0 24%); }
    85% { transform: translate(-0.12em, 0.01em);  clip-path: polygon(0 40%, 100% 40%, 100% 58%, 0 58%); }
    87% { transform: translate(0.05em, -0.05em);  clip-path: polygon(0 0, 100% 0, 100% 12%, 0 12%); }
    89% { transform: translate(-0.08em, 0.03em);  clip-path: polygon(0 66%, 100% 66%, 100% 80%, 0 80%); }
    91% { transform: translate(0.11em, 0);        clip-path: polygon(0 28%, 100% 28%, 100% 46%, 0 46%); }
    93% { transform: translate(-0.04em, -0.04em); clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%); }
  }
  @keyframes glitch-cyan {
    0%, 82%, 96%, 100% { transform: translate(0.045em, 0.03em); clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%); }
    83% { transform: translate(-0.1em, 0.02em);   clip-path: polygon(0 70%, 100% 70%, 100% 88%, 0 88%); }
    85% { transform: translate(0.12em, -0.02em);  clip-path: polygon(0 4%, 100% 4%, 100% 20%, 0 20%); }
    87% { transform: translate(-0.06em, 0.05em);  clip-path: polygon(0 84%, 100% 84%, 100% 100%, 0 100%); }
    89% { transform: translate(0.09em, -0.03em);  clip-path: polygon(0 30%, 100% 30%, 100% 44%, 0 44%); }
    91% { transform: translate(-0.11em, 0.01em);  clip-path: polygon(0 56%, 100% 56%, 100% 72%, 0 72%); }
    93% { transform: translate(0.04em, 0.04em);   clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%); }
  }
  @keyframes slice-1 {
    0%, 82%, 96%, 100% { clip-path: polygon(0 40%, 100% 40%, 100% 50%, 0 50%); transform: translateX(0.14em); }
    83% { clip-path: polygon(0 18%, 100% 18%, 100% 26%, 0 26%); transform: translateX(-0.3em); }
    85% { clip-path: polygon(0 60%, 100% 60%, 100% 72%, 0 72%); transform: translateX(0.4em); }
    87% { clip-path: polygon(0 40%, 100% 40%, 100% 44%, 0 44%); transform: translateX(0.1em); }
    89% { clip-path: polygon(0 30%, 100% 30%, 100% 48%, 0 48%); transform: translateX(-0.18em); }
    91% { clip-path: polygon(0 74%, 100% 74%, 100% 82%, 0 82%); transform: translateX(0.5em); }
    93% { clip-path: polygon(0 44%, 100% 44%, 100% 52%, 0 52%); transform: translateX(0.2em); }
  }
  @keyframes slice-2 {
    0%, 82%, 96%, 100% { clip-path: polygon(0 46%, 100% 46%, 100% 54%, 0 54%); transform: translateX(-0.22em); }
    83% { clip-path: polygon(0 62%, 100% 62%, 100% 70%, 0 70%); transform: translateX(0.35em); }
    85% { clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%); transform: translateX(-0.4em); }
    87% { clip-path: polygon(0 50%, 100% 50%, 100% 60%, 0 60%); transform: translateX(0.12em); }
    89% { clip-path: polygon(0 84%, 100% 84%, 100% 92%, 0 92%); transform: translateX(-0.5em); }
    91% { clip-path: polygon(0 34%, 100% 34%, 100% 42%, 0 42%); transform: translateX(0.28em); }
    93% { clip-path: polygon(0 48%, 100% 48%, 100% 56%, 0 56%); transform: translateX(-0.3em); }
  }
  @keyframes slice-3 {
    0%, 82%, 96%, 100% { clip-path: polygon(0 52%, 100% 52%, 100% 56%, 0 56%); transform: translateX(0.32em); }
    83% { clip-path: polygon(0 28%, 100% 28%, 100% 32%, 0 32%); transform: translateX(0.55em); }
    85% { clip-path: polygon(0 76%, 100% 76%, 100% 80%, 0 80%); transform: translateX(-0.45em); }
    87% { clip-path: polygon(0 12%, 100% 12%, 100% 16%, 0 16%); transform: translateX(0.2em); }
    89% { clip-path: polygon(0 56%, 100% 56%, 100% 62%, 0 62%); transform: translateX(-0.35em); }
    91% { clip-path: polygon(0 40%, 100% 40%, 100% 46%, 0 46%); transform: translateX(0.6em); }
    93% { clip-path: polygon(0 66%, 100% 66%, 100% 70%, 0 70%); transform: translateX(0.15em); }
  }
  @keyframes glitch-base {
    0%, 82%, 96%, 100% { transform: translate(0, 0); }
    84% { transform: translate(0.02em, 0); }
    86% { transform: translate(-0.03em, 0.01em); }
    90% { transform: translate(0.015em, -0.01em); }
    92% { transform: translate(-0.01em, 0); }
  }
}

/* ---- Shared bits ------------------------------------------------------- */
main { flex: 1; display: grid; place-items: center; padding: 8vh 24px; }
.wrap { width: 100%; max-width: 720px; text-align: center; }
.tagline {
  margin: 36px auto 0;
  max-width: 640px;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.sub {
  margin: 14px auto 0;
  max-width: 560px;
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.45;
  color: #B9B8BE;
}

footer {
  padding: 20px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
}
footer a { color: var(--muted); border-bottom: 1px solid var(--line); }
footer a:hover { color: var(--fg); }
@media (max-width: 640px) {
  footer { font-size: 13px; line-height: 1.6; }
}

/* ---- Platform colors on hover ------------------------------------------ */
[data-brand]:hover { box-shadow: none !important; }
[data-brand="youtube"]:hover   { background: #FF0000 !important; }
[data-brand="instagram"]:hover { background: linear-gradient(45deg, #F9CE34, #EE2A7B 50%, #6228D7) !important; }
[data-brand="threads"]:hover   { background: #000 !important; box-shadow: inset 0 0 0 1px #fff !important; }
[data-brand="tiktok"]:hover    {
  background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #25F4EE, #FE2C55) border-box !important;
  border: 2px solid transparent;
  margin: -2px; /* keep the border from shifting siblings */
  box-shadow: 0 6px 24px rgba(254, 44, 85, .35), 0 -6px 24px rgba(37, 244, 238, .25) !important;
}
[data-brand="tiktok"]:hover svg { filter: drop-shadow(-1.5px -1px 0 #25F4EE) drop-shadow(1.5px 1px 0 #FE2C55); }
[data-brand="substack"]:hover  { background: #FF6719 !important; }