/* Motion (2.79.0), linked in the <head> of every page so the page-change rule is there before the first paint.
   Short and never in the way; everything is off for people whose system asks for reduced motion.
   The behaviour (new-row marking, hiding success messages, menu order) is in static/js/app-guard.js. */

/* 1. Page changes: the browser cross-fades from one page to the next (Chrome / Edge; others change pages as before). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; animation-timing-function: ease-out; }

/* 2. Messages slide in; short success messages fold away after a few seconds (app-guard.js adds .ag-hide). */
@keyframes agFlashIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.flash-message { animation: agFlashIn .3s ease-out both; }
.flash-message.ag-hide {
    opacity: 0; max-height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
    padding-top: 0 !important; padding-bottom: 0 !important; border-width: 0 !important; overflow: hidden;
    transition: opacity .35s ease, max-height .35s ease .1s, margin .35s ease .1s, padding .35s ease .1s;
}
/* A row that was not in the list before the save lights up green and fades back. */
@keyframes agNewRow { 0%, 35% { background-color: #dff3e5; } 100% { background-color: transparent; } }
tr.ag-new > td { animation: agNewRow 2.8s ease-out; }
tr.ag-new > td:first-child { box-shadow: inset 3px 0 0 #2fbf5b; }

/* 4. ☰ menu: a smoother slide, and the entries appear one after another (--ag-i is set by app-guard.js). */
.hb-drawer { transition-timing-function: cubic-bezier(.2, .8, .2, 1) !important; }
@keyframes agHbItem { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.hb-drawer.show .hb-item { animation: agHbItem .22s ease-out backwards; animation-delay: calc(var(--ag-i, 0) * 15ms + 40ms); }

/* 3. Bars fill once when the page opens (fuel tanks and mobile pumps, landfill quota). Numbers marked data-ag-count
   count up in app-guard.js and end on the page's own text. */
@keyframes agBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.q-bar > span, .pump-bar > span { transform-origin: left center; animation: agBar .7s cubic-bezier(.2, .8, .2, 1) .15s backwards; }

/* 5. Menu cards rise in one after another and lift a little more under the mouse, the icon grows slightly. */
@keyframes agCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.options-grid > .option-card { animation: agCardIn .35s cubic-bezier(.2, .8, .2, 1) backwards; }
.options-grid > .option-card:nth-child(1) { animation-delay: 0ms; }
.options-grid > .option-card:nth-child(2) { animation-delay: 25ms; }
.options-grid > .option-card:nth-child(3) { animation-delay: 50ms; }
.options-grid > .option-card:nth-child(4) { animation-delay: 75ms; }
.options-grid > .option-card:nth-child(5) { animation-delay: 100ms; }
.options-grid > .option-card:nth-child(6) { animation-delay: 125ms; }
.options-grid > .option-card:nth-child(7) { animation-delay: 150ms; }
.options-grid > .option-card:nth-child(8) { animation-delay: 175ms; }
.options-grid > .option-card:nth-child(9) { animation-delay: 200ms; }
.options-grid > .option-card:nth-child(10) { animation-delay: 225ms; }
.options-grid > .option-card:nth-child(11) { animation-delay: 250ms; }
.options-grid > .option-card:nth-child(12) { animation-delay: 275ms; }
.options-grid > .option-card:nth-child(13) { animation-delay: 300ms; }
.options-grid > .option-card:nth-child(14) { animation-delay: 325ms; }
.options-grid > .option-card:nth-child(15) { animation-delay: 350ms; }
.options-grid > .option-card:nth-child(16) { animation-delay: 375ms; }
.options-grid > .option-card:nth-child(17) { animation-delay: 400ms; }
.options-grid > .option-card:nth-child(18) { animation-delay: 425ms; }
.options-grid > .option-card:nth-child(19) { animation-delay: 450ms; }
.options-grid > .option-card:nth-child(20) { animation-delay: 475ms; }
.options-grid > .option-card:nth-child(21) { animation-delay: 500ms; }
.options-grid > .option-card:nth-child(22) { animation-delay: 525ms; }
.options-grid > .option-card:nth-child(23) { animation-delay: 550ms; }
.options-grid > .option-card:nth-child(24) { animation-delay: 575ms; }
.options-grid > .option-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(16, 24, 40, .12); }
.option-card .option-icon { transition: transform .2s ease; }
.option-card:hover .option-icon { transform: scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .flash-message, tr.ag-new > td, .hb-drawer.show .hb-item, .q-bar > span, .pump-bar > span,
    .options-grid > .option-card { animation: none !important; }
    .option-card .option-icon { transition: none; }
    .flash-message.ag-hide { transition: none; }
    .hb-drawer { transition: none !important; }
}

/* Quick jump ring (2.81.0, app-guard.js): the filling ring while the button is held, the ring of sections, the one-time hint. */
@keyframes agHoldFill { from { stroke-dashoffset: 126; } to { stroke-dashoffset: 0; } }
.ag-hold { position: fixed; width: 44px; height: 44px; z-index: 10090; pointer-events: none; border-radius: 50%;
           background: conic-gradient(#2fbf5b var(--ag-p, 0%), rgba(47, 191, 91, .18) 0); opacity: .9;
           -webkit-mask: radial-gradient(circle, transparent 15px, #000 16px); mask: radial-gradient(circle, transparent 15px, #000 16px);
           animation: agHoldGrow var(--ag-hold, 330ms) linear forwards; }
@property --ag-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes agHoldGrow { from { --ag-p: 0%; } to { --ag-p: 100%; } }
.ag-radial { position: fixed; width: 300px; height: 300px; z-index: 10095; border-radius: 50%; transform-origin: center;
             background: radial-gradient(circle, rgba(20, 23, 32, .55) 0 34%, rgba(20, 23, 32, .82) 35% 70%, rgba(20, 23, 32, 0) 71%);
             backdrop-filter: blur(2px); animation: agRingIris .26s cubic-bezier(.2, .8, .2, 1); }
/* "Bloom" (2.81.2): the disc opens like an iris, the buttons fly out from the centre (--dx/--dy, set by app-guard.js) with a slight spring */
@keyframes agRingIris { from { clip-path: circle(0 at 50% 50%); } to { clip-path: circle(71% at 50% 50%); } }
/* two rings (440 px): inner disc, the band of the 8 inner buttons, a lighter band for the outer buttons */
.ag-radial.two { background: radial-gradient(circle closest-side, rgba(20, 23, 32, .55) 0 60px, rgba(20, 23, 32, .86) 61px 140px,
                                             rgba(20, 23, 32, .70) 141px 204px, rgba(20, 23, 32, 0) 205px); }
.ag-r-item.outer { width: 46px; height: 46px; }
.ag-r-item.outer i { font-size: 17px; }
.ag-r-center { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 0;
               background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
               padding: 12px; font: 600 12.5px/1.3 'Inter', system-ui, sans-serif; text-align: center; outline: none; }
.ag-r-item { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; cursor: pointer;
             box-shadow: 0 3px 12px rgba(0, 0, 0, .3); display: flex; align-items: center; justify-content: center; outline: none;
             transition: transform .12s ease, box-shadow .12s ease;
             animation: agItemBloom .34s cubic-bezier(.34, 1.45, .64, 1) backwards; animation-delay: var(--ag-d, 0ms); }
@keyframes agItemBloom { from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(.3); } to { opacity: 1; transform: none; } }
.ag-r-item i { font-size: 21px; color: #343a40; }
.ag-r-item span { position: absolute; right: -2px; top: -2px; min-width: 17px; height: 17px; border-radius: 9px; background: #2e3450;
                  color: #fff; font: 600 10px/17px 'Inter', sans-serif; text-align: center; }
.ag-r-item.on, .ag-r-item:focus-visible { transform: scale(1.14); box-shadow: 0 0 0 3px #2fbf5b, 0 6px 18px rgba(0, 0, 0, .35); }
.ag-r-hint { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 10090; max-width: min(560px, calc(100vw - 32px));
             background: #141720; color: #e8eaf4; border: 1px solid #2e3450; border-radius: 8px; padding: 10px 12px 10px 14px;
             font: 13px/1.4 'Inter', system-ui, sans-serif; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); display: flex; gap: 10px; align-items: center;
             animation: agFlashIn .3s ease-out both; transition: opacity .5s ease; }
.ag-r-hint i { color: #2fbf5b; } .ag-r-hint.out { opacity: 0; }
.ag-r-hint button { margin-left: auto; background: none; border: 0; color: #9aa0c0; font-size: 18px; cursor: pointer; line-height: 1; }
.ag-radial.still, .ag-radial.still .ag-r-item, .ag-hold.still { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .ag-radial, .ag-r-item, .ag-hold, .ag-r-hint { animation: none !important; } .ag-hold { --ag-p: 100%; } }