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

@keyframes reveal {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-up {
  to { opacity: 1; transform: translateY(0); }
}

.glitch { position: relative; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}
.glitch::before {
  color: var(--magenta);
  transform: translate(-2px, 0);
  animation: glitch-a 2.6s infinite linear alternate-reverse;
}
.glitch::after {
  color: var(--cyan);
  transform: translate(2px, 0);
  animation: glitch-b 2s infinite linear alternate-reverse;
}
@keyframes glitch-a {
  0%   { clip-path: inset(0 0 82% 0); }
  20%  { clip-path: inset(30% 0 40% 0); }
  40%  { clip-path: inset(60% 0 8% 0); }
  60%  { clip-path: inset(12% 0 70% 0); }
  80%  { clip-path: inset(45% 0 30% 0); }
  100% { clip-path: inset(75% 0 5% 0); }
}
@keyframes glitch-b {
  0%   { clip-path: inset(70% 0 8% 0); }
  20%  { clip-path: inset(10% 0 65% 0); }
  40%  { clip-path: inset(40% 0 35% 0); }
  60%  { clip-path: inset(80% 0 5% 0); }
  80%  { clip-path: inset(20% 0 55% 0); }
  100% { clip-path: inset(50% 0 30% 0); }
}

.recon-scanline {
  position: absolute;
  left: 0; right: 0;
  height: 42px;
  top: -42px;
  background: linear-gradient(
    to bottom,
    rgba(0,255,157,0) 0%,
    rgba(0,255,157,0.12) 50%,
    rgba(0,255,157,0) 100%
  );
  animation: sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%   { top: -42px; }
  100% { top: 100%; }
}

.panel {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.panel.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0s);
}
.panel.in-view .reveal-item {
  opacity: 1;
  transform: translateY(0);
}

.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 90;              
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fx-layer.on { opacity: 1; }

.fx-glitch { animation: fx-shake 0.14s infinite; }
.fx-glitch .site {
  animation: fx-rgb 0.18s steps(2) infinite;
}
@keyframes fx-shake {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3px, 1px); }
  50%  { transform: translate(2px, -2px); }
  75%  { transform: translate(-2px, -1px); }
  100% { transform: translate(3px, 2px); }
}
@keyframes fx-rgb {
  0%   { filter: none; }
  50%  { filter: drop-shadow(-3px 0 0 rgba(255,46,136,0.85)) drop-shadow(3px 0 0 rgba(34,211,238,0.85)); }
  100% { filter: drop-shadow(3px 0 0 rgba(255,46,136,0.7)) drop-shadow(-3px 0 0 rgba(34,211,238,0.7)); }
}

.fx-static {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  opacity: 0.28;
  mix-blend-mode: screen;
  animation: fx-staticmove 0.12s steps(3) infinite;
}
@keyframes fx-staticmove {
  0% { transform: translate(0,0); } 100% { transform: translate(-30px,20px); }
}
.fx-tear {
  position: absolute; left: 0; right: 0; height: 12%;
  top: 40%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,157,0.12) 0px, rgba(0,255,157,0.12) 2px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 5px);
  animation: fx-tearmove 1.6s linear infinite;
}
@keyframes fx-tearmove {
  0% { top: -12%; } 100% { top: 100%; }
}

.fx-center-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.6rem; text-align: center;
}
.fx-big {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 6vw, 3.4rem);
  color: var(--magenta);
  letter-spacing: 0.15em;
  text-shadow: 0 0 18px rgba(255,46,136,0.7);
  animation: fx-flicker 0.5s steps(2) infinite;
}
.fx-sub { font-family: var(--font-mono); color: var(--green); font-size: 0.95rem; opacity: 0.85; }
@keyframes fx-flicker {
  0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}

.fx-scrim { position: absolute; inset: 0; background: rgba(2,4,6,0.82); }
.fx-terminal {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, 88vw);
  border: 1px solid var(--border-hot);
  background: rgba(3,10,8,0.96);
  box-shadow: 0 0 40px rgba(0,255,157,0.2);
  padding: 1.3rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.fx-line { color: var(--green); line-height: 1.9; white-space: nowrap; overflow: hidden; }
.fx-line b { color: #eafff5; }
.fx-line.fx-flash { color: var(--magenta); animation: fx-flicker 0.4s steps(2) infinite; font-weight: 700; }
.fx-line.fx-dim { color: var(--muted); }

.fx-surge #matrix { opacity: 0.95 !important; transition: opacity 0.3s; }

.fx-crtoff {
  position: absolute; inset: 0; background: #000;
  animation: fx-crtoff 0.7s ease forwards;
}
@keyframes fx-crtoff {
  0%   { clip-path: inset(0 0 0 0); opacity: 1; }
  55%  { clip-path: inset(49.5% 0 49.5% 0); opacity: 1; }
  70%  { clip-path: inset(49.9% 0 49.9% 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}
.fx-crt .site { animation: fx-crt-collapse 0.7s ease; }
@keyframes fx-crt-collapse {
  0% { transform: scaleY(1); filter: brightness(1); }
  55% { transform: scaleY(0.004); filter: brightness(3); }
  70% { transform: scaleY(0.004); filter: brightness(3); }
  100% { transform: scaleY(1); filter: brightness(1); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after,
  .recon-scanline, .blink, .type-cursor, .boot-cursor {
    animation: none !important;
  }
  .panel { opacity: 1; transform: none; }
  .card,
  .reveal-item { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .scroll-progress { transition: none !important; }
  
  .fx-layer { display: none !important; }
  .fx-glitch, .fx-glitch .site,
  .fx-surge #matrix, .fx-crt .site { animation: none !important; filter: none !important; transform: none !important; }
}