/* Guttenberg Auto Body: signature motions. Everything on the page is a physical thing (photo prints, masking tape, a rubber stamp, hand-drawn ink), so the motion is someone putting those things up on the shop wall: pin prints and paper cards arrive lifted and turned, then settle onto the wall; the shadow tightens as they land tape strips of tape and tape labels press down, unrolling left to right draw hand-drawn ink lines draw themselves (the tape-green blob pops in behind); the stamp thumps down plus small supporting moves: rise (text), star (Google stars light up), settle (big photos ease out of a slight zoom), push (the active service photo slowly pushes in during its 7 seconds), and hover lift on prints. motion.js tags the elements (data-m="pin" etc., with a delay in --d) and adds .m-in when their section arrives. Nothing here applies until motion.js has put .m-on on , so without JavaScript, or with "reduce motion" turned on, everything is simply in place. Each move plays once per visit. Tuning: --speed scales every duration and delay (1 = normal); --bounce scales the overshoot (0 none, 1 soft, 2 more). The moves use the individual translate / rotate / scale properties, so they add to each element's own transform (its resting tilt) instead of replacing it. */ @property --draw { syntax: ""; inherits: true; initial-value: 0; } :root { --speed: 1; --bounce: 1; } /* prints arrive from a little off to the side: never let that widen the page on a phone */ .m-on main { overflow-x: clip; } .m-on .site-footer { overflow: clip; } /* and the last row rising in never stretches the page past its end */ /* ---------- pin: prints and cards ---------- */ .m-on [data-m~="pin"]:not(.m-in) { opacity: 0; } .m-on [data-m~="pin"].m-in { animation: m-pin calc(700ms * var(--speed)) cubic-bezier(.22, .8, .3, 1) calc(var(--d, 0ms) * var(--speed)) backwards; } @keyframes m-pin { 0% { opacity: 0; translate: var(--pin-x, -10px) -34px; rotate: var(--pin-r, -5deg); scale: 1.06; box-shadow: 0 46px 56px -16px rgba(20, 14, 10, .42); } 30% { opacity: 1; } 72% { translate: 0 calc(var(--bounce) * 2px); rotate: calc(var(--pin-r, -5deg) * -.16 * var(--bounce)); scale: calc(1 - var(--bounce) * .006); } 100% { translate: 0 0; rotate: 0deg; scale: 1; } } /* ---------- tape: strips and labels ---------- */ .m-on [data-m~="tape"]:not(.m-in) { opacity: 0; } .m-on [data-m~="tape"].m-in { animation: m-tape calc(440ms * var(--speed)) cubic-bezier(.35, .6, .25, 1) calc(var(--d, 0ms) * var(--speed)) backwards; } /* the corner strip on the section 5 card is a pseudo-element, so its card carries the delay in --d2 */ .m-on [data-m~="tape-after"]:not(.m-in)::after { opacity: 0; } .m-on [data-m~="tape-after"].m-in::after { animation: m-tape calc(440ms * var(--speed)) cubic-bezier(.35, .6, .25, 1) calc(var(--d2, 0ms) * var(--speed)) backwards; } @keyframes m-tape { 0% { opacity: 1; clip-path: inset(-24px 100% -24px -24px); } 100% { opacity: 1; clip-path: inset(-24px -24px -24px -24px); } } /* ---------- draw: hand-drawn ink ---------- */ /* motion.js gives every shape inside the line symbols pathLength="1" and a dash offset of var(--draw): 1 = not drawn yet, 0 = fully drawn. The carries --draw down into its copy of the symbol. */ .m-on [data-m~="draw"]:not(.m-in) > use { opacity: 0; } .m-on [data-m~="draw"].m-in > use:not(.blob) { animation: m-draw calc(820ms * var(--speed)) cubic-bezier(.45, .1, .35, 1) calc(var(--d, 0ms) * var(--speed)) backwards; } .m-on [data-m~="draw"].m-in > use.blob { transform-box: fill-box; transform-origin: 50% 50%; animation: m-blob calc(460ms * var(--speed)) cubic-bezier(.3, 1.2, .5, 1) calc((var(--d, 0ms) + 300ms) * var(--speed)) backwards; } @keyframes m-draw { 0% { --draw: 1; opacity: 0; } 4% { opacity: 1; } 100% { --draw: 0; opacity: 1; } } @keyframes m-blob { 0% { opacity: 0; scale: .2; } 70% { opacity: 1; scale: calc(1 + var(--bounce) * .08); } 100% { opacity: 1; scale: 1; } } /* ---------- stamp: pressed down once ---------- */ .m-on [data-m~="stamp"]:not(.m-in) { opacity: 0; } .m-on [data-m~="stamp"].m-in { animation: m-stamp calc(560ms * var(--speed)) cubic-bezier(.55, 0, .6, 1) calc(var(--d, 0ms) * var(--speed)) backwards; } @keyframes m-stamp { 0% { opacity: 0; scale: 1.55; rotate: 6deg; } 50% { opacity: 1; scale: .95; rotate: 0deg; } 72% { scale: calc(1 + var(--bounce) * .02); } 100% { scale: 1; rotate: 0deg; } } /* the print gives a little under the stamp */ .m-on [data-m~="thud"].m-in { animation: m-thud calc(260ms * var(--speed)) ease-out calc(var(--d3, 0ms) * var(--speed)) both; } @keyframes m-thud { 0%, 100% { translate: 0 0; } 35% { translate: 0 2px; } } /* ---------- star: Google stars light up one by one ---------- */ .m-on [data-m~="star"]:not(.m-in) { opacity: 0; } .m-on [data-m~="star"].m-in { animation: m-star calc(420ms * var(--speed)) cubic-bezier(.3, .8, .4, 1) calc(var(--d, 0ms) * var(--speed)) backwards; } @keyframes m-star { 0% { opacity: 0; scale: .2; rotate: -50deg; } 65% { opacity: 1; scale: calc(1 + var(--bounce) * .18); rotate: 0deg; } 100% { opacity: 1; scale: 1; rotate: 0deg; } } /* ---------- rise: headings and text ---------- */ .m-on [data-m~="rise"]:not(.m-in) { opacity: 0; } .m-on [data-m~="rise"].m-in { animation: m-rise calc(600ms * var(--speed)) cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0ms) * var(--speed)) backwards; } @keyframes m-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } } /* ---------- settle: big photos ease out of a slight zoom ---------- */ .m-on [data-m~="settle"].m-in { animation: m-settle calc(1700ms * var(--speed)) cubic-bezier(.2, .6, .2, 1) calc(var(--d, 0ms) * var(--speed)) backwards; } @keyframes m-settle { from { opacity: .35; scale: 1.08; } to { opacity: 1; scale: 1; } } /* ---------- push: the active service photo pushes in over its 7 seconds, paused with the timer ---------- The photo trims itself as it grows (clip-path shrinks by the same amount the scale adds: (1 - 1/1.05) / 2 = 2.381%), so it never spills past its frame, and nothing around it has to hide its overflow: the Before / After tape keeps sitting across the top edge. */ .m-on .svc-shot.m-push img { animation: m-push var(--svc-dur, 7s) linear both; animation-play-state: var(--svc-play, running); } .m-on .svc-split__half img { --push-r: 0px; } /* the Before / After halves have square corners */ @keyframes m-push { from { scale: 1; clip-path: inset(0 round var(--push-r, 6px)); } to { scale: 1.05; clip-path: inset(2.381% round calc(var(--push-r, 6px) / 1.05)); } } /* ---------- hover: a print lifts toward you, as if you were about to take it off the wall ---------- */ @media (hover: hover) and (pointer: fine) { .m-on :is(.snap, .rev-card, .rev-sum, .findus__map, .footer__badge, a.car) { transition: translate .28s cubic-bezier(.2, .7, .2, 1), scale .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease; } .m-on :is(.snap, .rev-card, .rev-sum, .findus__map, .footer__badge, a.car):hover { translate: 0 -5px; scale: 1.015; box-shadow: 0 2px 2px rgba(20, 14, 10, .22), 0 10px 16px -4px rgba(20, 14, 10, .24), 0 34px 46px -14px rgba(20, 14, 10, .55); } .m-on .snap .snap__photo img { transition: scale .6s cubic-bezier(.2, .7, .2, 1); } .m-on .snap:hover .snap__photo img { scale: 1.035; } } /* ---------- the hero prints (and the About heading print) lift a little as their photo changes, then settle back with a soft bounce ---------- A transition, not an animation, so it never restarts the pin each print arrived with. */ .m-on :is(.snaps .snap, .page-head__print) { transition: translate calc(.5s * var(--speed)) cubic-bezier(.3, 1.45, .5, 1), scale calc(.5s * var(--speed)) cubic-bezier(.3, 1.45, .5, 1), box-shadow calc(.5s * var(--speed)) ease; } .m-on :is(.snaps .snap, .page-head__print).is-lift { translate: 0 -7px; scale: 1.025; box-shadow: 0 2px 2px rgba(20, 14, 10, .22), 0 10px 16px -4px rgba(20, 14, 10, .24), 0 34px 46px -14px rgba(20, 14, 10, .55); transition-duration: calc(.28s * var(--speed)); transition-timing-function: cubic-bezier(.2, .7, .2, 1); } .m-on :is(.snaps .snap, .page-head__print):hover { transition-duration: .28s; transition-timing-function: cubic-bezier(.2, .7, .2, 1); } /* the hover lift keeps its own feel */ /* buttons press down a little */ .m-on .btn { transition: background-color .15s ease, color .15s ease, transform .15s ease, translate .08s ease; } .m-on .btn:active { translate: 0 1.5px; } /* ---------- the menus: the group icons draw each time the Services menu opens ---------- */ .m-on .nav__drop.is-open .mega__head .ico > use:not(.blob), .m-on .mnav.is-svc .mnav__head .ico > use:not(.blob) { animation: m-draw calc(700ms * var(--speed)) cubic-bezier(.45, .1, .35, 1) calc((var(--i, 0) * 90ms + 80ms) * var(--speed)) backwards; } .m-on .nav__drop.is-open .mega__head .ico > use.blob, .m-on .mnav.is-svc .mnav__head .ico > use.blob { transform-box: fill-box; transform-origin: 50% 50%; animation: m-blob calc(420ms * var(--speed)) cubic-bezier(.3, 1.2, .5, 1) calc((var(--i, 0) * 90ms + 320ms) * var(--speed)) backwards; }