/* DittoTek "self-repairing page" effect. Pairs with fx.js.
   Nothing here applies unless fx.js adds the fx-ready class to <html>,
   so without JavaScript (or with reduced motion) the page is simply normal. */

.fx-ready main { overflow-x: clip; }

/* text that has not been typed yet: invisible but still in the page for screen readers and search engines */
.fx-ready .tw-off { opacity: 0; }

/* zero-width typing cursor, so it never pushes text around */
.tw-cur { display: inline-block; width: 0; height: 1em; position: relative; vertical-align: baseline; pointer-events: none; }
.tw-cur::after {
  content: ""; position: absolute; left: 1px; bottom: -0.15em;
  width: 0.55em; height: 1.15em; background: #33ff88;
  box-shadow: 0 0 8px rgba(51, 255, 136, 0.8);
  animation: fx-cur 0.5s steps(1) infinite;
}
.tw-cur.del::after { background: #ffb020; box-shadow: 0 0 8px rgba(255, 176, 32, 0.8); }
@keyframes fx-cur { 50% { opacity: 0.35; } }

/* cards and boxes: "broken" until something inside them has been typed */
.fx-ready .fx-frame {
  transition: transform 0.5s cubic-bezier(0.2, 1.5, 0.4, 1), opacity 0.3s ease, filter 0.3s ease, border-color 0.3s ease;
  will-change: transform, opacity;
}
.fx-ready .fx-frame.fx-off {
  opacity: 0.3;
  filter: grayscale(1) brightness(0.8);
  border-style: dashed;
  transform: translate(var(--fx-x, 0px), var(--fx-y, 14px)) rotate(var(--fx-r, -0.8deg)) skewX(var(--fx-s, -2deg));
  transition: transform 0.45s cubic-bezier(0.5, 0, 0.9, 0.4), opacity 0.35s ease, filter 0.35s ease;
}
.fx-ready .fx-frame.fx-glitch { animation: fx-glitch 0.38s steps(2, jump-none) 1; }
@keyframes fx-glitch {
  0%   { clip-path: inset(0 0 62% 0); transform: translateX(-5px); }
  25%  { clip-path: inset(38% 0 20% 0); transform: translateX(6px); }
  50%  { clip-path: inset(12% 0 55% 0); transform: translateX(-3px); }
  75%  { clip-path: inset(70% 0 0 0); transform: translateX(4px); }
  100% { clip-path: inset(0); transform: none; }
}

@media print {
  .fx-ready .tw-off { opacity: 1; }
  .fx-ready .fx-frame.fx-off { opacity: 1; filter: none; transform: none; border-style: solid; }
  .tw-cur { display: none; }
}