/* ========================================================================= Agile Construction Service, motion.css Keyframe animations, scroll reveals and page-entrance effects. Hover transitions live next to their components (style.css / components.css). How it works - header.php adds only when the visitor has NOT asked their OS for reduced motion. Everything below is scoped to that class, so reduced-motion visitors get a calm, fully visible page. - Scroll reveals: main.js tags elements with data-reveal="" (the selector list is at the top of its "scroll reveal" section) and adds .is-in as they enter the viewport. Templates need no extra markup, so a newly added project card animates on its own. - To switch all of this off, remove the motion.css in header.php. ========================================================================= */ /* Smooth cross-fade between pages (Chrome, Edge, Safari 18+; others ignore it). */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; } /* ------------------------------------------------------------ keyframes */ /* "from"-only keyframes animate towards the element's normal styles. */ @keyframes rise-in { from { opacity: 0; transform: translateY(40px); } } @keyframes drop-in { from { opacity: 0; transform: translateY(-24px); } } @keyframes slide-in { from { opacity: 0; transform: translateX(-20px); } } @keyframes fade-in { from { opacity: 0; } } @keyframes word-up { from { transform: translateY(110%); } } @keyframes scale-in { from { transform: scale(1.18); } } @keyframes grow-x { from { transform: scaleX(0); } } @keyframes pop-in { from { opacity: 0; transform: scale(.6); } } @keyframes tab-in { from { transform: translateX(100%); } } @keyframes card-in { from { opacity: 0; transform: translateY(28px) scale(.97); } } @keyframes step-next { from { opacity: 0; transform: translateX(48px); } } @keyframes step-back { from { opacity: 0; transform: translateX(-48px); } } @keyframes panel-in { from { opacity: 0; transform: translateY(16px) scale(.96); } } @keyframes marquee { to { transform: translateX(-100%); } } @keyframes grid-drift { to { transform: translate(44px, 44px); } } @keyframes pop { 40% { transform: scale(1.18); } } @keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } } @keyframes ring { from { box-shadow: 0 0 0 0 rgba(255, 107, 0, .55); } to { box-shadow: 0 0 0 14px rgba(255, 107, 0, 0); } } /* Reveal transforms can briefly push content sideways; never let the page scroll horizontally. */ .motion-ok .site-main { overflow-x: clip; } /* --------------------------------------------------------------- header */ .motion-ok .site-header__inner { animation: fade-in .6s var(--ease-out) backwards; } .motion-ok .site-header .brand, .motion-ok .nav-toggle, .motion-ok .site-nav li { animation: drop-in .8s var(--ease-out) backwards; } .motion-ok .site-nav li:nth-child(1) { animation-delay: .08s; } .motion-ok .site-nav li:nth-child(2) { animation-delay: .14s; } .motion-ok .site-nav li:nth-child(3) { animation-delay: .2s; } .motion-ok .site-nav li:nth-child(4) { animation-delay: .26s; } .motion-ok .site-nav li:nth-child(5) { animation-delay: .32s; } .motion-ok .site-nav li:nth-child(6) { animation-delay: .38s; } @media (max-width: 960px) { /* mobile menu: links cascade in each time it opens */ .motion-ok .site-nav.is-open li { animation: slide-in .45s var(--ease-out) backwards; } } /* --------------------------------------------------- headline word reveal */ /* split_title() (functions.php) wraps each word: word */ .motion-ok .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; } .motion-ok .w > span { display: inline-block; } /* ------------------------------------------------------------ home hero */ .motion-ok .hero__slide.is-active .kicker { animation: rise-in .9s var(--ease-out) .15s backwards; } .motion-ok .hero__slide.is-active .hero__title .w > span { animation: word-up 1s var(--ease-out) backwards; animation-delay: calc(.3s + var(--i, 0) * .07s); } .motion-ok .hero__slide.is-active .hero__lead { animation: rise-in .9s var(--ease-out) .7s backwards; } .motion-ok .hero__slide.is-active .hero__actions { animation: rise-in .9s var(--ease-out) .85s backwards; } .motion-ok .hero__controls { animation: fade-in .8s ease 1.2s backwards; } .motion-ok .quote-tab { animation: tab-in 1s var(--ease-out) 1s backwards; } /* slide countdown: the active bar fills over one slide interval (set by main.js) */ .motion-ok .hero__bar.is-active::after { animation: grow-x var(--slide-ms, 6.5s) linear backwards; } .motion-ok .hero.is-paused .hero__bar.is-active::after { animation: none; } /* ------------------------------------------------------- inner page hero */ .motion-ok .page-hero__bg { animation: scale-in 2.4s var(--ease-out) backwards; } .motion-ok .page-hero::after { transform-origin: left; animation: grow-x 1.2s var(--ease-out) .5s backwards; } .motion-ok .page-hero .crumbs { animation: rise-in .9s var(--ease-out) .1s backwards; } .motion-ok .page-hero .kicker { animation: rise-in .9s var(--ease-out) .2s backwards; } .motion-ok .page-hero__title .w > span { animation: word-up 1s var(--ease-out) backwards; animation-delay: calc(.3s + var(--i, 0) * .06s); } .motion-ok .page-hero__lead { animation: rise-in .9s var(--ease-out) .6s backwards; } .motion-ok .page-hero__meta { animation: rise-in .9s var(--ease-out) .75s backwards; } /* Scroll parallax + fade for both heroes (main.js sets --py and --fade). `translate` is separate from `transform`, so it stacks with the zoom above. */ .motion-ok .hero__bg, .motion-ok .page-hero__bg { translate: 0 var(--py, 0px); } .motion-ok .hero__inner, .motion-ok .page-hero__inner { opacity: var(--fade, 1); } /* --------------------------------------------------------- scroll reveal */ .motion-ok [data-reveal] { opacity: 0; transition: opacity .9s var(--ease-out) var(--d, 0s), transform 1.1s var(--ease-out) var(--d, 0s), clip-path 1.2s var(--ease-in-out) var(--d, 0s); } .motion-ok [data-reveal="up"] { transform: translateY(56px); } .motion-ok [data-reveal="left"] { transform: translateX(-56px); } .motion-ok [data-reveal="right"] { transform: translateX(56px); } .motion-ok [data-reveal="zoom"] { transform: translateY(32px) scale(.94); } .motion-ok [data-reveal="slide"] { transform: translateX(-20px); } .motion-ok [data-reveal="clip"] { opacity: 1; clip-path: inset(0 100% 0 0); } /* wipe in from the left */ .motion-ok [data-reveal="clip-r"] { opacity: 1; clip-path: inset(0 0 0 100%); } /* wipe in from the right */ .motion-ok [data-reveal="frame"] { opacity: 1; } /* only its orange frame draws in */ .motion-ok [data-reveal].is-in { opacity: 1; transform: none; } .motion-ok [data-reveal^="clip"].is-in { clip-path: inset(0 0 0 0); } /* orange frames that draw themselves in */ .motion-ok .collage::before { transition: width 1s var(--ease-out) .3s, height 1s var(--ease-out) .3s; } .motion-ok .collage[data-reveal]::before { width: 0; height: 0; } .motion-ok .collage[data-reveal].is-in::before { width: 130px; height: 130px; } .motion-ok .svc-row__media[data-reveal]::after { width: 0; height: 0; } .motion-ok .svc-row__media[data-reveal].is-in::after { width: 45%; height: 45%; } /* portfolio filter: cards pop back in when a tab is chosen */ .motion-ok .pcard.is-popping { animation: card-in .6s var(--ease-out) backwards; animation-delay: var(--d, 0s); } @media print { .motion-ok [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* --------------------------------------------------------- moving bands */ .motion-ok .ticker__list { animation: marquee 42s linear infinite; } .ticker:hover .ticker__list { animation-play-state: paused; } .motion-ok .cta-band::before { animation: grid-drift 7s linear infinite; } /* footer wordmark becomes a slow marquee */ .motion-ok .site-footer__wordmark { justify-content: flex-start; } .motion-ok .site-footer__wordmark span { display: flex; align-items: center; padding: 0; animation: marquee 48s linear infinite; } .motion-ok .site-footer__wordmark span::after { content: ""; width: .2em; height: .2em; margin: 0 .5em; background: currentColor; transform: rotate(45deg); } /* ----------------------------------------------------- quick-estimate */ .motion-ok .qe[data-dir="next"] .qe__step:not([hidden]) { animation: step-next .55s var(--ease-out) backwards; } .motion-ok .qe[data-dir="back"] .qe__step:not([hidden]) { animation: step-back .55s var(--ease-out) backwards; } .motion-ok .qe__steps li.is-current::after { animation: ring 1.6s ease-out infinite; } .motion-ok .choice:has(input:checked) .choice__icon { animation: pop .45s var(--ease-back); } .motion-ok .qe__error:not([hidden]), .motion-ok .alert--err { animation: shake .45s ease; } /* ---------------------------------------------------------- chat widget */ .motion-ok .chat-widget:not([hidden]) .chat-fab { animation: pop-in .6s var(--ease-back) 1.2s backwards; } .motion-ok .chat-fab__icon { animation: ring 1.8s ease-out 2.2s 3; } .motion-ok .chat-panel:not([hidden]) { transform-origin: bottom right; animation: panel-in .35s var(--ease-out); } .motion-ok .chat-msg, .motion-ok .chat-suggest { animation: rise-in .4s var(--ease-out) backwards; }