/* A TFT backlight waking up, followed by slow pixel response. No layout motion. */
@keyframes lcd-backlight-wake {
  0% { opacity: .86; }
  38% { opacity: .38; }
  72% { opacity: .08; }
  100% { opacity: 0; }
}
.lcd-boot body::after {
  content: ''; position: fixed; inset: 0; z-index: 10004;
  pointer-events: none; background: #080b10;
  animation: lcd-backlight-wake 700ms ease-out both;
}
@keyframes lcd-logo-wake {
  0% { opacity: .12; clip-path: inset(0 0 100%); filter: brightness(.7); }
  40% { opacity: .6; clip-path: inset(0 0 56%); filter: brightness(.85); }
  70% { opacity: .85; clip-path: inset(0 0 17%); filter: brightness(1.08); }
  100% { opacity: 1; clip-path: inset(0); filter: brightness(1); }
}
.lcd-boot .brand-logo { animation: lcd-logo-wake 520ms steps(4, end) 100ms backwards; }
@keyframes lcd-text-wake {
  from { opacity: .05; filter: brightness(.7) drop-shadow(1px 0 0 #a7d7bd55); }
  65% { opacity: .85; filter: brightness(1.05) drop-shadow(1px 0 0 #a7d7bd22); }
  to { opacity: 1; filter: none; }
}
.lcd-boot .brand-wordmark { animation: lcd-text-wake 360ms steps(4, end) 270ms backwards; }
.lcd-boot .brand-copy p { animation: lcd-text-wake 320ms ease-out 390ms backwards; }
.lcd-boot .site-nav { animation: lcd-text-wake 300ms ease-out 470ms backwards; }
.lcd-boot .site-footer { animation: lcd-text-wake 300ms ease-out 650ms backwards; }

/* Copies of the logo background only: no DOM snapshots or image filters at idle. */
.brand-logo.lcd-glitch-band::after,
.brand-logo.lcd-glitch-retain::before {
  content: ''; display: block; position: absolute; inset: 0;
  pointer-events: none; background: inherit;
}
@keyframes lcd-band-fault {
  0%, 100% { opacity: 0; transform: translateX(0); }
  18%, 48% { opacity: .55; transform: translateX(2px); }
  65% { opacity: .2; transform: translateX(-1px); }
}
.brand-logo.lcd-glitch-band::after {
  clip-path: inset(var(--lcd-fault-row, 42%) 0 calc(100% - var(--lcd-fault-row, 42%) - 5%) 0);
  animation: lcd-band-fault 160ms steps(1, end) both;
}
@keyframes lcd-logo-retain {
  from { opacity: .24; transform: translateX(1px); }
  to { opacity: 0; transform: translateX(1px); }
}
.brand-logo.lcd-glitch-retain::before { animation: lcd-logo-retain 200ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .lcd-boot body::after { display: none; }
  .lcd-boot :is(.brand-logo, .brand-wordmark, .brand-copy p, .site-nav, .site-footer) { animation: none; }
  .brand-logo.lcd-glitch-band::after, .brand-logo.lcd-glitch-retain::before { display: none; }
}