/* Kinetic Folder Entry Animation */
@keyframes folder-drop {
  0% {
    transform: translateY(40px) scale(0.95) rotate(1deg);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
}
.animate-folder {
  animation: folder-drop 0.6s cubic-bezier(0.2, 1, 0.3, 1) forwards;
}

/* Folder Tab Geometry */
.folder-tab {
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
  transition: all 0.3s ease;
}

.dossier-bg {
  background-color: #0d0e10;
  background-image:
    radial-gradient(
      circle at 50% 50%,
      rgba(26, 28, 30, 0.1) 0%,
      transparent 80%
    ),
    url("https://www.transparenttextures.com/patterns/stardust.png");
}

/* Enhanced Stacked Folder Shadows */
.paper-sheet {
  background: #f4f1ea;
  box-shadow:
        /* Immediate Edge */
    0 0 0 1px rgba(0, 0, 0, 0.1),
    /* Manila Folder Tab Offset (The "Backing") */ 0 -8px 0 -2px #dccdbb,
    0 -5px 0 -1px #1a1c1e,
    /* Deeper Stack Layer */ 0 -16px 0 -4px #c5b8a5,
    0 -8px 0 -3px #1a1c1e,
    /* Ambient Room Shadow */ 0 50px 100px -20px rgba(0, 0, 0, 0.6);
}

.redacted-text {
  position: relative;
  background: #1a1c1e;
  color: #1a1c1e;
  transition: color 0.3s ease;
  cursor: help;
}
.redacted-text:hover,
.redacted-text:focus-visible {
  color: #294936; /* matches pine token */
  background-color: #f4f1ea; /* matches paper token */
}

.stamp-effect {
  border: 3px solid var(--stamp);
  color: var(--stamp);
  transform: rotate(-12deg) scale(1.1);
  filter: drop-shadow(1px 1px 0px rgba(0, 0, 0, 0.1));
  mix-blend-mode: multiply;
}

.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://grainy-gradients.vercel.app/noise.svg");
  opacity: 0.04;
  pointer-events: none;
  z-index: 100;
}

/* ──────────── ⚡ OVERDRIVE: BOOT SEQUENCE ───────────── */
.boot-typewriter,
.boot-glitch,
.boot-fade {
    opacity: 0;
}

.boot-typewriter.is-typing {
    opacity: 1;
}

.boot-typewriter.is-typing::after {
    content: '_';
    animation: boot-blink 0.8s step-end infinite;
    display: inline-block;
    margin-left: 4px;
}

.boot-typewriter.is-finished {
    opacity: 1;
}

.boot-glitch.is-glitching,
.boot-glitch.is-resolved {
    opacity: 1;
}

.boot-fade.is-visible {
    animation: boot-fade-in 0.8s ease forwards;
}

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

@keyframes boot-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ──────────── ⚡ OVERDRIVE: CIPHER GLITCH ───────────── */
.cipher-link {
  position: relative;
  display: inline-block;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.cipher-link.is-resolved,
.cipher-link:hover,
.cipher-link:focus-visible {
  color: #294936; /* pine */
}

.cipher-link::before,
.cipher-link::after,
.redacted-text::before,
.redacted-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.cipher-link.is-glitching::before,
.cipher-link.is-glitching::after,
.redacted-text.is-glitching::before,
.redacted-text.is-glitching::after {
  opacity: 1;
}

.cipher-link.is-glitching::before,
.redacted-text.is-glitching::before {
  left: -2px;
  text-shadow: 2px 0 #be123c; /* stamp */
  animation: cipher-glitch-1 0.2s infinite linear alternate-reverse;
}

.cipher-link.is-glitching::after,
.redacted-text.is-glitching::after {
  left: 2px;
  text-shadow: -2px 0 #5b8266; /* jungle */
  animation: cipher-glitch-2 0.3s infinite linear alternate-reverse;
}

@keyframes cipher-glitch-1 {
  0% {
    clip-path: inset(20% 0 80% 0);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
  }
  40% {
    clip-path: inset(40% 0 50% 0);
  }
  60% {
    clip-path: inset(80% 0 5% 0);
  }
  80% {
    clip-path: inset(10% 0 70% 0);
  }
  100% {
    clip-path: inset(30% 0 50% 0);
  }
}

@keyframes cipher-glitch-2 {
  0% {
    clip-path: inset(10% 0 60% 0);
  }
  20% {
    clip-path: inset(30% 0 20% 0);
  }
  40% {
    clip-path: inset(70% 0 10% 0);
  }
  60% {
    clip-path: inset(20% 0 50% 0);
  }
  80% {
    clip-path: inset(50% 0 30% 0);
  }
  100% {
    clip-path: inset(5% 0 80% 0);
  }
}