/* ==========================================================================
   Animation: car-garage
   Car rises on the lift → spanner works the wheel nut → reg lookup finds the
   MOT due date and texts a reminder → car comes down with a sparkle →
   checks tick and the certificate is stamped "Passed".
   One 8s loop; the markup is the finished frame and the keyframes rewind it.
   Self-contained: literal brand colours, no site.css.
   ========================================================================== */

@keyframes garLift {
    0%, 3%    { transform: translateY(0); animation-timing-function: cubic-bezier(.45, 0, .3, 1); }
    13%       { transform: translateY(-52px); }
    15%, 57%  { transform: translateY(-50px); animation-timing-function: cubic-bezier(.5, 0, .7, .4); }
    64%       { transform: translateY(0); animation-timing-function: ease-out; }
    66.5%     { transform: translateY(-6px); animation-timing-function: ease-in; }
    69%, 100% { transform: translateY(0); }
}
@keyframes garSpanner {
    0%, 14%   { opacity: 0; transform: translateY(10px); }
    17%, 53%  { opacity: 1; transform: translateY(0); }
    56%, 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes garTurn {
    0%, 100% { transform: rotate(-35deg); }
    50%      { transform: rotate(35deg); }
}
@keyframes garLens {
    0%, 15%   { transform: translateX(0) scale(0); opacity: 0; }
    18%       { transform: translateX(0) scale(1); opacity: 1; }
    28%       { transform: translateX(132px) scale(1); opacity: 1; }
    31%, 100% { transform: translateX(132px) scale(0); opacity: 0; }
}
@keyframes garRow {
    0%, 30%   { transform: translateY(10px) scale(.7); opacity: 0; }
    35%, 91%  { transform: translateY(0) scale(1); opacity: 1; }
    95%, 100% { transform: translateY(0) scale(.9); opacity: 0; }
}
@keyframes garText {
    0%, 40%   { transform: translateX(-16px) scale(.6); opacity: 0; }
    45%       { transform: translateX(0) scale(1.06); opacity: 1; }
    48%, 91%  { transform: translateX(0) scale(1); opacity: 1; }
    95%, 100% { transform: translateX(0) scale(.9); opacity: 0; }
}
@keyframes garCheck1 { 0%, 46% { transform: scale(0); } 50% { transform: scale(1.3); } 53%, 92% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes garCheck2 { 0%, 50% { transform: scale(0); } 54% { transform: scale(1.3); } 57%, 92% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes garCheck3 { 0%, 54% { transform: scale(0); } 58% { transform: scale(1.3); } 61%, 92% { transform: scale(1); } 96%, 100% { transform: scale(0); } }
@keyframes garShine {
    0%, 66%   { transform: scale(0) rotate(-45deg); opacity: 0; }
    70%       { transform: scale(1.2) rotate(0); opacity: 1; }
    80%       { transform: scale(1) rotate(10deg); opacity: 1; }
    86%, 100% { transform: scale(0) rotate(30deg); opacity: 0; }
}
@keyframes garStamp {
    0%, 70%   { transform: scale(2.2); opacity: 0; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
    73.5%     { transform: scale(.92); opacity: 1; animation-timing-function: cubic-bezier(.34, 1.6, .5, 1); }
    77%, 91%  { transform: scale(1); opacity: 1; }
    95%, 100% { transform: scale(1); opacity: 0; }
}

.anim-gar { position: relative; max-width: 880px; margin: 0 auto; }
.anim-gar__svg { display: block; width: 100%; height: auto; overflow: hidden; }

/* Animated parts that scale about their own box. Only these: the static
   drawing's transform="" attributes keep the default origin, and the
   spanner turns about the wheel nut (its local 0,0). */
.anim-gar__lens, .anim-gar__row, .anim-gar__text, .anim-gar__check,
.anim-gar__shine, .anim-gar__stamp { transform-box: fill-box; transform-origin: 50% 50%; }

.anim-gar__lift    { animation: garLift 8s infinite; }
.anim-gar__spanner { opacity: 0; animation: garSpanner 8s ease-out infinite; }
.anim-gar__turn    { animation: garTurn .8s ease-in-out infinite; }

.anim-gar__lens  { opacity: 0; animation: garLens 8s ease-in-out infinite; }
.anim-gar__row   { animation: garRow 8s cubic-bezier(.34, 1.6, .5, 1) infinite; }
.anim-gar__text  { transform-origin: 0 50%; animation: garText 8s cubic-bezier(.34, 1.6, .5, 1) infinite; }
.anim-gar__check--1 { animation: garCheck1 8s cubic-bezier(.34, 1.6, .5, 1) infinite; }
.anim-gar__check--2 { animation: garCheck2 8s cubic-bezier(.34, 1.6, .5, 1) infinite; }
.anim-gar__check--3 { animation: garCheck3 8s cubic-bezier(.34, 1.6, .5, 1) infinite; }
.anim-gar__shine { opacity: 0; animation: garShine 8s ease-out infinite; }
.anim-gar__stamp { animation: garStamp 8s infinite; }

/* Reduced motion: the happy ending held still — the car back down and
   gleaming, the MOT due date found, the reminder sent and "Passed". */
@media (prefers-reduced-motion: reduce) {
    .anim-gar, .anim-gar * { animation: none !important; }
    .anim-gar__shine { opacity: 1; }
}