/* Visually hidden but accessible to screen readers and search engines */
.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;
}

/* Cinematic signature reveal + CRT hover animations */

/* ── ENTRANCE: Red frame ── */
#logo {
  opacity: 0;
  transform: scale(1.06);
  filter: blur(6px) brightness(1.8);
  animation: frameSlam 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes frameSlam {
  0% {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(6px) brightness(1.8);
  }
  70% {
    opacity: 1;
    transform: scale(0.985);
    filter: blur(0px) brightness(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px) brightness(1);
  }
}

/* ── ENTRANCE: Signature (dark paths) ── */
#sig {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(8px);
  animation:
    sigFlash 0.08s linear 0.35s forwards,
    sigReveal 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.43s forwards;
}

/* Brief bright flash before the signature resolves */
@keyframes sigFlash {
  0% {
    opacity: 0;
    filter: blur(8px) brightness(3);
  }
  100% {
    opacity: 0.6;
    filter: blur(4px) brightness(2);
  }
}

@keyframes sigReveal {
  0% {
    opacity: 0.6;
    transform: scale(1.04);
    filter: blur(4px) brightness(2);
  }
  50% {
    opacity: 1;
    transform: scale(0.99);
    filter: blur(0px) brightness(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0px) brightness(1);
  }
}

/* ── ENTRANCE: Header text ── */
.signature-container .header.top {
  opacity: 0;
  transform: translateY(-6px);
  animation: textSnap 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.05s forwards;
}

.signature-container .header.bot {
  opacity: 0;
  transform: translateY(6px);
  animation: textSnap 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}

@keyframes textSnap {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── HOVER: CRT grain on red frame via SVG filter ── */

/*
 * After entrance, JS clears animation and sets inline filter/opacity/transform
 * to their final values. The transition is placed on the resting state so both
 * hover-in and hover-out animate. !important overrides the inline filter:none.
 * #sig is never filtered — signature stays perfectly clean.
 */
.sig-ready #logo {
  transition: filter 0.15s ease;
}

.sig-ready:hover #logo {
  filter: url(#crt-noise) !important;
}