body.theme-futurism {
  background:
    linear-gradient(112deg, transparent 0 72%, color-mix(in srgb, var(--accent), transparent 86%) 72% 76%, transparent 76%),
    repeating-linear-gradient(112deg, transparent 0 78px, color-mix(in srgb, var(--line), transparent 91%) 78px 80px),
    var(--bg);
}

.theme-futurism .topbar {
  border-bottom-width: 3px;
  background: color-mix(in srgb, var(--bg), transparent 8%);
}

.theme-futurism .brand::before {
  content: ">>";
  color: var(--accent);
  font-family: var(--mono);
  letter-spacing: -.22em;
}

.theme-futurism .hero {
  min-height: min(820px, 90vh);
  align-items: end;
  border-left: 8px solid var(--accent);
  padding-left: clamp(20px, 5vw, 72px);
  overflow: hidden;
}

.theme-futurism .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  right: -8%;
  width: 62%;
  height: 64%;
  background: var(--accent);
  clip-path: polygon(100% 0, 0 48%, 100% 100%);
  opacity: .13;
}

.theme-futurism .hero::after {
  content: "VELOCITY / SYSTEM / SIGNAL";
  position: absolute;
  right: 0;
  bottom: 24px;
  font: 700 11px/1 var(--mono);
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.theme-futurism h1 {
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  text-shadow: 7px 7px 0 color-mix(in srgb, var(--accent), transparent 62%);
}

.theme-futurism .hero-sub {
  border-left: 3px solid var(--line);
  padding-left: 20px;
}

.theme-futurism .section {
  border-top-width: 5px;
}

.theme-futurism .section::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 0;
  width: clamp(72px, 16vw, 190px);
  height: 5px;
  background: var(--accent);
}

.theme-futurism .section-head {
  grid-template-columns: minmax(96px, .28fr) minmax(0, 1fr);
  align-items: end;
}

.theme-futurism .section-index {
  padding: 10px 18px 10px 10px;
  color: var(--bg);
  background: var(--line);
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.theme-futurism h2 {
  font-weight: 880;
  text-transform: uppercase;
}

.theme-futurism :is(.card, .hero-card, .timeline-item, .principle) {
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.theme-futurism .cards .card:nth-child(even) {
  background: color-mix(in srgb, var(--card), var(--accent) 7%);
}

.theme-futurism .tag,
.theme-futurism .skill-pill {
  border-radius: 0;
  transform: skewX(-8deg);
}

.theme-futurism .contact-panel,
.theme-futurism .reveal {
  border-left: 12px solid var(--accent);
  background: var(--card);
  clip-path: polygon(0 0, calc(100% - 42px) 0, 100% 42px, 100% 100%, 0 100%);
}

.theme-futurism .reveal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  width: 38%;
  height: 100%;
  background: repeating-linear-gradient(112deg, transparent 0 22px, color-mix(in srgb, var(--accent), transparent 72%) 22px 28px);
  opacity: .36;
}

.theme-futurism .regenerating {
  background:
    repeating-linear-gradient(112deg, transparent 0 38px, color-mix(in srgb, var(--accent), transparent 56%) 38px 44px),
    linear-gradient(112deg, var(--fg) 0 68%, color-mix(in srgb, var(--accent), var(--fg) 28%) 68% 76%, var(--fg) 76%);
  color: var(--bg);
}

.theme-futurism .regenerating::before,
.theme-futurism .regenerating::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.theme-futurism .regenerating::before {
  inset: 8% -10% auto auto;
  width: min(62vw, 720px);
  height: min(58vh, 520px);
  background: var(--accent);
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  opacity: .38;
}

.theme-futurism .regenerating::after {
  inset: auto 0 8%;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--bg) 0 42px, transparent 42px 58px);
  opacity: .72;
}

.theme-futurism .regen-box {
  border: 4px solid var(--bg);
  border-left: 14px solid var(--accent);
  background: var(--bg);
  color: var(--fg);
  box-shadow: 12px 12px 0 var(--accent);
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  font-style: italic;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.theme-futurism .regen-box::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 auto auto;
  width: 42%;
  height: 12px;
  background: repeating-linear-gradient(112deg, var(--accent) 0 18px, var(--fg) 18px 23px);
}

.theme-futurism .regen-line {
  padding-inline-start: 36px;
  overflow-wrap: anywhere;
}

.theme-futurism .regen-line::before,
.theme-futurism .regen-line.active::before {
  content: ">>";
  top: .2em;
  width: auto;
  height: auto;
  border: 0;
  background: none;
  color: var(--accent);
  font-weight: 950;
  letter-spacing: -.22em;
  transform: skewX(-12deg);
}

@media (max-width: 720px) {
  .theme-futurism .hero {
    min-height: auto;
    border-left-width: 5px;
    padding-left: 18px;
  }

  .theme-futurism .hero::after { display: none; }
  .theme-futurism .section-head { grid-template-columns: 1fr; }
  .theme-futurism .section-index { width: max-content; max-width: 100%; }
  .theme-futurism h1 { text-shadow: 4px 4px 0 color-mix(in srgb, var(--accent), transparent 68%); }
}

@media (prefers-reduced-motion: no-preference) {
  .theme-futurism .hero::before { animation: futurism-pulse 7s ease-in-out infinite alternate; }
}

@keyframes futurism-pulse {
  to { transform: translateX(4%) scaleX(1.06); }
}