/* * ProductionVibes — motion layer * Purpose-built for productionvibes.com (WordPress + Festiva theme). * * SCOPE: motion and transitions only. No colour, type, spacing or layout * changes. Every rule below is inert until pv-motion.js adds `.pv-motion` * to , so a failed script leaves the site exactly as it is today. * * Thesis: a show starts when the lights come up. The hero headline is lit by * a passing followspot; everything else is revealed by a curtain wipe. */ :root { /* Confident arrival — exponential ease-out, never bounce. */ --pv-ease: cubic-bezier(0.16, 1, 0.3, 1); --pv-ease-soft: cubic-bezier(0.33, 1, 0.68, 1); --pv-dur-feedback: 160ms; --pv-dur-state: 260ms; --pv-dur-reveal: 720ms; --pv-dur-focal: 1100ms; } /* ───────────────────────────────────────────────────────────── 1. FOCAL MOMENT — hero headline followspot The heading sits dim and slightly out of focus, then a soft band of light crosses it left to right and leaves it lit. ───────────────────────────────────────────────────────────── */ .pv-motion .pv-spot { position: relative; isolation: isolate; } .pv-motion .pv-spot > .pxl-item--title, .pv-motion .pv-spot.pxl-item--title { opacity: 0.28; filter: blur(7px); will-change: opacity, filter; } .pv-motion .pv-spot.pv-lit > .pxl-item--title, .pv-motion .pv-spot.pv-lit.pxl-item--title { opacity: 1; filter: blur(0); transition: opacity var(--pv-dur-focal) var(--pv-ease), filter var(--pv-dur-focal) var(--pv-ease); } /* The travelling beam. Sits above the text, screen-blended so it reads as light rather than as a white shape, and never intercepts pointer events. */ .pv-motion .pv-spot::after { content: ""; position: absolute; inset: -20% -40%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient( 100deg, transparent 38%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.5) 53%, transparent 62% ); mix-blend-mode: overlay; transform: translate3d(-60%, 0, 0); } .pv-motion .pv-spot.pv-lit::after { animation: pv-sweep var(--pv-dur-focal) var(--pv-ease-soft) 60ms both; } @keyframes pv-sweep { 0% { opacity: 0; transform: translate3d(-60%, 0, 0); } 18% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; transform: translate3d(60%, 0, 0); } } /* Clean up the compositor hint once the sequence has run. */ .pv-motion .pv-spot.pv-done > .pxl-item--title, .pv-motion .pv-spot.pv-done.pxl-item--title { will-change: auto; } .pv-motion .pv-spot.pv-done::after { animation: none; opacity: 0; } /* ───────────────────────────────────────────────────────────── 2. CURTAIN WIPE — headings and images A rising mask, not a fade-up. Reads as a curtain clearing the stage. ───────────────────────────────────────────────────────────── */ .pv-motion .pv-wipe { clip-path: inset(0 0 100% 0); will-change: clip-path; } .pv-motion .pv-wipe.pv-in { clip-path: inset(0 0 0 0); transition: clip-path var(--pv-dur-reveal) var(--pv-ease); } .pv-motion .pv-wipe.pv-done { will-change: auto; clip-path: none; } /* Images get the wipe plus a settling scale, so the photo appears to be revealed rather than to slide in. Scoped to the inner so the theme's own layout box is never transformed. */ .pv-motion .pv-reveal-img { overflow: hidden; } .pv-motion .pv-reveal-img img { clip-path: inset(0 0 100% 0); transform: scale(1.06); will-change: clip-path, transform; } .pv-motion .pv-reveal-img.pv-in img { clip-path: inset(0 0 0 0); transform: scale(1); transition: clip-path 900ms var(--pv-ease), transform 1200ms var(--pv-ease); } .pv-motion .pv-reveal-img.pv-done img { will-change: auto; clip-path: none; } /* ───────────────────────────────────────────────────────────── 3. QUIET SUPPORT — body copy Opacity and a short rise. Deliberately plainer than the headings so the hierarchy of motion matches the hierarchy of the page. ───────────────────────────────────────────────────────────── */ .pv-motion .pv-fade { opacity: 0; transform: translate3d(0, 10px, 0); } .pv-motion .pv-fade.pv-in { opacity: 1; transform: none; transition: opacity 520ms var(--pv-ease-soft), transform 520ms var(--pv-ease); } /* Sibling stagger, capped. Only applied where the markup is a genuine list. */ .pv-motion .pv-stagger > * { transition-delay: 0ms; } .pv-motion .pv-stagger.pv-in > *:nth-child(1) { transition-delay: 0ms; } .pv-motion .pv-stagger.pv-in > *:nth-child(2) { transition-delay: 70ms; } .pv-motion .pv-stagger.pv-in > *:nth-child(3) { transition-delay: 140ms; } .pv-motion .pv-stagger.pv-in > *:nth-child(4) { transition-delay: 210ms; } .pv-motion .pv-stagger.pv-in > *:nth-child(5) { transition-delay: 280ms; } .pv-motion .pv-stagger.pv-in > *:nth-child(n + 6) { transition-delay: 340ms; } /* ───────────────────────────────────────────────────────────── 4. FEEDBACK — the states a visitor causes ───────────────────────────────────────────────────────────── */ /* Buttons: a lift on hover. * * There used to be a gloss sweep here, drawn on `.btn::before`. It had to go. * Festiva paints a button's FILL with that same pseudo-element — the theme * sets `--gradient-color-from` / `--gradient-color-to` on `.btn::before` and * `.btn::after` and renders the background from them. Setting `background` on * `.pv-motion .btn::before` therefore did not layer a gloss over the button, * it replaced the button's only background layer with a mostly-transparent * gradient. * * The result, live and unnoticed from 2026-08-14 to 2026-08-26: every * theme-styled `.btn` lost its fill. The hero's "Partner With Us" became * #EEDFD4 text on the #EEDFD4 ground — an invisible primary call to action, * present in the DOM at 269x72 and reporting `visibility: visible`, which is * why no automated check caught it. * * The lift below is safe: it touches only `transform`. Any future gloss must * go on a wrapper or a child span, never on `.btn::before` or `.btn::after`. */ .pv-motion .btn { position: relative; transition: transform var(--pv-dur-state) var(--pv-ease), box-shadow var(--pv-dur-state) var(--pv-ease); } .pv-motion .btn:hover, .pv-motion .btn:focus-visible { transform: translate3d(0, -2px, 0); } .pv-motion .btn:active { transform: translate3d(0, 0, 0); transition-duration: var(--pv-dur-feedback); } /* Navigation: an underline draws in from the leading edge. Uses the inherited text colour so it works on both header treatments. */ .pv-motion .pv-navlink { position: relative; } .pv-motion .pv-navlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform var(--pv-dur-state) var(--pv-ease); } .pv-motion .pv-navlink:hover::after, .pv-motion .pv-navlink:focus-visible::after { transform: scaleX(1); } /* Photographs lift slightly under the cursor — the only hover on content. */ .pv-motion .pv-reveal-img img { transition: transform 600ms var(--pv-ease); } .pv-motion .pv-reveal-img:hover img { transform: scale(1.03); } /* Focus rings are a browser default that belongs to no design system. Theme it from the brand blue so keyboard users get the same care. */ .pv-motion a:focus-visible, .pv-motion button:focus-visible, .pv-motion .btn:focus-visible { outline: 2px solid #0072b9; outline-offset: 3px; border-radius: 2px; } /* ───────────────────────────────────────────────────────────── 5. REDUCED MOTION Fewer and gentler, not switched off. Spatial travel, blur, scale and the beam are removed; the reveals survive as short opacity changes so the page still acknowledges arrival. ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .pv-motion .pv-spot::after, .pv-motion .pv-spot.pv-lit::after { display: none; animation: none; } .pv-motion .pv-spot > .pxl-item--title, .pv-motion .pv-spot.pxl-item--title { filter: none; opacity: 0.5; } .pv-motion .pv-spot.pv-lit > .pxl-item--title, .pv-motion .pv-spot.pv-lit.pxl-item--title { opacity: 1; filter: none; transition: opacity 320ms linear; } .pv-motion .pv-wipe, .pv-motion .pv-reveal-img img { clip-path: none; transform: none; } .pv-motion .pv-wipe, .pv-motion .pv-fade, .pv-motion .pv-reveal-img img { opacity: 0; } .pv-motion .pv-wipe.pv-in, .pv-motion .pv-fade.pv-in, .pv-motion .pv-reveal-img.pv-in img { opacity: 1; transform: none; transition: opacity 300ms linear; } .pv-motion .btn::before { display: none; } .pv-motion .btn:hover, .pv-motion .btn:focus-visible, .pv-motion .pv-reveal-img:hover img { transform: none; } /* Feedback that confirms an action must stay legible. */ .pv-motion .pv-navlink::after { transition: transform 120ms linear; } }