@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700;800;900&family=Orbitron:wght@700;800;900&display=swap');

/* Uses Gilroy automatically if the visitor has it installed. Falls back cleanly if not. */

:root {
  --bg: #000000;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.56);
  --line: rgba(255, 255, 255, 0.14);
  --accent: #FF6000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
  color: var(--white);
  font-family: Inter, system-ui, sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 96, 0, .16), transparent 25%),
    radial-gradient(circle at 20% 75%, rgba(255, 96, 0, .08), transparent 22%),
    linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,.06) 49%, transparent 50% 100%);
  filter: blur(12px);
  animation: backgroundDrift 12s ease-in-out infinite alternate;
}

body::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(255,255,255,.045) 93px, transparent 94px),
    repeating-linear-gradient(0deg, transparent 0 92px, rgba(255,255,255,.028) 93px, transparent 94px);
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  opacity: .35;
  animation: gridMove 18s linear infinite;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 96, 0, .19), transparent 67%);
  translate: -50% -50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .25s ease;
}


.strike-event {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
}

.strike-event.active {
  opacity: 1;
}

.strike-flash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,96,0,.34), transparent 24%),
    linear-gradient(90deg, transparent, rgba(255,96,0,.46), transparent);
  opacity: 0;
}

.strike-bolt {
  position: absolute;
  left: 50%;
  top: -18%;
  width: min(150px, 18vw);
  height: 135vh;
  transform: translateX(-50%) skewX(-14deg);
  background: linear-gradient(180deg, transparent 0 8%, rgba(255,255,255,.96) 9% 10%, var(--accent) 11% 17%, transparent 18% 28%, rgba(255,255,255,.9) 29% 30%, var(--accent) 31% 45%, transparent 46% 100%);
  clip-path: polygon(56% 0, 88% 0, 63% 34%, 100% 34%, 39% 100%, 54% 51%, 20% 51%);
  filter: drop-shadow(0 0 18px rgba(255,96,0,.95)) drop-shadow(0 0 42px rgba(255,96,0,.55));
  opacity: 0;
}

.strike-scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,96,0,.16) 8px, transparent 10px);
  mix-blend-mode: screen;
  opacity: 0;
}

.strike-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: Orbitron, Inter, sans-serif;
  font-size: clamp(42px, 10vw, 130px);
  font-weight: 900;
  letter-spacing: .18em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.75);
  text-shadow: 0 0 32px rgba(255,96,0,.48);
  opacity: 0;
}

body.strike-impact .hero {
  animation: impactShake .78s steps(2) both;
}

.strike-event.active .strike-flash {
  animation: lightningFlash 1.15s steps(1) both;
}

.strike-event.active .strike-bolt {
  animation: boltHit 1.15s cubic-bezier(.12,.8,.18,1) both;
}

.strike-event.active .strike-scan {
  animation: scanBurst 1.15s linear both;
}

.strike-event.active .strike-text {
  animation: strikeText 1.15s steps(1) both;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 3;
  padding: 28px;
}

.hero {
  width: min(980px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}

.mark-wrap {
  position: relative;
  width: clamp(92px, 10vw, 138px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: floatMark 4.8s ease-in-out infinite;
}

.mark-wrap::before,
.mark-wrap::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 1px solid rgba(255, 96, 0, .28);
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  animation: rotatePlate 9s linear infinite;
}

.mark-wrap::after {
  inset: -30px;
  opacity: .45;
  animation-direction: reverse;
  animation-duration: 13s;
}

.logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 26px rgba(255, 96, 0, .42));
  animation: logoPulse 3s ease-in-out infinite;
}

.wordmark {
  width: min(520px, 82vw);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(255,255,255,.15));
}

.coming {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 14px 20px;
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing: .08em;
  line-height: .9;
  text-transform: uppercase;
}

.coming span {
  font-size: clamp(34px, 7vw, 92px);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.82);
  animation: strokeFlicker 3.2s linear infinite;
}

.coming strong {
  font-size: clamp(34px, 7vw, 92px);
  font-weight: 900;
  color: var(--accent);
  text-shadow: 0 0 28px rgba(255, 96, 0, .42);
  animation: orangeGlitch 2.8s steps(1) infinite;
}

.sub {
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: clamp(11px, 1.5vw, 14px);
  animation: fadePulse 2.5s ease-in-out infinite;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.social {
  min-width: 172px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  position: relative;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, background .25s ease, box-shadow .25s ease;
  animation: buttonIdle 4s ease-in-out infinite;
  font-family: Gilroy, 'Gilroy', Inter, system-ui, sans-serif;
}

.social:nth-child(2) { animation-delay: .18s; }
.social:nth-child(3) { animation-delay: .36s; }

.social::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.16,1,.3,1);
  opacity: .95;
}
.social::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(120deg, transparent, rgba(255,96,0,.36), transparent);
  translate: -120% 0;
  transition: translate .5s ease;
}

.social:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 96, 0, .92);
  background: rgba(255, 96, 0, .12);
  box-shadow: 0 0 28px rgba(255,96,0,.18);
  color: #000;
}

.social:hover::before { transform: scaleX(1); }
.social:hover::after { translate: 120% 0; }
.social:hover svg { transform: translateX(3px) scale(1.04); }
.social svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  position: relative;
  z-index: 1;
  transition: transform .25s cubic-bezier(.16,1,.3,1);
}
.social span {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  animation: reveal .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: var(--delay);
}


@keyframes lightningFlash {
  0%, 7%, 13%, 100% { opacity: 0; }
  4%, 10% { opacity: 1; }
  18% { opacity: .55; }
  24% { opacity: 0; }
}
@keyframes boltHit {
  0% { opacity: 0; transform: translateX(-50%) translateY(-18%) skewX(-14deg) scaleY(.92); }
  8% { opacity: 1; transform: translateX(-50%) translateY(0) skewX(-14deg) scaleY(1); }
  14% { opacity: .25; transform: translateX(-49%) translateY(0) skewX(-10deg) scaleY(1); }
  20% { opacity: 1; transform: translateX(-51%) translateY(0) skewX(-16deg) scaleY(1); }
  42%, 100% { opacity: 0; transform: translateX(-50%) translateY(8%) skewX(-14deg) scaleY(1.04); }
}
@keyframes scanBurst {
  0% { opacity: 0; transform: translateY(-40px); }
  10% { opacity: .72; }
  100% { opacity: 0; transform: translateY(80px); }
}
@keyframes strikeText {
  0%, 11%, 100% { opacity: 0; transform: translate(-50%, -50%) translateX(0); }
  12% { opacity: .95; transform: translate(-50%, -50%) translateX(9px); }
  14% { opacity: .35; transform: translate(-50%, -50%) translateX(-11px); }
  18% { opacity: .9; transform: translate(-50%, -50%) translateX(4px); }
  26% { opacity: 0; transform: translate(-50%, -50%) translateX(0); }
}
@keyframes impactShake {
  0%, 100% { transform: translate(0,0); filter: none; }
  12% { transform: translate(7px,-3px); filter: contrast(1.35); }
  22% { transform: translate(-8px,4px); filter: contrast(1.6) brightness(1.35); }
  32% { transform: translate(4px,2px); }
  48% { transform: translate(-3px,-2px); }
  62% { transform: translate(2px,1px); }
}

@keyframes reveal { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes backgroundDrift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 1%, 0) scale(1.06); } }
@keyframes gridMove { to { transform: translate3d(94px, 94px, 0); } }
@keyframes floatMark { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes rotatePlate { to { rotate: 360deg; } }
@keyframes logoPulse { 0%,100% { filter: drop-shadow(0 0 18px rgba(255,96,0,.32)); } 50% { filter: drop-shadow(0 0 36px rgba(255,96,0,.58)); } }
@keyframes fadePulse { 0%,100% { opacity: .48; } 50% { opacity: .9; } }
@keyframes buttonIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes strokeFlicker { 0%, 100% { opacity: .86; } 44% { opacity: .55; } 45% { opacity: 1; } 48% { opacity: .7; } }
@keyframes orangeGlitch { 0%, 92%, 100% { transform: translate(0); } 93% { transform: translate(2px, -1px); } 94% { transform: translate(-2px, 1px); } 95% { transform: translate(1px, 0); } }

@media (max-width: 640px) {
  body { overflow-y: auto; }
  .hero { gap: 22px; }
  .coming { flex-direction: column; gap: 10px; }
  .socials { width: 100%; }
  .social { width: 100%; max-width: 340px; }
}

/* repeating strike mode swap */
body.screen-flicker::before {
  animation: styleFlashBg 1.1s steps(1) both, backgroundDrift 12s ease-in-out infinite alternate;
}

body.screen-flicker::after {
  animation: gridMove 18s linear infinite, screenFlickerGrid 1.1s steps(1) both;
}

body.alt-style .page {
  animation: pageSnap .8s steps(2) both;
}

body.alt-style::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 96, 0, .24), transparent 22%),
    linear-gradient(135deg, transparent 0 42%, rgba(255,96,0,.16) 43%, transparent 44% 100%),
    linear-gradient(225deg, transparent 0 52%, rgba(255,255,255,.08) 53%, transparent 54% 100%);
  filter: blur(10px);
}

body.alt-style::after {
  background:
    repeating-linear-gradient(115deg, transparent 0 78px, rgba(255,96,0,.14) 79px, transparent 81px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.035) 6px, transparent 7px);
  mask-image: radial-gradient(circle at center, black, transparent 76%);
  opacity: .45;
}

body.alt-style .mark-wrap::before,
body.alt-style .mark-wrap::after {
  border-color: rgba(255,255,255,.34);
  clip-path: polygon(50% 0, 100% 26%, 76% 100%, 0 74%, 24% 0);
}

body.alt-style .logo {
  filter: brightness(0) invert(1) drop-shadow(0 0 28px rgba(255,255,255,.32));
  animation: logoPulseWhite 3s ease-in-out infinite;
}

body.alt-style .wordmark {
  filter: brightness(0) invert(1) drop-shadow(0 0 28px rgba(255,96,0,.34));
}

body.alt-style .coming span {
  -webkit-text-stroke-color: rgba(255,96,0,.95);
  text-shadow: 0 0 24px rgba(255,96,0,.36);
}

body.alt-style .coming strong {
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,.28), 0 0 40px rgba(255,96,0,.28);
}

body.alt-style .social {
  border-color: rgba(255,96,0,.38);
  background: rgba(255,96,0,.055);
}

body.alt-style .social svg {
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(255,96,0,.4));
}

body.screen-flicker .page {
  animation: impactShake .78s steps(2) both, screenGlitch 1.1s steps(1) both;
}

body.screen-flicker .noise {
  opacity: .17;
}

body.screen-flicker .hero::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.08) 13px, transparent 14px);
  animation: scanLines 1.1s linear both;
}

@keyframes styleFlashBg {
  0%, 100% { filter: blur(12px) brightness(1); }
  8% { filter: blur(2px) brightness(2.2) contrast(1.5); }
  14% { filter: blur(18px) brightness(.35) contrast(2); }
  23% { filter: blur(4px) brightness(1.8); }
  40% { filter: blur(12px) brightness(.7); }
}

@keyframes screenFlickerGrid {
  0%, 100% { opacity: .35; }
  8% { opacity: .9; }
  14% { opacity: .12; }
  22% { opacity: .78; }
  34% { opacity: .2; }
}

@keyframes screenGlitch {
  0%, 100% { filter: none; opacity: 1; }
  8% { filter: contrast(1.8) brightness(1.45); opacity: .72; }
  13% { filter: invert(1) contrast(2.2); opacity: .95; }
  18% { filter: none; opacity: .6; transform: translateX(-7px); }
  25% { filter: contrast(1.4); opacity: 1; transform: translateX(5px); }
  38% { filter: none; transform: translateX(0); }
}

@keyframes scanLines {
  0% { opacity: 0; transform: translateY(-30px); }
  12% { opacity: .8; }
  100% { opacity: 0; transform: translateY(90px); }
}

@keyframes pageSnap {
  0% { transform: scale(.992); }
  100% { transform: scale(1); }
}

@keyframes logoPulseWhite {
  0%,100% { filter: brightness(0) invert(1) drop-shadow(0 0 18px rgba(255,255,255,.22)); }
  50% { filter: brightness(0) invert(1) drop-shadow(0 0 40px rgba(255,255,255,.46)); }
}

/* v4: true orange / black inverted strike mode */
.strike-flash {
  background:
    radial-gradient(circle at 50% 42%, rgba(255,96,0,.72), transparent 26%),
    linear-gradient(90deg, transparent, rgba(255,96,0,.62), transparent);
}

.strike-bolt {
  background: linear-gradient(180deg,
    transparent 0 8%,
    var(--accent) 9% 18%,
    transparent 19% 28%,
    var(--accent) 29% 48%,
    transparent 49% 100%);
  filter: drop-shadow(0 0 18px rgba(255,96,0,1)) drop-shadow(0 0 54px rgba(255,96,0,.88));
}

.strike-text {
  -webkit-text-stroke: 1.5px rgba(255,96,0,.95);
  text-shadow: 0 0 34px rgba(255,96,0,.8), 0 0 70px rgba(255,96,0,.45);
}

body.alt-style {
  background: var(--accent);
  color: #000;
}

body.alt-style::before {
  background:
    radial-gradient(circle at 62% 50%, rgba(0,0,0,.26), transparent 26%),
    radial-gradient(circle at 18% 20%, rgba(0,0,0,.15), transparent 24%),
    linear-gradient(115deg, transparent 0 42%, rgba(0,0,0,.22) 43%, transparent 44% 100%);
  filter: blur(8px);
}

body.alt-style::after {
  background:
    repeating-linear-gradient(115deg, transparent 0 78px, rgba(0,0,0,.23) 79px, transparent 81px),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,0,0,.09) 6px, transparent 7px);
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  opacity: .6;
}

body.alt-style .cursor-glow {
  background: radial-gradient(circle, rgba(0,0,0,.22), transparent 67%);
}

body.alt-style .hero {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr;
  grid-template-areas:
    "mark word"
    "mark coming"
    "mark sub"
    "social social";
  align-items: center;
  text-align: left;
  column-gap: clamp(24px, 5vw, 70px);
  row-gap: 20px;
  animation: altLayoutSnap .9s cubic-bezier(.16,1,.3,1) both;
}

body.alt-style .mark-wrap { grid-area: mark; justify-self: end; width: clamp(124px, 14vw, 190px); }
body.alt-style .wordmark { grid-area: word; justify-self: start; width: min(560px, 60vw); filter: brightness(0) saturate(1); }
body.alt-style .coming { grid-area: coming; justify-content: flex-start; }
body.alt-style .sub { grid-area: sub; color: rgba(0,0,0,.68); }
body.alt-style .socials { grid-area: social; justify-content: center; margin-top: 24px; }

body.alt-style .mark-wrap::before,
body.alt-style .mark-wrap::after {
  border-color: rgba(0,0,0,.42);
  background: rgba(0,0,0,.045);
}

body.alt-style .logo {
  filter: brightness(0) saturate(1) drop-shadow(0 0 24px rgba(0,0,0,.28));
}

body.alt-style .coming span {
  -webkit-text-stroke-color: rgba(0,0,0,.9);
  text-shadow: none;
}

body.alt-style .coming strong {
  color: #000;
  text-shadow: 0 0 24px rgba(0,0,0,.2);
}

body.alt-style .social {
  color: #000;
  border-color: rgba(0,0,0,.45);
  background: rgba(0,0,0,.05);
}

body.alt-style .social::before {
  background: linear-gradient(120deg, transparent, rgba(0,0,0,.22), transparent);
}

body.alt-style .social:hover {
  border-color: rgba(0,0,0,.85);
  background: rgba(0,0,0,.12);
}

body.alt-style .social svg {
  color: #000;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.25));
}

body.screen-flicker .hero::before {
  background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,96,0,.26) 13px, transparent 14px);
}

body.alt-style.screen-flicker .hero::before {
  background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(0,0,0,.18) 13px, transparent 14px);
}

@keyframes altLayoutSnap {
  0% { transform: translateX(-22px) skewX(-3deg); filter: contrast(1.35); }
  45% { transform: translateX(7px) skewX(1deg); }
  100% { transform: translateX(0) skewX(0); filter: none; }
}

@media (max-width: 760px) {
  body.alt-style .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  body.alt-style .mark-wrap { justify-self: center; width: clamp(100px, 28vw, 150px); }
  body.alt-style .wordmark { justify-self: center; width: min(520px, 82vw); }
  body.alt-style .coming { justify-content: center; }
}


/* v5: Gilroy buttons + charge-up strike loop */
body.charge-up .logo {
  animation: chargeLogo .75s steps(3) both, logoPulse 3s ease-in-out infinite;
}

body.charge-up .mark-wrap::before,
body.charge-up .mark-wrap::after {
  animation-duration: 1.1s;
  border-color: rgba(255,96,0,.85);
  box-shadow: 0 0 30px rgba(255,96,0,.22);
}

body.charge-up .coming strong,
body.charge-up .coming span,
body.charge-up .wordmark {
  animation: chargeText .75s steps(2) both;
}

.strike-event.active .strike-bolt::before,
.strike-event.active .strike-bolt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  clip-path: inherit;
  filter: blur(18px);
  opacity: .55;
}

.strike-event.active .strike-bolt::after {
  filter: blur(36px);
  opacity: .32;
  transform: scaleX(1.9);
}

body.screen-flicker:not(.alt-style) {
  animation: fullOrangeFlicker 1.05s steps(1) both;
}

body.alt-style.screen-flicker {
  animation: fullBlackFlicker 1.05s steps(1) both;
}

body.alt-style .social:hover {
  color: var(--accent);
  background: rgba(0,0,0,.9);
  box-shadow: 0 0 34px rgba(0,0,0,.18);
}

body.alt-style .social::before {
  background: #000;
}

body.alt-style .social:hover svg,
body.alt-style .social:hover span {
  color: var(--accent);
}

body.alt-style .socials {
  transform: translateY(6px);
}

@keyframes chargeLogo {
  0% { filter: drop-shadow(0 0 14px rgba(255,96,0,.2)); transform: scale(1); }
  28% { filter: drop-shadow(0 0 55px rgba(255,96,0,.95)); transform: scale(1.045) rotate(-1deg); }
  55% { filter: drop-shadow(0 0 18px rgba(255,96,0,.32)); transform: scale(.98) rotate(1deg); }
  100% { filter: drop-shadow(0 0 70px rgba(255,96,0,1)); transform: scale(1.06); }
}

@keyframes chargeText {
  0%, 100% { filter: none; transform: translateX(0); }
  24% { filter: drop-shadow(4px 0 0 rgba(255,96,0,.85)); transform: translateX(4px); }
  45% { filter: drop-shadow(-5px 0 0 rgba(255,96,0,.85)); transform: translateX(-4px); }
  72% { filter: drop-shadow(0 0 26px rgba(255,96,0,.72)); transform: translateX(2px); }
}

@keyframes fullOrangeFlicker {
  0%, 100% { background: #000; }
  8% { background: var(--accent); }
  12% { background: #000; }
  18% { background: var(--accent); }
  24% { background: #000; }
}

@keyframes fullBlackFlicker {
  0%, 100% { background: var(--accent); }
  8% { background: #000; }
  12% { background: var(--accent); }
  18% { background: #000; }
  24% { background: var(--accent); }
}