/* motion.css - gentle animations for every page. Switched off for people who prefer reduced motion. */
@view-transition { navigation: auto; }

@keyframes ge-rise  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ge-drop  { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes ge-pop   { 0% { opacity: 0; transform: scale(.94) translateY(10px); } 60% { transform: scale(1.015); } 100% { opacity: 1; transform: none; } }
@keyframes ge-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes ge-step  { from { opacity: .2; transform: scaleY(.55); } to { opacity: 1; transform: none; } }
@keyframes ge-float { 0%, 100% { transform: rotate(2deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-9px); } }

/* Page load: header slides in, then each block of the page rises in turn */
header.top { animation: ge-drop .4s cubic-bezier(.2, .8, .2, 1) both; }
main > * { animation: ge-rise .55s cubic-bezier(.2, .8, .2, 1) both; }
main > *:nth-child(2) { animation-delay: .06s; }
main > *:nth-child(3) { animation-delay: .12s; }
main > *:nth-child(4) { animation-delay: .18s; }
main > *:nth-child(5) { animation-delay: .24s; }
main > *:nth-child(6) { animation-delay: .30s; }
main > *:nth-child(n+7) { animation-delay: .36s; }

/* Results (tracking and order confirmation) pop in; tracking steps fill in one by one */
main > .result { animation: ge-pop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.steps div { transition: background-color .4s ease, color .4s ease; }
.steps div.done { animation: ge-step .45s cubic-bezier(.3, 1.4, .5, 1) both; }
.steps div.done:nth-child(2) { animation-delay: .12s; }
.steps div.done:nth-child(3) { animation-delay: .24s; }
.steps div.done:nth-child(4) { animation-delay: .36s; }

/* Buttons and links respond to touch and hover */
button, a.button, nav a { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease; }
button:not(:disabled):hover, a.button:hover { transform: translateY(-2px); box-shadow: 0 4px 0 rgba(20, 32, 26, .16); }
button:not(:disabled):active, a.button:active { transform: translateY(1px) scale(.98); box-shadow: none; }
header.top nav a:hover { opacity: .8; }

/* Fields glow softly when you tap into them */
input, select, textarea { transition: border-color .2s ease, box-shadow .2s ease; }
input:focus, select:focus, textarea:focus { border-color: var(--green, #0f5b3a); box-shadow: 0 0 0 4px rgba(15, 91, 58, .14); }

/* Admin: new-order banner pops in */
#alert:not(.hidden) { animation: ge-pop .4s cubic-bezier(.3, 1.4, .5, 1) both; }

/* Landing page extras */
.brand img { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover img { transform: rotate(-12deg) scale(1.1); }
.routes div { transition: padding .25s ease, background-color .25s ease; }
.routes div:hover { padding-left: 14px; background: rgba(11, 61, 46, .06); }
.steps li::before { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.steps li:hover::before { transform: scale(1.1) rotate(-5deg); }
.id.rv2.in { animation: ge-float 6s ease-in-out 1s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}