/* Root variables & dark palette */
:root{
  --bg: #0b0b0d;
  --bg-alt: #111216;
  --card: #15161b;
  --text: #e8e8ec;
  --muted: #9aa0a6;
  --accent: #6cf0ff;
  --accent-2: #7f5af0;
  --ring: #2a2d37;
  --radius: 14px;
  --space: clamp(14px, 1.5vw, 24px);
  --w-max: 1200px;
  --shadow: 0 10px 30px rgba(0,0,0,.45);
  --glow-accent: 0 0 40px rgba(108, 240, 255, 0.3);
  --danger: #ff4757;
  --success: #26de81;
}

.logo {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  gap: 0.6rem;
}

.logo span {
  color: var(--accent-dark);
}

.logo-img {
  width: 42px;
  height: 42px;

  transition: transform 0.3s ease;
}

.logo:hover .logo-img {
  transform: scale(1.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; 
  background: var(--bg);
  color:var(--text); 
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  position: relative;
  overflow-x: hidden;
}

/* Animated Background Matrix Effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(108, 240, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(127, 90, 240, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(108, 240, 255, 0.05) 0%, transparent 50%);
  animation: backgroundPulse 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes backgroundPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* === About Me Section (Desert-Cyber Palette with Soft Corners) === */
.about-section {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
  padding: 6rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 1100px;
  margin: auto;
  background: rgba(24,30,44,0.6);
  border-radius: calc(var(--radius) * 1.5);
  padding: 3rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Profile Image */
.about-image {
  flex: 0 0 260px;
  text-align: center;
}

.about-image img {
  width: 220px;
  height: 220px;
  border-radius: 25px; /* softened corners */
  border: 4px solid var(--accent);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  object-fit: cover;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(191,168,113,0.5);
}

/* Text Area */
.about-content {
  flex: 1 1 400px;
  color: var(--text);
}

.about-content h2 {
  color: var(--accent);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.about-content p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
  color: var(--muted);
  background: rgba(61,70,79,0.4);
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius);
}

/* Icons Grid (2 rows: 2 + 3) */
.about-icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

.icon-row {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}

/* Icon images */
.icon-row a img {
  width: 70px;
  height: 70px;
  border-radius: 16px; /* soft corners instead of perfect circle */
  border: 3px solid var(--accent);
  background: var(--bg-alt);
  padding: 10px;
  box-shadow: 0 0 15px rgba(236,213,159,0.25);
  transition: all 0.3s ease;
  object-fit: cover;
}

.icon-row a img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 25px rgba(236,213,159,0.5);
  border-color: var(--accent-dark);
  background: var(--accent);
  border-radius: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .about-container {
    flex-direction: column;
    text-align: center;
  }
  .about-image img {
    width: 180px;
    height: 180px;
  }
  .icon-row a img {
    width: 60px;
    height: 60px;
  }
  .about-content p {
    font-size: 1rem;
  }
}


/* Matrix Rain Effect */
.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  opacity: 0.1;
}

.matrix-rain::before {
  content: '10110101001011010101110010110101001011010101110010110101001011010101110';
  position: absolute;
  font-family: monospace;
  font-size: 12px;
  color: var(--accent);
  top: -100%;
  left: 0;
  width: 100%;
  height: 200%;
  line-height: 1.2;
  word-break: break-all;
  animation: matrixFall 20s linear infinite;
  text-shadow: 0 0 5px currentColor;
  opacity: 0.3;
}

@keyframes matrixFall {
  to { transform: translateY(100%); }
}

/* Container & layout helpers */
.container{
  width:min(100% - 2*var(--space), var(--w-max)); 
  margin-inline:auto;
  position: relative;
  z-index: 2;
}
.container.narrow{width:min(100% - 2*var(--space), 800px)}
.section{padding: clamp(56px, 9vw, 120px) 0}
.section.alt{
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  position: relative;
}

/* Animated Grid Background */
.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(108, 240, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 240, 255, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: gridMove 60s linear infinite;
  pointer-events: none;
}

@keyframes gridMove {
  0% { transform: translate(0, 0); }
  100% { transform: translate(50px, 50px); }
}

/* Header with Glassmorphism */
.site-header{
  position:sticky; 
  top:0; 
  backdrop-filter: saturate(180%) blur(20px); 
  background: rgba(11, 11, 13, 0.75);
  border-bottom:1px solid rgba(108, 240, 255, 0.1); 
  z-index:100;
  transition: all 0.3s ease;
}

.site-header:hover {
  border-bottom-color: rgba(108, 240, 255, 0.3);
  box-shadow: 0 4px 30px rgba(108, 240, 255, 0.1);
}

.header-inner{
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  padding: .8rem 0;
}

/* Animated Logo */
.logo{
  font-weight:800; 
  letter-spacing:.5px; 
  color:var(--text); 
  text-decoration:none;
  position: relative;
  transition: all 0.3s ease;
}

.logo span{
  color:var(--accent);
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { 
    text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
  }
  50% { 
    text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent), 0 0 60px var(--accent);
  }
}

/* Navigation with Hover Effects */
.nav .menu{
  list-style:none; 
  margin:0; 
  padding:0; 
  display:flex; 
  gap: clamp(14px, 2vw, 28px);
}

.nav a{
  color:var(--muted); 
  text-decoration:none;
  position: relative;
  transition: color 0.3s ease;
  padding: 4px 0;
}

.nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.3s ease;
}

.nav a:hover::after,
.nav a:focus::after {
  width: 100%;
}

.nav a:hover,
.nav a:focus{
  color:var(--text);
}

.nav-toggle{
  display:none; 
  background:none; 
  border:0; 
  cursor:pointer;
}

.nav-toggle .bar{
  display:block; 
  width:24px; 
  height:2px; 
  background:var(--text); 
  margin:5px 0;
  transition: all 0.3s ease;
}

/* Hero Section with Dynamic Elements */
.hero{
  min-height:72vh; 
  display:grid; 
  place-items:center; 
  position:relative; 
  overflow:hidden;
}

.hero-inner{
  display:grid; 
  grid-template-columns: 1.2fr .8fr; 
  gap: min(6vw, 60px); 
  align-items:center;
}

.hero-copy h1{
  font-size: clamp(34px, 7vw, 64px); 
  margin:0 0 .25em; 
  text-wrap:balance;
  animation: slideInLeft 1s ease-out;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-copy .lead{
  font-size: clamp(16px, 2.2vw, 20px); 
  color:var(--muted); 
  max-width:55ch;
  animation: slideInLeft 1s ease-out 0.2s backwards;
}

.glow{
  text-shadow: 
    0 0 20px rgba(108, 240, 255, 0.5),
    0 0 40px rgba(108, 240, 255, 0.3),
    0 0 60px rgba(108, 240, 255, 0.1);
}

/* Animated Button */
.btn{
  display:inline-block; 
  margin-top:1.2rem; 
  padding:.9rem 1.2rem; 
  border-radius: calc(var(--radius) - 4px); 
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); 
  color:#000; 
  font-weight:700; 
  text-decoration:none; 
  box-shadow:var(--shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: slideInLeft 1s ease-out 0.4s backwards;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.btn:hover::before {
  left: 100%;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px rgba(108, 240, 255, 0.3);
}

.btn:focus-visible{
  outline:2px solid var(--accent);
}

/* Hero Visual with Cyber Elements */
.hero-visual{
  position:relative; 
  aspect-ratio: 1 / 1; 
  isolation:isolate;
}

/* Animated Security Scanner Effect */
.noise{
  position:absolute; 
  inset:-20%; 
  background:
    repeating-linear-gradient(0deg, transparent 0 1px, rgba(108, 240, 255, 0.03) 1px 2px),
    repeating-linear-gradient(90deg, transparent 0 1px, rgba(127, 90, 240, 0.03) 1px 2px);
  mix-blend-mode: screen; 
  opacity:.5; 
  animation: scan 8s linear infinite;
}

@keyframes scan {
  0% { transform: translateY(0); }
  100% { transform: translateY(20px); }
}

/* Dynamic Grid Pattern */
.gridlines {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center,
      rgba(108,240,255,0.15) 0%,
      rgba(127,90,240,0.10) 40%,
      rgba(0,0,0,0.0) 70%);
  opacity: .45;
  animation: spinCircle 20s linear infinite;
  transform-origin: center;
}
@keyframes spinCircle {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.gridlines::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(108,240,255,.12), transparent 90%);
  animation: spinCircle 40s linear infinite reverse;
  mix-blend-mode: overlay;
}
.floating-elements {
  display: none !important;
  pointer-events: none;
  animation: none;
  opacity: 0;
}
/* Floating Orb with Pulse Effect */
.orb{
  position:absolute; 
  width:46%; 
  aspect-ratio:1; 
  right:8%; 
  bottom:6%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(124,255,255,.8), rgba(127,90,240,.5) 45%, transparent 70%);
  filter: blur(20px); 
  animation: 
    float 10s ease-in-out infinite,
    pulse 4s ease-in-out infinite;
}

@keyframes float { 
  0%,100%{transform:translate(0,0) scale(1)} 
  25%{transform:translate(-10px,-15px) scale(1.05)} 
  50%{transform:translate(5px,-20px) scale(1.1)} 
  75%{transform:translate(15px,-10px) scale(1.05)}
}

@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Animated Service Cards */
.cards{
  display:grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: clamp(16px,2.2vw,28px);
}

.card{
  background:linear-gradient(135deg, rgba(21, 22, 27, 0.9), rgba(17, 18, 22, 0.9));
  border:1px solid rgba(108, 240, 255, 0.1); 
  border-radius:var(--radius); 
  padding: clamp(14px,2.4vw,22px);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease-out backwards;
}

.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card Hover Effect with Security Scan Animation */
.card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--accent), var(--accent-2), var(--accent));
  border-radius: var(--radius);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  animation: borderRotate 3s linear infinite;
}

@keyframes borderRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/*
.card:hover::before {
  opacity: 1;
}
*/
.card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 
    0 20px 40px rgba(108, 240, 255, 0.2),
    inset 0 0 30px rgba(108, 240, 255, 0.05);
}

/* Card Scanning Line Effect */
.card::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(108, 240, 255, 0.1), transparent);
  transition: top 1s ease;
}

.card:hover::after {
  top: 100%;
}

.card h3{
  margin-top:0;
  color: var(--accent);
  transition: color 0.3s ease;
}

.card:hover h3 {
  text-shadow: 0 0 10px currentColor;
}

/* Gallery with 3D Tilt Effect */
.gallery{
  --size: minmax(240px,1fr); 
  display:grid; 
  grid-template-columns: repeat(auto-fit, var(--size)); 
  gap: clamp(12px, 2vw, 20px);
}

.tile{
  position:relative; 
  overflow:hidden; 
  border-radius: var(--radius); 
  border:1px solid rgba(108, 240, 255, 0.1); 
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  animation: tileFloat 6s ease-in-out infinite;
}

.tile:nth-child(odd) {
  animation-delay: 0s;
}

.tile:nth-child(even) {
  animation-delay: 3s;
}

@keyframes tileFloat {
  0%, 100% { 
    transform: translateY(0) rotateX(0) rotateY(0); 
  }
  25% { 
    transform: translateY(-5px) rotateX(2deg) rotateY(-2deg); 
  }
  50% { 
    transform: translateY(-10px) rotateX(-1deg) rotateY(1deg); 
  }
  75% { 
    transform: translateY(-5px) rotateX(1deg) rotateY(2deg); 
  }
}

.tile:hover {
  transform: translateY(-10px) scale(1.05);
  border-color: var(--accent);
  box-shadow: 
    0 30px 60px rgba(108, 240, 255, 0.3),
    inset 0 0 20px rgba(108, 240, 255, 0.1);
}

.tile img{
  display:block; 
  width:100%; 
  height:100%; 
  object-fit:cover;
  transition: transform 0.3s ease;
}

.tile:hover img {
  transform: scale(1.1);
}

/* Cybersecurity Pattern Fallback */
.tile-fallback{
  display:block; 
  width:100%; 
  aspect-ratio: 3/2; 
  background:
    linear-gradient(45deg, transparent 30%, rgba(108, 240, 255, 0.1) 50%, transparent 70%),
    radial-gradient(circle at 20% 50%, rgba(127, 90, 240, 0.2), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(108, 240, 255, 0.2), transparent 50%),
    linear-gradient(135deg, #1b1d22, #0d0f13);
  position: relative;
}

.tile-fallback::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(108, 240, 255, 0.05) 2px 4px),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(127, 90, 240, 0.05) 2px 4px);
  animation: gridScan 10s linear infinite;
}

@keyframes gridScan {
  0% { transform: translate(0, 0); }
  100% { transform: translate(4px, 4px); }
}

.tile figcaption{
  position:absolute; 
  inset:auto 0 0 0; 
  padding: 12px 14px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  color:#eaeaf0; 
  display:flex; 
  align-items:center; 
  justify-content:space-between;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.tile:hover figcaption {
  transform: translateY(0);
}

.more{
  color:var(--accent); 
  text-decoration:none;
  position: relative;
  padding-left: 20px;
  transition: all 0.3s ease;
}

.more::before {
  content: '→';
  position: absolute;
  left: 0;
  transition: transform 0.3s ease;
}

.more:hover::before {
  transform: translateX(5px);
}

/* About Section with Typing Effect */
.section h2 {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.section h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: left;
  animation: expandLine 1s ease-out forwards;
}

@keyframes expandLine {
  to { transform: scaleX(1); }
}

/* Contact Section */
.contact-list{
  list-style:none; 
  padding:0; 
  margin:0; 
  display:grid; 
  gap:16px;
}

.contact-list li {
  padding: 12px;
  background: rgba(21, 22, 27, 0.5);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.contact-list li:hover {
  background: rgba(21, 22, 27, 0.8);
  transform: translateX(10px);
  box-shadow: 0 5px 20px rgba(108, 240, 255, 0.1);
}

.contact-list a {
  color: var(--accent);
  text-decoration: none;
  transition: all 0.3s ease;
}

.contact-list a:hover {
  text-shadow: 0 0 10px currentColor;
}

.muted{color:var(--muted)}

/* Footer with Gradient Border */
.site-footer{
  border-top:1px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, var(--accent), var(--accent-2)) border-box;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: footerScan 3s linear infinite;
}

@keyframes footerScan {
  to { left: 100%; }
}

.footer-inner{
  text-align:center; 
  padding: 28px 0;
  position: relative;
  z-index: 1;
}

/* Accessibility & motion */
.sr-only{
  position:absolute; 
  width:1px; 
  height:1px; 
  padding:0; 
  margin:-1px; 
  overflow:hidden; 
  clip:rect(0,0,0,0); 
  white-space:nowrap; 
  border:0;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .orb,
  .tile,
  .card::after,
  .card::before,
  .hero-visual *,
  .matrix-rain::before,
  body::before,
  .section::before {animation:none}
  .card,
  .tile,
  .btn {transition: transform 0.2s ease}
}

/* Responsive nav */
@media (max-width: 860px){
  .nav-toggle{display:block}
  .nav{
    position:fixed; 
    inset:60px 0 auto 0; 
    transform: translateY(-130%); 
    transition: transform .35s ease; 
    background: rgba(11, 12, 16, 0.95); 
    backdrop-filter: blur(20px); 
    border-bottom:1px solid rgba(108, 240, 255, 0.2);
  }
  .nav.open{transform: translateY(0)}
  .nav .menu{flex-direction:column; padding: 12px var(--space)}
  .hero-inner{grid-template-columns: 1fr}
  .hero-visual {display: none}
}

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

/* Loading Animation for Dynamic Content */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.loading {
  background: linear-gradient(90deg, 
    var(--card) 25%, 
    rgba(108, 240, 255, 0.1) 50%, 
    var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Terminal Cursor Effect for Headings */
h1::after,
h2::after {
  content: '_';
  display: inline-block;
  color: var(--accent);
  animation: blink 1s infinite;
  margin-left: 2px;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Security Alert Animations */
.alert {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  background: rgba(21, 22, 27, 0.95);
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  color: var(--text);
  box-shadow: 0 10px 30px rgba(255, 71, 87, 0.3);
  animation: slideInRight 0.5s ease-out;
  z-index: 1000;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Glitch Effect for Special Elements */
.glitch {
  position: relative;
  color: var(--accent);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.3s infinite;
  color: var(--danger);
  z-index: -1;
}

.glitch::after {
  animation: glitch-2 0.3s infinite;
  color: var(--success);
  z-index: -2;
}

@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 2px); }
  40% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -2px); }
  60% { clip-path: inset(80% 0 10% 0); transform: translate(-1px, 1px); }
  80% { clip-path: inset(10% 0 80% 0); transform: translate(1px, -1px); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(0 0 0 0); }
  20% { clip-path: inset(80% 0 10% 0); transform: translate(1px, -1px); }
  40% { clip-path: inset(10% 0 80% 0); transform: translate(-1px, 1px); }
  60% { clip-path: inset(20% 0 60% 0); transform: translate(2px, -2px); }
  80% { clip-path: inset(50% 0 20% 0); transform: translate(-2px, 2px); }
}