/* NOTE: animated classes live on elements whose natural position is (0,0).
Layout offsets are carried by wrapper group elements (transform on the wrapper,
animation on the inner element), so the keyframe end-state transform never
clobbers an element's positioning. */
.doc-tile  { opacity: 0; animation: slide-in 0.6s ease-out forwards; }
.doc-tile-1 { animation-delay: 0.15s; }
.doc-tile-2 { animation-delay: 0.30s; }
.doc-tile-3 { animation-delay: 0.45s; }
.doc-tile-4 { animation-delay: 0.60s; }
.doc-tile-5 { animation-delay: 0.75s; }
.field-row { opacity: 0; animation: field-pop 0.4s ease-out forwards; }
.field-row-1 { animation-delay: 1.10s; }
.field-row-2 { animation-delay: 1.25s; }
.field-row-3 { animation-delay: 1.40s; }
.field-row-4 { animation-delay: 1.55s; }
.field-row-5 { animation-delay: 1.70s; }
.field-row-6 { animation-delay: 1.85s; }
.field-row-7 { animation-delay: 2.00s; }
.field-row-8 { animation-delay: 2.15s; }
.group-label { opacity: 0; animation: label-fade 0.3s ease-out forwards; }
.group-label-1 { animation-delay: 1.00s; }
.group-label-2 { animation-delay: 1.45s; }
.group-label-3 { animation-delay: 1.90s; }
.chip { opacity: 0; animation: chip-fade 0.4s ease-out forwards; }
.chip-1 { animation-delay: 2.40s; }
.chip-2 { animation-delay: 2.55s; }
.chip-3 { animation-delay: 2.70s; }
@keyframes slide-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes field-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes label-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes chip-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.doc-tile, .field-row, .group-label, .chip { opacity: 1; animation: none; }
}


/* Opacity-only animation. Positioning is carried solely by SVG transform
attributes on wrapper group elements, never by a keyframe, so a CSS
transform can never override a position and stack the art at the origin. */
.sf-in { opacity: 0; animation: sf-fade 0.5s ease-out forwards; }
.s1 { animation-delay: 0.10s; }
.s2 { animation-delay: 0.30s; }
.s3 { animation-delay: 0.50s; }
.s4 { animation-delay: 0.72s; }
.s5 { animation-delay: 0.92s; }
.s6 { animation-delay: 1.12s; }
.s7 { animation-delay: 1.32s; }
@keyframes sf-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.sf-in { opacity: 1; animation: none; }
}


.er { opacity: 0; animation: fade 0.45s ease-out forwards; }
.er-1 { animation-delay: 0.20s; }
.er-2 { animation-delay: 0.35s; }
.er-3 { animation-delay: 0.50s; }
.er-4 { animation-delay: 0.65s; }
.er-5 { animation-delay: 0.80s; }
.route { opacity: 0; animation: fade 0.5s ease-out forwards; }
.route-a { animation-delay: 1.05s; }
.route-b { animation-delay: 1.20s; }
.dest { opacity: 0; animation: fade 0.5s ease-out forwards; }
.dest-a { animation-delay: 1.35s; }
.dest-b { animation-delay: 1.50s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.er, .route, .dest { animation: none; opacity: 1; }
}