/* ==========================================================================
   glitch.css — Engraving × Matrix design system + vibrating plates
   Loaded after main.css. Tokens live in main.css :root; this file enforces
   consistent surfaces, type, and the hero glitch system.
   ========================================================================== */

/* ---- Shared surface language ---- */
:where(
  .card,
  .stat,
  .tech-card,
  .project-card,
  .side-project-card,
  .side-metric,
  .contact-card,
  .spotlight-card,
  .hustle-card
) {
  border-radius: 0 !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-background-elevated) !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

:where(
  .card:hover,
  .stat:hover,
  .tech-card:hover,
  .project-card:hover,
  .side-project-card:hover
) {
  transform: translateY(-3px) !important;
  border-color: var(--color-border-hover) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}

/* Kill rainbow top bars / multicolour underlays */
.card::before,
.stat::before,
.tech-card::before,
.spotlight-card::before {
  background: var(--color-accent-rust) !important;
  height: 2px !important;
  opacity: 1;
}

.card:nth-child(1),
.card:nth-child(2),
.card:nth-child(3),
.stat:nth-child(1),
.stat:nth-child(2),
.stat:nth-child(3),
.stat:nth-child(4) {
  background: var(--color-background-elevated) !important;
}

.card-header,
.card:nth-child(2) .card-header,
.card:nth-child(3) .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border);
}

/* ---- Typography hierarchy ---- */
.hero h1,
.hero__title,
.section-title,
.page-header h1,
.contact-title,
.cta-section h2,
.project-title,
.side-section-heading h2,
.stat-number,
.side-metric strong {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  color: var(--color-text-light) !important;
  text-shadow: none !important;
}

.hero h1,
.hero__title {
  font-size: clamp(2.75rem, 7vw, 5rem) !important;
  line-height: 1.05 !important;
}

.stat-number,
.side-metric strong {
  color: var(--color-accent-rust) !important;
  letter-spacing: -0.03em;
}

.gradient-text {
  background: none !important;
  -webkit-text-fill-color: var(--color-accent-rust) !important;
  color: var(--color-accent-rust) !important;
}

.logo,
.tag,
.badge,
.section-tag,
.trust-label,
.project-company,
.project-results h4,
.contact-label,
.terminal-title,
.side-status,
.card-number,
.stat p {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Nav ---- */
nav {
  background: color-mix(in srgb, var(--color-background-charcoal) 94%, transparent) !important;
  border-bottom: 1px solid var(--color-border) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.logo {
  font-weight: 500 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.12em !important;
  color: var(--color-text-light) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.logo::before {
  content: "DL";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid color-mix(in srgb, var(--color-accent-rust) 65%, transparent);
  color: var(--color-accent-rust);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.nav-links a {
  color: var(--muted) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-accent-rust) !important;
}

.menu-toggle span {
  background: var(--color-accent-rust) !important;
  border-radius: 0 !important;
  height: 2px !important;
}

@media (max-width: 768px) {
  .nav-links {
    background: rgba(12, 12, 14, 0.98) !important;
    border-bottom: 1px solid var(--color-border) !important;
  }
}

/* ---- Buttons: sharp, mono, single accent ---- */
.btn {
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.9rem 1.6rem !important;
  box-shadow: none !important;
}

.btn-primary {
  background: var(--color-accent-rust) !important;
  color: var(--color-text-light) !important;
  border: 1px solid var(--color-accent-rust) !important;
}

.btn-primary:hover {
  background: var(--color-accent-rust-hover) !important;
  border-color: var(--color-accent-rust-hover) !important;
  color: var(--color-text-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 28px rgba(168, 84, 60, 0.28) !important;
}

.btn-secondary {
  background: transparent !important;
  color: var(--color-text-light) !important;
  border: 1px solid var(--color-border) !important;
  backdrop-filter: none !important;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--color-text-light) 6%, transparent) !important;
  border-color: var(--color-border-hover) !important;
  color: var(--color-text-light) !important;
  box-shadow: none !important;
}

.btn-outline {
  background: transparent !important;
  color: var(--color-accent-blue) !important;
  border: 1px solid color-mix(in srgb, var(--color-accent-blue) 55%, transparent) !important;
}

.btn-outline:hover {
  background: color-mix(in srgb, var(--color-accent-blue) 12%, transparent) !important;
  color: var(--color-text-light) !important;
  box-shadow: none !important;
}

/* ---- Badges / tags ---- */
.badge,
.section-tag,
.tag,
.contact-status,
.side-status {
  border-radius: 0 !important;
  font-weight: 500 !important;
}

.badge {
  background: color-mix(in srgb, var(--color-accent-rust) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--color-accent-rust) 50%, transparent) !important;
  color: var(--color-accent-rust) !important;
  font-size: 0.7rem !important;
}

.badge-dot,
.status-dot {
  background: var(--color-accent-rust) !important;
  border-radius: 0 !important;
  width: 6px !important;
  height: 6px !important;
  box-shadow: none !important;
}

.tag {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: color-mix(in srgb, var(--color-accent-blue) 85%, white) !important;
  font-size: 0.68rem !important;
}

.section-tag {
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-accent-rust) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.14em !important;
  padding: 0.4rem 0.75rem !important;
}

.trust-label {
  color: var(--muted) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
}

/* ---- Focus ---- */
:focus-visible {
  outline: 2px solid var(--color-accent-rust) !important;
  outline-offset: 3px;
}

/* ==========================================================================
   Hero — engraving × glitch (ported 1:1 from aiengineer.hu home.css)
   ========================================================================== */
.hero--engrave.hero {
  position: relative;
  min-height: 100dvh;
  display: block;
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  margin-top: 0;
  text-align: left;
  background:
    radial-gradient(ellipse 55% 70% at 85% 45%, rgba(61, 26, 22, 0.45), transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%, rgba(12, 12, 14, 0.95), transparent 55%),
    var(--color-background-charcoal);
}

/* Kill legacy glow blobs from main.css */
.hero--engrave.hero::before {
  display: none !important;
}

.hero--engrave::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    linear-gradient(90deg, var(--color-background-charcoal) 0%, transparent 42%),
    radial-gradient(ellipse at 70% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 1;
  filter: none !important;
}

/* Terminal atmosphere */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero__atmosphere .term {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(235, 230, 220, 0.22);
  white-space: nowrap;
}

.term--1 { top: 14%; left: 4%; }
.term--2 { top: 22%; right: 6%; }
.term--3 { bottom: 18%; left: 5%; }
.term--4 { bottom: 12%; right: 8%; }
.term--5 {
  top: 48%;
  left: 3%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: color-mix(in srgb, var(--color-matrix) 40%, transparent);
}

.hero__calib {
  position: absolute;
  background: rgba(235, 230, 220, 0.08);
}

.hero__calib--h {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

.hero__calib--v {
  top: 0;
  bottom: 0;
  left: 58%;
  width: 1px;
}

@media (max-width: 899px) {
  .term--2,
  .term--4,
  .term--5,
  .hero__calib--v { display: none; }
}

/* Layout */
.hero__layout {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: calc(80px + 2rem) 1.25rem 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  min-height: 100dvh;
  text-align: left;
}

@media (min-width: 900px) {
  .hero__layout {
    grid-template-columns: minmax(280px, 46%) 1fr;
    gap: 0;
    padding: 0;
    min-height: 100dvh;
    align-items: stretch;
  }
}

.hero__copy {
  position: relative;
  z-index: 5;
  max-width: 34rem;
  order: 1;
  text-align: left;
}

@media (min-width: 900px) {
  .hero__copy {
    order: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: calc(80px + 1.5rem) 2rem 4rem clamp(1.5rem, 5vw, 4rem);
    max-width: none;
  }
}

.hero__visual {
  position: relative;
  order: 2;
  min-height: 48vh;
  overflow: hidden;
}

@media (min-width: 900px) {
  .hero__visual {
    order: 0;
    min-height: 100dvh;
    height: 100%;
    overflow: visible;
  }
}

.hero--engrave .hero__title,
.hero--engrave h1.hero__title {
  margin: 0 0 1.5rem !important;
  font-family: var(--font-display) !important;
  font-size: clamp(2.75rem, 7vw, 5rem) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--color-text-light) !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  text-shadow: none !important;
  padding-bottom: 0 !important;
}

.hero__line {
  display: block;
}

.hero--engrave .hero__subtitle,
.hero--engrave .hero__copy p {
  font-family: var(--font-body) !important;
  font-size: 1.15rem !important;
  color: var(--muted) !important;
  line-height: 1.7 !important;
  margin: 0 0 2rem !important;
  max-width: 38rem !important;
  letter-spacing: 0 !important;
}

.hero__actions,
.hero--engrave .cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: flex-start !important;
}

/* ==========================================================================
   Hero plate — aiengineer.hu-style RGB corruption / scanline glitch
   ========================================================================== */

.hero__plate {
  position: relative;
  width: 100%;
  height: min(62vh, 560px);
  overflow: hidden;
  background: #0c0c0e;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  isolation: isolate;
}

@media (min-width: 900px) {
  .hero__plate {
    position: absolute;
    top: 0;
    right: -10%;
    bottom: 0;
    left: auto;
    width: min(62vw, 780px);
    height: auto;
    mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 100%);
  }
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  filter: contrast(1.18) brightness(0.9) sepia(0.18) saturate(0.78);
  mix-blend-mode: screen;
  opacity: 0.95;
  z-index: 1;
  transition: transform 600ms var(--easing-editorial), opacity 320ms var(--easing-editorial);
  will-change: transform, filter;
}

@media (min-width: 900px) {
  .hero__image {
    width: 118%;
    height: 108%;
    left: -6%;
    top: -4%;
    object-fit: cover;
  }
}

.hero__plate:hover .hero__image {
  transform: scale(1.03) translateX(2px);
  opacity: 1;
}

.hero__rgb,
.hero__halftone,
.hero__glitch,
.glitch-fx__layer,
.glitch-fx__scan,
.glitch-fx__blocks,
.glitch-fx__matrix {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__rgb {
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0.4;
  background:
    linear-gradient(90deg, rgba(180, 40, 40, 0.14), transparent 10%, transparent 90%, rgba(0, 220, 170, 0.1));
}

.hero__halftone {
  z-index: 3;
  opacity: 0.2;
  background-image: radial-gradient(circle, rgba(235, 230, 220, 0.55) 0.55px, transparent 0.7px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 70%, transparent 100%);
}

.hero__glitch {
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(235, 230, 220, 0.02) 2px,
    rgba(235, 230, 220, 0.02) 3px
  );
  opacity: 0.75;
}

.glitch-fx {
  --glitch-pos: center center;
  --glitch-matrix: var(--color-matrix);
  --glitch-cyan: #4fd2ff;
  --glitch-rust: #c45a3a;
  --glitch-cycle: 5s;
  isolation: isolate;
}

.glitch-fx__layer {
  z-index: 2;
  background-image: var(--glitch-src);
  background-size: cover;
  background-position: var(--glitch-pos);
  background-repeat: no-repeat;
  opacity: 0;
  will-change: transform, clip-path, opacity;
}

.glitch-fx__layer--r {
  mix-blend-mode: screen;
  filter: contrast(1.25) sepia(0.45) saturate(2.4) hue-rotate(-18deg) brightness(1.05);
}

.glitch-fx__layer--c {
  mix-blend-mode: screen;
  filter: contrast(1.2) sepia(0.2) saturate(3) hue-rotate(160deg) brightness(1.1);
}

.glitch-fx__layer--g {
  mix-blend-mode: screen;
  filter: contrast(1.35) sepia(0.55) saturate(4.5) hue-rotate(85deg) brightness(1.15);
}

.glitch-fx__scan {
  z-index: 5;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.12) 2px,
      rgba(0, 0, 0, 0.12) 3px
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 229, 168, 0.04) 48%,
      rgba(0, 229, 168, 0.14) 50%,
      rgba(0, 229, 168, 0.04) 52%,
      transparent 100%
    );
  background-size: 100% 100%, 100% 220%;
  mix-blend-mode: soft-light;
}

.glitch-fx__blocks {
  z-index: 6;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent 0%, transparent 12%, rgba(0, 229, 168, 0.18) 12%, rgba(0, 229, 168, 0.18) 14%, transparent 14%, transparent 61%, rgba(196, 90, 58, 0.22) 61%, rgba(196, 90, 58, 0.22) 67%, transparent 67%),
    linear-gradient(180deg, transparent 0%, transparent 28%, rgba(79, 210, 255, 0.12) 28%, rgba(79, 210, 255, 0.12) 31%, transparent 31%, transparent 72%, rgba(0, 0, 0, 0.45) 72%, rgba(0, 0, 0, 0.45) 78%, transparent 78%);
  mix-blend-mode: screen;
}

.glitch-fx__matrix {
  z-index: 4;
  opacity: 0.12;
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 11px,
      rgba(0, 229, 168, 0.07) 11px,
      rgba(0, 229, 168, 0.07) 12px,
      transparent 12px,
      transparent 27px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 6px,
      rgba(0, 229, 168, 0.09) 6px,
      rgba(0, 229, 168, 0.09) 7px,
      transparent 7px,
      transparent 18px
    );
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

@media (min-width: 900px) {
  .hero__plate.glitch-fx .glitch-fx__layer {
    width: 118%;
    height: 108%;
    left: -6%;
    top: -4%;
    right: auto;
    bottom: auto;
  }
}

.hero__annotations {
  position: absolute;
  inset: 8% 4%;
  pointer-events: none;
  z-index: 6;
}

.ann {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: rgba(235, 230, 220, 0.4);
  text-transform: uppercase;
}

.ann--a { top: 0; left: 0; }
.ann--b { top: 0; right: 0; color: color-mix(in srgb, var(--color-matrix) 70%, white); }
.ann--c { bottom: 0; left: 0; }
.ann--d { bottom: 0; right: 0; color: color-mix(in srgb, var(--color-accent-blue) 75%, white); }

@keyframes glitch-slice-r {
  0%, 88%, 100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  89% {
    opacity: 0.7;
    transform: translate(6px, -2px);
    clip-path: inset(12% 0 62% 0);
  }
  91% {
    opacity: 0.55;
    transform: translate(-8px, 1px);
    clip-path: inset(48% 0 22% 0);
  }
  93% {
    opacity: 0.8;
    transform: translate(10px, 0);
    clip-path: inset(5% 0 78% 0);
  }
  95% {
    opacity: 0.35;
    transform: translate(-4px, 2px);
    clip-path: inset(70% 0 8% 0);
  }
  97% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-slice-c {
  0%, 86%, 100% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  87.5% {
    opacity: 0.65;
    transform: translate(-7px, 1px);
    clip-path: inset(22% 0 48% 0);
  }
  90% {
    opacity: 0.5;
    transform: translate(9px, -1px);
    clip-path: inset(58% 0 12% 0);
  }
  92.5% {
    opacity: 0.75;
    transform: translate(-11px, 0);
    clip-path: inset(0 0 70% 0);
  }
  95% {
    opacity: 0.4;
    transform: translate(5px, 2px);
    clip-path: inset(38% 0 40% 0);
  }
  97% {
    opacity: 0;
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-slice-g {
  0%, 90%, 100% {
    opacity: 0;
    transform: translate(0, 0) skewX(0deg);
    clip-path: inset(0 0 0 0);
  }
  91% {
    opacity: 0.55;
    transform: translate(4px, 0) skewX(-1.5deg);
    clip-path: inset(8% 0 55% 0);
  }
  93% {
    opacity: 0.7;
    transform: translate(-6px, 1px) skewX(1deg);
    clip-path: inset(42% 0 18% 0);
  }
  95% {
    opacity: 0.45;
    transform: translate(8px, -1px) skewX(-0.5deg);
    clip-path: inset(65% 0 5% 0);
  }
  97% {
    opacity: 0;
    transform: translate(0, 0) skewX(0deg);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes glitch-base-jitter {
  0%, 87%, 100% {
    transform: translate(0, 0);
    filter: contrast(1.18) brightness(0.9) sepia(0.18) saturate(0.78);
  }
  88.5% {
    transform: translate(3px, 0);
    filter: contrast(1.35) brightness(1.05) sepia(0.1) saturate(1.2) hue-rotate(40deg);
  }
  90% {
    transform: translate(-4px, 1px);
    filter: contrast(1.4) brightness(0.85) sepia(0.25) saturate(0.6);
  }
  92% {
    transform: translate(5px, -1px);
    filter: contrast(1.25) brightness(1.1) sepia(0.05) saturate(1.4) hue-rotate(-20deg);
  }
  94% {
    transform: translate(-2px, 0);
    filter: contrast(1.5) brightness(0.95) sepia(0.3) saturate(0.9);
  }
  96% {
    transform: translate(0, 0);
    filter: contrast(1.18) brightness(0.9) sepia(0.18) saturate(0.78);
  }
}

@keyframes glitch-scan-sweep {
  0% { background-position: 0 0, 0 -120%; }
  100% { background-position: 0 0, 0 220%; }
}

@keyframes glitch-blocks-flash {
  0%, 88%, 100% { opacity: 0; transform: translateX(0); }
  89% { opacity: 0.85; transform: translateX(2px); }
  90.5% { opacity: 0.2; transform: translateX(-6px); }
  92% { opacity: 0.7; transform: translateX(4px); }
  93.5% { opacity: 0.15; transform: translateX(-2px); }
  95% { opacity: 0.55; transform: translateX(0); }
  96.5% { opacity: 0; transform: translateX(0); }
}

@keyframes glitch-matrix-drift {
  0% { background-position: 0 0, 0 0; opacity: 0.08; }
  50% { background-position: 0 24px, 0 -40px; opacity: 0.16; }
  100% { background-position: 0 48px, 0 -80px; opacity: 0.08; }
}

@keyframes hero-boot-flicker {
  0% {
    opacity: 0;
    transform: translate(0, 0) skewX(0deg);
    filter: contrast(1.08) brightness(0.2) sepia(0.08) saturate(0.92);
    clip-path: inset(0 0 0 0);
  }
  4% {
    opacity: 0.95;
    transform: translate(8px, 0) skewX(-2deg);
    filter: contrast(1.6) brightness(1.35) sepia(0.05) saturate(1.8) hue-rotate(70deg);
    clip-path: inset(8% 0 55% 0);
  }
  7% {
    opacity: 0.15;
    transform: translate(-10px, 1px) skewX(1.5deg);
    filter: contrast(2) brightness(0.4) sepia(0.3) saturate(0.5);
    clip-path: inset(48% 0 12% 0);
  }
  10% {
    opacity: 1;
    transform: translate(6px, -1px) skewX(-1deg);
    filter: contrast(1.4) brightness(1.2) sepia(0.1) saturate(2) hue-rotate(-30deg);
    clip-path: inset(0 0 70% 0);
  }
  14% {
    opacity: 0.25;
    transform: translate(-4px, 0);
    filter: contrast(1.8) brightness(0.55) sepia(0.4) saturate(1.2) hue-rotate(120deg);
    clip-path: inset(30% 0 40% 0);
  }
  18% {
    opacity: 0.9;
    transform: translate(12px, 0) skewX(1deg);
    filter: contrast(1.5) brightness(1.1) sepia(0.08) saturate(1.6) hue-rotate(40deg);
    clip-path: inset(62% 0 5% 0);
  }
  22% {
    opacity: 0.35;
    transform: translate(-8px, 2px);
    filter: contrast(1.9) brightness(0.7) sepia(0.2) saturate(0.9);
    clip-path: inset(15% 0 50% 0);
  }
  28% {
    opacity: 1;
    transform: translate(3px, 0) skewX(-0.5deg);
    filter: contrast(1.35) brightness(1.15) sepia(0.12) saturate(1.3) hue-rotate(90deg);
    clip-path: inset(0 0 0 0);
  }
  34% {
    opacity: 0.4;
    transform: translate(-6px, 0);
    filter: contrast(1.7) brightness(0.6) sepia(0.25) saturate(1.4) hue-rotate(-15deg);
    clip-path: inset(40% 0 25% 0);
  }
  42% {
    opacity: 0.95;
    transform: translate(5px, -1px);
    filter: contrast(1.3) brightness(1.05) sepia(0.15) saturate(1.1) hue-rotate(50deg);
    clip-path: inset(5% 0 60% 0);
  }
  50% {
    opacity: 0.55;
    transform: translate(-3px, 0);
    filter: contrast(1.45) brightness(0.85) sepia(0.2) saturate(0.95);
    clip-path: inset(0 0 0 0);
  }
  58% {
    opacity: 1;
    transform: translate(2px, 0);
    filter: contrast(1.25) brightness(1) sepia(0.16) saturate(1) hue-rotate(20deg);
    clip-path: inset(0 0 0 0);
  }
  68% {
    opacity: 0.7;
    transform: translate(-2px, 0);
    filter: contrast(1.3) brightness(0.88) sepia(0.18) saturate(0.9);
    clip-path: inset(0 0 0 0);
  }
  78% {
    opacity: 1;
    transform: translate(1px, 0);
    filter: contrast(1.2) brightness(0.95) sepia(0.18) saturate(0.85);
    clip-path: inset(0 0 0 0);
  }
  88% {
    opacity: 0.85;
    transform: translate(0, 0);
    filter: contrast(1.22) brightness(0.92) sepia(0.18) saturate(0.8);
    clip-path: inset(0 0 0 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) skewX(0deg);
    filter: contrast(1.08) brightness(0.92) sepia(0.08) saturate(0.92);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes hero-boot-slice-r {
  0%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  5% { opacity: 0.85; transform: translate(10px, -2px); clip-path: inset(5% 0 60% 0); }
  12% { opacity: 0.4; transform: translate(-12px, 1px); clip-path: inset(45% 0 15% 0); }
  20% { opacity: 0.9; transform: translate(8px, 0); clip-path: inset(0 0 72% 0); }
  30% { opacity: 0.25; transform: translate(-6px, 2px); clip-path: inset(55% 0 8% 0); }
  42% { opacity: 0.7; transform: translate(5px, 0); clip-path: inset(18% 0 48% 0); }
  55% { opacity: 0.15; transform: translate(-3px, 0); clip-path: inset(0 0 0 0); }
  70% { opacity: 0.45; transform: translate(4px, 0); clip-path: inset(35% 0 40% 0); }
  85% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes hero-boot-slice-c {
  0%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  6% { opacity: 0.75; transform: translate(-9px, 1px); clip-path: inset(20% 0 45% 0); }
  15% { opacity: 0.3; transform: translate(11px, -1px); clip-path: inset(58% 0 10% 0); }
  24% { opacity: 0.85; transform: translate(-7px, 0); clip-path: inset(0 0 55% 0); }
  36% { opacity: 0.2; transform: translate(6px, 2px); clip-path: inset(40% 0 30% 0); }
  48% { opacity: 0.65; transform: translate(-5px, 0); clip-path: inset(8% 0 65% 0); }
  62% { opacity: 0.1; transform: translate(3px, 0); clip-path: inset(0 0 0 0); }
  75% { opacity: 0.4; transform: translate(-4px, 0); clip-path: inset(50% 0 20% 0); }
  90% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}

@keyframes hero-boot-slice-g {
  0%, 100% { opacity: 0; transform: translate(0, 0) skewX(0deg); clip-path: inset(0 0 0 0); }
  8% { opacity: 0.7; transform: translate(7px, 0) skewX(-2deg); clip-path: inset(12% 0 50% 0); }
  18% { opacity: 0.35; transform: translate(-9px, 1px) skewX(1.5deg); clip-path: inset(50% 0 12% 0); }
  28% { opacity: 0.8; transform: translate(10px, 0) skewX(-1deg); clip-path: inset(0 0 68% 0); }
  40% { opacity: 0.2; transform: translate(-5px, 0) skewX(0.5deg); clip-path: inset(32% 0 38% 0); }
  55% { opacity: 0.55; transform: translate(4px, -1px) skewX(-0.5deg); clip-path: inset(65% 0 5% 0); }
  72% { opacity: 0.15; transform: translate(-2px, 0); clip-path: inset(0 0 0 0); }
  88% { opacity: 0; transform: translate(0, 0) skewX(0deg); clip-path: inset(0 0 0 0); }
}

@keyframes hero-boot-blocks {
  0%, 100% { opacity: 0; transform: translateX(0); }
  5% { opacity: 0.42; transform: translateX(4px); }
  10% { opacity: 0.08; transform: translateX(-8px); }
  16% { opacity: 0.34; transform: translateX(6px); }
  22% { opacity: 0.1; transform: translateX(-4px); }
  30% { opacity: 0.28; transform: translateX(3px); }
  40% { opacity: 0.06; transform: translateX(-2px); }
  52% { opacity: 0.24; transform: translateX(5px); }
  65% { opacity: 0.08; transform: translateX(0); }
  78% { opacity: 0.16; transform: translateX(-2px); }
  90% { opacity: 0; transform: translateX(0); }
}

@keyframes hero-boot-scan {
  0% {
    opacity: 0.9;
    background-position: 0 0, 0 -40%;
  }
  40% {
    opacity: 0.75;
    background-position: 0 0, 0 60%;
  }
  100% {
    opacity: 0.55;
    background-position: 0 0, 0 220%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero__plate.glitch-fx .hero__image {
    animation: glitch-base-jitter var(--glitch-cycle) steps(1, end) infinite;
  }

  .js .hero__plate.glitch-fx .glitch-fx__layer--r {
    animation: glitch-slice-r var(--glitch-cycle) steps(1, end) infinite;
  }

  .js .hero__plate.glitch-fx .glitch-fx__layer--c {
    animation: glitch-slice-c var(--glitch-cycle) steps(1, end) 0.15s infinite;
  }

  .js .hero__plate.glitch-fx .glitch-fx__layer--g {
    animation: glitch-slice-g var(--glitch-cycle) steps(1, end) 0.3s infinite;
  }

  .js .hero__plate.glitch-fx .glitch-fx__blocks {
    animation: glitch-blocks-flash var(--glitch-cycle) steps(1, end) infinite;
  }

  .js .hero__plate.glitch-fx .glitch-fx__scan {
    animation: glitch-scan-sweep 4.2s linear infinite;
  }

  .js .hero__plate.glitch-fx .glitch-fx__matrix {
    animation: glitch-matrix-drift 6s linear infinite;
  }

  .glitch-fx:hover .glitch-fx__matrix {
    opacity: 0.22;
  }

  .glitch-fx:hover .glitch-fx__scan {
    opacity: 0.75;
  }

  .hero__plate:hover .hero__rgb {
    opacity: 0.7;
    transition: opacity 150ms var(--easing-editorial);
  }

}

@media (prefers-reduced-motion: reduce) {
  .js .hero__plate.glitch-fx .hero__image,
  .glitch-fx__layer,
  .glitch-fx__scan,
  .glitch-fx__blocks,
  .glitch-fx__matrix {
    animation: none !important;
  }

  .js .hero__plate.glitch-fx .hero__image {
    opacity: 1 !important;
    transform: none !important;
  }

  .glitch-fx__layer,
  .glitch-fx__blocks {
    opacity: 0 !important;
  }

  .glitch-fx__scan {
    opacity: 0.12;
  }

  .glitch-fx__matrix {
    opacity: 0.04;
  }

  .hero__plate:hover .hero__image {
    transform: none;
  }
}