/* Oakhanger Storage: motion layer. Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd. Self-contained polish on top of the existing design. Two safety rules: 1. FAIL-SAFE: every "hidden until revealed" rule is scoped under .vibed-motion, a class that JavaScript adds to . No JS (or a JS error) means no class, which means nothing is ever hidden. Content is never at the mercy of a script. 2. Anyone who asks their system for less motion gets none of it. */ /* This design already has Divi's own scroll-linked fades, so there is no reveal-on-scroll here. What follows is purely additive: nothing is ever hidden, so no content can be lost to a script that failed to run. */ /* ---- Hero: slow drift on the background, copy rises in ------------------- */ .vibed-motion .v-hero-bg { animation: v-drift 30s ease-in-out infinite alternate; will-change: transform; } @keyframes v-drift { from { transform: scale(1.008); } to { transform: scale(1.045); } } .vibed-motion .v-hero-in { animation: v-rise 1.1s cubic-bezier(.22, .61, .36, 1) both; } .vibed-motion .v-hero-in:nth-of-type(2) { animation-delay: .14s; } .vibed-motion .v-hero-in:nth-of-type(3) { animation-delay: .28s; } @keyframes v-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* ---- Photographs: gentle lift on hover ----------------------------------- */ .v-photo { transition: transform .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease; will-change: transform; } @media (hover: hover) { .v-photo:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); } } /* ---- Buttons and links --------------------------------------------------- */ .v-btn { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } @media (hover: hover) { .v-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .22); } } /* Phone and email get a quiet underline sweep rather than a colour flash */ .v-link { position: relative; text-decoration: none; } .v-link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.22, .61, .36, 1); } @media (hover: hover) { .v-link:hover::after { transform: scaleX(1); transform-origin: left; } } /* ---- Respect the visitor ------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .vibed-motion .v-hero-bg, .vibed-motion .v-hero-in { animation: none; } .v-photo, .v-btn, .v-link::after { transition: none; } @media (hover: hover) { .v-photo:hover, .v-btn:hover { transform: none; box-shadow: none; } } }