/* Finale for the last 12 seconds (js/countdown-finale.js). Only adds layers on top; existing styles are untouched. */

/* lights down: page content fades, the background stays */
.fn-dim :is(main, .counter, .plant, .bubble, .marks, #garden, .garden-shade) {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity var(--fn-dim, 2000ms) ease-in-out !important;
}
/* lights up after zero */
.fn-lift :is(main, .counter, .plant, .bubble, .marks, #garden, .garden-shade) {
  transition: opacity var(--fn-lift, 1400ms) ease !important;
}

.fn {
  position: fixed; inset: 0; z-index: 10;
  pointer-events: none; overflow: hidden;
  color: var(--ink);
}
.fn-veil { position: absolute; inset: 0; background: #000; opacity: 0; will-change: opacity; }
.fn-fx { position: absolute; inset: 0; width: 100%; height: 100%; will-change: translate; }
/* faint CRT scan lines, faded in by the glitchier numbers */
.fn-scan {
  position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.32) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
  will-change: opacity;
}
.fn-flash {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 252, 240, 0.95) 0%, rgba(255, 250, 235, 0.5) 50%, rgba(255, 250, 235, 0.15) 100%);
  will-change: opacity;
}