/* Small additions on top of quiz.css (the live quiz's compiled Tailwind, left untouched).
   These replace the Framer Motion animations the React app used. */

/* <picture> wrappers should not change layout: the <img> stays the flex item, like the live page. */
picture { display: contents; }
picture > source { display: none; } /* otherwise it takes a flex "gap" slot */

/* Card enter: opacity 0 -> 1, y 18px -> 0, 0.15s ease-out (live: initial {opacity:0,y:18}). */
@keyframes lq-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Card exit before the next screen (live AnimatePresence mode="wait": exit {opacity:0,y:-18}). */
@keyframes lq-exit { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-18px); } }
@keyframes lq-fade { from { opacity: 0; } to { opacity: 1; } }

.anim-enter { animation: lq-enter 0.15s ease-out backwards; }
.anim-exit { animation: lq-exit 0.15s ease-out forwards; pointer-events: none; }
.anim-fade { animation: lq-fade 0.15s ease-out 0.05s backwards; }

/* Progress bar width change (live: 0.2s, cubic-bezier(0.25, 0.1, 0.25, 1)). */
.progress-fill { transition: width 0.2s cubic-bezier(0.25, 0.1, 0.25, 1); }

/* Headings get focus on each new screen for screen readers; no visible ring needed. */
[tabindex="-1"]:focus { outline: none; }

/* Hidden spam trap on the lead form. */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .anim-enter, .anim-exit, .anim-fade { animation-duration: 0.01ms; animation-delay: 0s; }
  .progress-fill { transition: none; }
}