/* House of Seydamour — motion system. * * Rules this file follows: * 1. Only transform, opacity and clip-path are animated, so nothing triggers layout. * 2. Every effect is opt-out via prefers-reduced-motion, in one block at the bottom. * 3. Nothing animates on a delay long enough to make content feel withheld. * 4. If JavaScript never runs, everything is visible. The .hos-motion flag on * is what hides things in the first place, and only JS sets it. */ /* --------------------------------------------------------------- Base reveal. Elements rise and fade as they enter the viewport. --------------------------------------------------------------- */ .hos-motion .hos-rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1); will-change: opacity, transform; } .hos-motion .hos-rv.is-in { opacity: 1; transform: none; will-change: auto; } /* Sideways variant, used for the text column beside a portrait. */ .hos-motion .hos-rv--left { transform: translate3d(-34px, 0, 0); } .hos-motion .hos-rv--right { transform: translate3d(34px, 0, 0); } /* --------------------------------------------------------------- Headline reveal. Each line clips upward from its own baseline, which reads far more considered than a whole block fading in. --------------------------------------------------------------- */ .hos-line-mask { display: block; overflow: hidden; } .hos-motion .hos-line-mask > span { display: block; transform: translate3d(0, 105%, 0); transition: transform 1.15s cubic-bezier(.16, 1, .3, 1); } .hos-motion .is-in .hos-line-mask > span, .hos-motion .hos-line-mask.is-in > span { transform: none; } /* --------------------------------------------------------------- Image reveal. A curtain wipes off the photograph rather than the photograph fading in, and the image itself settles from a slight scale so the movement feels like a camera, not a CSS transition. --------------------------------------------------------------- */ .hos-motion .hos-reveal-img { position: relative; overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1.3s cubic-bezier(.16, 1, .3, 1); } .hos-motion .hos-reveal-img.is-in { clip-path: inset(0 0 0 0); } .hos-motion .hos-reveal-img img { transform: scale(1.12); transition: transform 1.6s cubic-bezier(.16, 1, .3, 1); } .hos-motion .hos-reveal-img.is-in img { transform: scale(1); } /* Slow drift on the hero portrait while the page scrolls past it. */ .hos-parallax { will-change: transform; } /* --------------------------------------------------------------- Header. Condenses and deepens its shadow once the page moves. --------------------------------------------------------------- */ .hos-header { transition: background-color .5s ease, box-shadow .5s ease, border-color .5s ease; } .hos-header .hos-nav { transition: min-height .5s cubic-bezier(.22, 1, .36, 1); } .hos-header.is-stuck { box-shadow: 0 10px 40px rgba(20, 16, 14, .07); border-bottom-color: transparent; } .hos-header.is-stuck .hos-nav { min-height: clamp(66px, 6.4vw, 86px); } /* --------------------------------------------------------------- Buttons. A champagne sheen crosses the face on hover, and the button lifts a hair. Subtle enough to feel expensive. --------------------------------------------------------------- */ .wp-block-button__link { position: relative; overflow: hidden; isolation: isolate; transition: background-color .45s ease, color .45s ease, border-color .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease; } .wp-block-button__link::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .32) 50%, transparent 80%); transform: translateX(-120%); transition: transform .85s cubic-bezier(.22, 1, .36, 1); } .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(20, 16, 14, .16); } .wp-block-button__link:hover::after { transform: translateX(120%); } /* --------------------------------------------------------------- Cards. Lift plus a gold rule that draws down the leading edge. The rule is defined in main.css, this only tunes the easing. --------------------------------------------------------------- */ .hos-card { transition: transform .6s cubic-bezier(.22, 1, .36, 1), box-shadow .6s ease, border-color .6s ease; } .hos-card--text::before { transition: transform .65s cubic-bezier(.16, 1, .3, 1); } /* Counters hold their width so the layout does not jitter while counting. */ .hos-stat strong { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- Accordions. Height animation on a details element, driven by the grid-rows trick so it works without measuring anything in JS. --------------------------------------------------------------- */ .hos-accordions .wp-block-details > *:not(summary) { animation: hos-accordion-open .5s cubic-bezier(.22, 1, .36, 1); } @keyframes hos-accordion-open { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } } .hos-accordions .wp-block-details summary::after { transition: transform .4s cubic-bezier(.22, 1, .36, 1), color .3s ease; } .hos-accordions .wp-block-details[open] summary::after { transform: translateY(-50%) rotate(180deg); } /* --------------------------------------------------------------- First paint. The page arrives rather than snapping in. --------------------------------------------------------------- */ .hos-motion body { animation: hos-enter .7s ease both; } @keyframes hos-enter { from { opacity: 0; } to { opacity: 1; } } /* --------------------------------------------------------------- Opt out. One block, and it genuinely disables everything above. --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .hos-motion .hos-rv, .hos-motion .hos-line-mask > span, .hos-motion .hos-reveal-img, .hos-motion .hos-reveal-img img { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; } .hos-motion body { animation: none; } .hos-accordions .wp-block-details > *:not(summary) { animation: none; } .wp-block-button__link::after { display: none; } .wp-block-button__link:hover { transform: none; } .hos-parallax { transform: none !important; } }