/* ============================================================================ ANIMATION — reveal-on-scroll (variants), header-on-scroll, theme-switch transitions, hover micro-interactions. Reveal hiding is gated on `.wlre-anim` (added to by anim.js as its first action) so that if the script fails to load, nothing stays invisible. Amplitude is driven by --motion-scale (set by the style preset; 0 under reduced-motion). All motion is gated by prefers-reduced-motion. ============================================================================ */ html{scroll-behavior:smooth;} /* ---- Reveal-on-scroll ------------------------------------------------------ */ .wlre-anim .wlre-reveal{ opacity:0; transform:translateY(var(--reveal-dist)); transition:opacity var(--dur-reveal,800ms) var(--ease-base), transform var(--dur-reveal,800ms) var(--ease-base); transition-delay:var(--wlre-reveal-delay,0ms); will-change:opacity,transform; } .wlre-anim .wlre-reveal.is-in{opacity:1;transform:none;will-change:auto;} /* Variants via data-anim (on top of .wlre-reveal). */ .wlre-anim .wlre-reveal[data-anim="fade"]{transform:none;} .wlre-anim .wlre-reveal[data-anim="zoom"]{transform:scale(calc(1 - .06 * var(--motion-scale)));} .wlre-anim .wlre-reveal[data-anim="zoom"].is-in{transform:none;} .wlre-anim .wlre-reveal[data-anim="slide-left"]{transform:translateX(calc(-1 * (var(--reveal-dist) + 8px)));} .wlre-anim .wlre-reveal[data-anim="slide-right"]{transform:translateX(calc(var(--reveal-dist) + 8px));} .wlre-anim .wlre-reveal[data-anim="slide-left"].is-in, .wlre-anim .wlre-reveal[data-anim="slide-right"].is-in{transform:none;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} /* keep a gentle fade-in (not disorienting); just shrink the slide + drop the blur */ .wlre-anim .wlre-reveal{transform:translateY(8px);filter:none;} .wlre-anim .wlre-reveal[data-anim="zoom"]{transform:none;} .wlre-anim .wlre-reveal[data-anim="slide-left"], .wlre-anim .wlre-reveal[data-anim="slide-right"]{transform:translateX(8px);} } /* the panel "Motion: off" toggle is the real kill switch */ html[data-motion="off"] .wlre-reveal{opacity:1!important;transform:none!important;transition:none!important;filter:none!important;} /* ---- Hero parallax (background layers only, where data-parallax) ---------- */ [data-parallax] .wlre-hero__overlay, [data-parallax] .wlre-hero__mesh{transform:translateY(var(--wlre-parallax,0));will-change:transform;} @media (prefers-reduced-motion: reduce){ [data-parallax] .wlre-hero__overlay,[data-parallax] .wlre-hero__mesh{transform:none!important;} } /* ---- Header on scroll ------------------------------------------------------ */ .wlre-header{transition:box-shadow var(--dur-base) var(--ease-base),padding var(--dur-base) var(--ease-base),background var(--dur-base) var(--ease-base);} .wlre-header.is-scrolled{box-shadow:var(--shadow-2);} .wlre-header.is-scrolled .wlre-nav{padding-top:var(--space-2);padding-bottom:var(--space-2);} /* sticky for variants other than the transparent overlay */ .wlre-header:not(.wlre-header--transparent-overlay){position:sticky;top:0;} /* keep the header (sticky or absolute-overlay) clear of the WP admin bar */ body.admin-bar .wlre-header{top:32px;} body.admin-bar .wlre-header--transparent-overlay{top:32px;} @media screen and (max-width:782px){ body.admin-bar .wlre-header,body.admin-bar .wlre-header--transparent-overlay{top:46px;} } /* ---- Theme-switch smoothness ---------------------------------------------- */ .wlre-card,.wlre-btn,.wlre-footer,.wlre-pcard,.wlre-faq__item,.wlre-detail__side, input,select,textarea,.wlre-badge,.wlre-chip,.wlre-areatile{ transition:background-color var(--dur-base) var(--ease-base), border-color var(--dur-base) var(--ease-base), color var(--dur-base) var(--ease-base), box-shadow var(--dur-fast) var(--ease-base), transform var(--dur-fast) var(--ease-base); } /* ---- Micro-interactions --------------------------------------------------- */ .wlre-link{position:relative;} .wlre-link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:currentColor;transition:right var(--dur-base) var(--ease-base);} .wlre-link:hover::after{right:0;} .wlre-badge--hot{animation:wlre-pulse 2.4s ease-in-out infinite;} @keyframes wlre-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}} .wlre-btn:active{transform:translateY(0) scale(.98);} /* Hero content cascade — children of the hero inner stagger in once it's revealed */ .wlre-anim .wlre-hero__inner.is-in > *, .wlre-anim .wlre-hero__text.is-in > *{ animation:wlre-hero-in var(--dur-slow) var(--ease-base) both; } .wlre-anim .wlre-hero__inner.is-in > *:nth-child(1), .wlre-anim .wlre-hero__text.is-in > *:nth-child(1){animation-delay:.05s;} .wlre-anim .wlre-hero__inner.is-in > *:nth-child(2), .wlre-anim .wlre-hero__text.is-in > *:nth-child(2){animation-delay:.13s;} .wlre-anim .wlre-hero__inner.is-in > *:nth-child(3), .wlre-anim .wlre-hero__text.is-in > *:nth-child(3){animation-delay:.21s;} .wlre-anim .wlre-hero__inner.is-in > *:nth-child(4), .wlre-anim .wlre-hero__text.is-in > *:nth-child(4){animation-delay:.29s;} .wlre-anim .wlre-hero__inner.is-in > *:nth-child(n+5){animation-delay:.36s;} @keyframes wlre-hero-in{from{opacity:0;transform:translateY(calc(18px * var(--motion-scale)));}to{opacity:1;transform:none;}} /* Mesh hero — slow ambient drift of the colour blobs */ .wlre-hero__mesh span{animation:wlre-drift 22s ease-in-out infinite alternate;} .wlre-hero__mesh span:nth-child(2){animation-duration:28s;animation-delay:-6s;} .wlre-hero__mesh span:nth-child(3){animation-duration:34s;animation-delay:-12s;} @keyframes wlre-drift{from{transform:translate(0,0) scale(1);}to{transform:translate(6%, -5%) scale(1.12);}} /* ---- Page enter / leave --------------------------------------------------- */ /* Enter: pure-CSS, gated on .wlre-anim (set in ) so JS-off pages are fine. Opacity only — a transform on would reparent the position:fixed switcher. */ .wlre-anim body{animation:wlre-pagein .4s var(--ease-base);} @keyframes wlre-pagein{from{opacity:0;}to{opacity:1;}} /* Leave: pagefx.js adds .wlre-leaving on internal-link clicks just before navigating. */ html.wlre-leaving body{opacity:0;transition:opacity .22s var(--ease-base);} @media (prefers-reduced-motion: reduce){ .wlre-anim body{animation:none;} html.wlre-leaving body{opacity:1;transform:none;transition:none;} } /* ---- Header polish (less wasted space, bigger logo) ----------------------- */ .wlre-nav--centered .wlre-nav__top{margin-bottom:var(--space-1);} .wlre-nav--centered .wlre-logo{font-size:clamp(1.25rem,2vw,1.6rem);} .wlre-nav--centered .wlre-menu{margin-top:var(--space-1);} .wlre-header.is-scrolled .wlre-nav--centered .wlre-nav__top{margin-bottom:0;} /* Card hover: warm the border + tighten shadow */ .wlre-pcard:hover{border-color:var(--c-primary);} @media (prefers-reduced-motion: reduce){ .wlre-badge--hot,.wlre-hero__mesh span{animation:none;} .wlre-link::after{transition:none;} .wlre-anim .wlre-hero__inner.is-in > *,.wlre-anim .wlre-hero__text.is-in > *{animation:none;opacity:1;transform:none;} .wlre-btn:active{transform:none;} } /* ---- step 4: card scale-in + featured "shine" sweep ----------------------- */ .wlre-anim .wlre-pcard.wlre-reveal{transform:scale(.96) translateY(var(--reveal-dist));} .wlre-anim .wlre-pcard.wlre-reveal.is-in{transform:none;} .wlre-section--featured .wlre-pcard{overflow:hidden;} .wlre-section--featured .wlre-pcard::after{content:"";position:absolute;inset:-2px;z-index:4;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);transform:translateX(-160%);} .wlre-anim .wlre-section--featured .wlre-pcard.is-in::after{animation:wlre-shine 1.1s var(--ease-base) .35s 1;} @keyframes wlre-shine{to{transform:translateX(160%);}} @media (prefers-reduced-motion: reduce){ .wlre-anim .wlre-pcard.wlre-reveal{transform:none!important;} .wlre-section--featured .wlre-pcard::after{display:none;} } html[data-motion="off"] .wlre-section--featured .wlre-pcard::after{display:none;} /* ---- step 5: mobile hamburger nav ---------------------------------------- */ .wlre-nav__burger{display:none;background:none;border:0;font-size:1.4rem;line-height:1;cursor:pointer;color:inherit;padding:4px 8px;margin-left:auto;} @media (max-width:820px){ .wlre-header{position:relative;} .wlre-nav__burger{display:inline-flex;} .wlre-nav__menu,.wlre-nav .wlre-menu{display:none;} .wlre-header.is-nav-open .wlre-nav__menu,.wlre-header.is-nav-open .wlre-nav__menu .wlre-menu{display:flex;} .wlre-header.is-nav-open .wlre-nav__menu{flex-direction:column;align-items:flex-start;gap:.5rem;position:absolute;left:0;right:0;top:100%;background:var(--c-bg);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);padding:var(--space-4);box-shadow:var(--shadow-2);z-index:80;} .wlre-header.is-nav-open .wlre-menu{flex-direction:column;align-items:flex-start;gap:.5rem;} .wlre-header--transparent-overlay.is-nav-open .wlre-nav__menu{background:var(--c-bg);} .wlre-header--transparent-overlay.is-nav-open .wlre-menu a{color:var(--c-text);text-shadow:none;} .wlre-nav--centered{display:flex;align-items:center;text-align:left;} .wlre-nav--centered .wlre-nav__top{display:contents;} .wlre-nav--centered .wlre-nav__phone,.wlre-nav--overlay .wlre-nav__menu{margin-right:0;} } @media (max-width:600px){ .wlre-searchbar select,.wlre-filter--bar select{flex:1 1 100%;} .wlre-searchbar .wlre-btn,.wlre-filter--bar .wlre-btn{flex:1 1 100%;} .wlre-section__head{flex-direction:column;align-items:flex-start;} } /* ============================================================================ ANIMATIONS v2 — scroll progress, card hover polish, section accent reveal, nav stagger, hero scroll-cue, ken-burns, form focus glow, button glow, noise. All gated by .wlre-anim on so a JS-disabled page never traps anyone. All respect prefers-reduced-motion via the media query at the bottom. ============================================================================ */ /* smooth in-page scrolling for anchor links */ html{scroll-behavior:smooth;} /* ---- scroll progress bar (top of viewport) ---- */ .wlre-scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:99998;background:transparent;pointer-events:none;} .wlre-scrollbar::before{content:"";display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c-primary),var(--c-accent,var(--c-primary)));transform-origin:left center;transform:scaleX(0);animation:wlre-progress linear both;animation-timeline:scroll(root);} @keyframes wlre-progress{from{transform:scaleX(0);}to{transform:scaleX(1);}} @supports not (animation-timeline:scroll()){.wlre-scrollbar{display:none;}} /* ---- card hover polish (image idle zoom, chip lift, view arrow slide, price pulse) ---- */ .wlre-anim .wlre-pcard__media img{transition:transform 3.5s var(--ease-base);} .wlre-anim .wlre-pcard:hover .wlre-pcard__media img{transform:scale(1.08);} .wlre-anim .wlre-pcard .wlre-pcard__specs li{transition:transform var(--dur-base) var(--ease-base),background-color var(--dur-base) var(--ease-base),color var(--dur-base) var(--ease-base);} .wlre-anim .wlre-pcard:hover .wlre-pcard__specs li{transform:translateY(-2px);} .wlre-anim .wlre-pcard__view::after{content:" →";display:inline-block;transition:transform var(--dur-fast) var(--ease-base);} .wlre-anim .wlre-pcard:hover .wlre-pcard__view::after{transform:translateX(4px);} .wlre-anim .wlre-pcard--below .wlre-pcard__price{transition:transform var(--dur-base) var(--ease-base),background var(--dur-base) var(--ease-base);} .wlre-anim .wlre-pcard--below:hover .wlre-pcard__price{transform:scale(1.04);} .wlre-anim .wlre-pcard__badges .wlre-badge{transition:transform var(--dur-fast) var(--ease-spring);} .wlre-anim .wlre-pcard:hover .wlre-pcard__badges .wlre-badge{transform:translateY(-1px);} /* ---- section header accent bar animates in on reveal (scoped to .wlre-reveal heads) ---- */ .wlre-anim .wlre-section__head.wlre-reveal h2::after{width:0;transition:width .9s var(--ease-base) .15s;} .wlre-anim .wlre-section__head.wlre-reveal.is-in h2::after{width:54px;} /* hero gets a longer accent line under its title once it's in view */ .wlre-anim .wlre-hero__inner.is-in .wlre-hero__title::after{content:"";display:block;height:3px;width:0;background:currentColor;margin-top:.5em;border-radius:2px;animation:wlre-bar-grow 1s var(--ease-base) .35s forwards;opacity:.55;} @keyframes wlre-bar-grow{from{width:0;}to{width:88px;}} /* ---- nav items stagger in on first paint ---- */ @keyframes wlre-navin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} .wlre-anim .wlre-menu > li{opacity:0;animation:wlre-navin .5s var(--ease-base) forwards;} .wlre-anim .wlre-menu > li:nth-child(1){animation-delay:.04s;} .wlre-anim .wlre-menu > li:nth-child(2){animation-delay:.08s;} .wlre-anim .wlre-menu > li:nth-child(3){animation-delay:.12s;} .wlre-anim .wlre-menu > li:nth-child(4){animation-delay:.16s;} .wlre-anim .wlre-menu > li:nth-child(5){animation-delay:.20s;} .wlre-anim .wlre-menu > li:nth-child(6){animation-delay:.24s;} .wlre-anim .wlre-menu > li:nth-child(7){animation-delay:.28s;} .wlre-anim .wlre-nav__phone,.wlre-anim .wlre-nav .wlre-btn{opacity:0;animation:wlre-navin .5s var(--ease-base) .32s forwards;} /* ---- hero scroll-down cue (injected by anim.js into the FIRST hero) ---- */ .wlre-hero__cue{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:24px;height:38px;border:2px solid currentColor;border-radius:14px;opacity:.55;pointer-events:none;z-index:3;} .wlre-hero__cue::before{content:"";display:block;width:3px;height:8px;border-radius:2px;background:currentColor;margin:6px auto 0;animation:wlre-cue 1.8s var(--ease-base) infinite;} @keyframes wlre-cue{0%{transform:translateY(0);opacity:1;}80%{transform:translateY(14px);opacity:0;}100%{transform:translateY(14px);opacity:0;}} /* ---- ken-burns slow drift on image-hero backgrounds ---- */ .wlre-anim .wlre-hero[style*="--wlre-hero-img"]::before, .wlre-anim .wlre-hero--fullbleed[style*="--wlre-hero-img"]::before{animation:wlre-kenburns 24s var(--ease-base) infinite alternate;will-change:transform;} @keyframes wlre-kenburns{from{transform:scale(1) translate(0,0);}to{transform:scale(1.08) translate(-1.5%,-1%);}} /* ---- subtle noise texture on body (premium feel) ---- */ body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,");} /* ---- form input focus glow ---- */ .wlre-anim input[type=text]:focus, .wlre-anim input[type=search]:focus, .wlre-anim input[type=email]:focus, .wlre-anim input[type=number]:focus, .wlre-anim input[type=tel]:focus, .wlre-anim textarea:focus, .wlre-anim select:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-primary) 22%,transparent);outline:none;transition:border-color .2s,box-shadow .2s;} /* ---- button radial-glow hover (cursor-tracked via --mx/--my) ---- */ .wlre-anim .wlre-btn{position:relative;overflow:hidden;isolation:isolate;} .wlre-anim .wlre-btn::after{content:"";position:absolute;inset:-1px;z-index:-1;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 55%);opacity:0;transition:opacity .25s var(--ease-base);pointer-events:none;} .wlre-anim .wlre-btn:hover::after{opacity:1;} /* ---- nav-link font-weight pulse on hover (variable-font ready) ---- */ .wlre-anim .wlre-menu a{transition:color var(--dur-fast) var(--ease-base),font-weight var(--dur-fast) var(--ease-base),letter-spacing var(--dur-fast) var(--ease-base);} .wlre-anim .wlre-menu a:hover{letter-spacing:.012em;} /* ---- area-tiles lift on hover ---- */ .wlre-anim .wlre-areatile{transition:transform var(--dur-base) var(--ease-base),box-shadow var(--dur-base) var(--ease-base);} .wlre-anim .wlre-areatile:hover{transform:translateY(-4px);} /* ---- testimonial card subtle float on reveal ---- */ .wlre-anim .wlre-section--testimonials .wlre-card.wlre-reveal{transform:translateY(calc(20px * var(--motion-scale)));} .wlre-anim .wlre-section--testimonials .wlre-card.is-in{transform:none;} /* ---- pagination links micro-interaction ---- */ .wlre-anim .wlre-pagination .page-numbers{transition:transform var(--dur-fast) var(--ease-base),background var(--dur-fast) var(--ease-base);} .wlre-anim .wlre-pagination .page-numbers:hover{transform:translateY(-2px);} /* ---- reduced motion: kill the new motion bits ---- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .wlre-scrollbar,.wlre-hero__cue{display:none;} .wlre-anim .wlre-menu > li,.wlre-anim .wlre-nav__phone,.wlre-anim .wlre-nav .wlre-btn{animation:none;opacity:1;} .wlre-anim .wlre-hero[style*="--wlre-hero-img"]::before, .wlre-anim .wlre-hero--fullbleed[style*="--wlre-hero-img"]::before{animation:none;} .wlre-anim .wlre-pcard__media img{transition:none;} body::after{display:none;} } /* ============================================================================ ANIMATIONS v3 — slower / smoother feel + a few more touches ============================================================================ */ /* page enters with a gentle fade + slide-up (slower, calmer) */ .wlre-anim body{animation:wlre-pagein .6s var(--ease-base) both;} @keyframes wlre-pagein{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} html.wlre-leaving body{opacity:0;transition:opacity .25s var(--ease-base);} /* reveals: add a faint blur-in for a softer landing */ .wlre-anim .wlre-reveal{filter:blur(3px);transition:opacity var(--dur-reveal,800ms) var(--ease-base),transform var(--dur-reveal,800ms) var(--ease-base),filter var(--dur-reveal,800ms) var(--ease-base);} .wlre-anim .wlre-reveal.is-in{filter:none;} /* card reveal: a slightly bigger scale-from for a nicer pop */ .wlre-anim .wlre-pcard.wlre-reveal{transform:scale(.94) translateY(var(--reveal-dist));} .wlre-anim .wlre-pcard.wlre-reveal.is-in{transform:none;} /* feature / service / area / quote cards lift gently on hover */ .wlre-anim .wlre-feature,.wlre-anim .wlre-service,.wlre-anim .wlre-quote{transition:transform var(--dur-base) var(--ease-base),box-shadow var(--dur-base) var(--ease-base);} .wlre-anim .wlre-feature:hover,.wlre-anim .wlre-service:hover,.wlre-anim .wlre-quote:hover{transform:translateY(calc(-5px * var(--motion-scale)));box-shadow:var(--shadow-2);} .wlre-anim .wlre-feature__icon{transition:transform var(--dur-base) var(--ease-spring);display:inline-block;} .wlre-anim .wlre-feature:hover .wlre-feature__icon{transform:scale(1.15) rotate(-4deg);} /* footer / inline links: underline grows in from the left */ .wlre-anim .wlre-footer a,.wlre-anim .wlre-link{position:relative;} .wlre-anim .wlre-footer a::after,.wlre-anim .wlre-link::after{content:"";position:absolute;left:0;right:auto;bottom:-2px;height:1.5px;width:0;background:currentColor;transition:width var(--dur-base) var(--ease-base);} .wlre-anim .wlre-footer a:hover::after,.wlre-anim .wlre-link:hover::after{width:100%;} /* FAQ accordion: smooth open */ .wlre-anim .wlre-faq__item{transition:background-color var(--dur-base) var(--ease-base),box-shadow var(--dur-base) var(--ease-base);} .wlre-anim .wlre-faq__item[open]{box-shadow:var(--shadow-1);} .wlre-anim .wlre-faq__item summary{transition:color var(--dur-fast) var(--ease-base);} .wlre-anim .wlre-faq__item > :not(summary){animation:wlre-faq-open .35s var(--ease-base);} @keyframes wlre-faq-open{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}} /* hero text cascade: a touch slower, deeper rise */ .wlre-anim .wlre-hero__inner.is-in > *,.wlre-anim .wlre-hero__text.is-in > *{animation:wlre-hero-rise .8s var(--ease-base) both;} @keyframes wlre-hero-rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}} /* search bar pops in a beat after the hero text */ .wlre-anim .wlre-hero__inner.is-in .wlre-searchbar{animation:wlre-hero-rise .8s var(--ease-base) .4s both;} /* lightbox / dialogs fade in */ .wlre-anim .wlre-lightbox{animation:wlre-fade .25s var(--ease-base);} @keyframes wlre-fade{from{opacity:0;}to{opacity:1;}} /* pagination current page gentle pulse on load */ .wlre-anim .wlre-pagination .page-numbers.current{animation:wlre-pulse-once .6s var(--ease-base);} @keyframes wlre-pulse-once{0%{transform:scale(.85);}60%{transform:scale(1.08);}100%{transform:scale(1);}} @media (prefers-reduced-motion:reduce){ .wlre-anim .wlre-reveal{filter:none;} .wlre-anim body{animation:none;} } /* ============================================================================ ANIMATIONS v4 — bolder card "pop" on scroll-in (3D rise + stagger) + juicier hover ============================================================================ */ /* the listing/grid is a 3D stage so cards can tilt up out of it */ .wlre-anim .wlre-listing,.wlre-anim .wlre-grid{perspective:1200px;perspective-origin:50% 0;} /* cards POP in: small, low, tilted-forward, blurred → settle into place (staggered via --wlre-reveal-delay set per card in PHP) */ .wlre-anim .wlre-pcard.wlre-reveal{ opacity:0;transform:scale(.86) translateY(calc(46px * max(.5, var(--motion-scale)))) rotateX(7deg); transform-origin:center bottom;filter:blur(4px); transition:opacity .85s var(--ease-base), transform .85s var(--ease-base), filter .85s var(--ease-base); } .wlre-anim .wlre-pcard.wlre-reveal.is-in{opacity:1;transform:none;filter:none;} /* juicier hover lift + zoom */ .wlre-anim .wlre-pcard:hover{transform:translateY(calc(-10px * var(--motion-scale))) scale(calc(1 + .02 * var(--motion-scale)));} /* lively / cinematic: cards "deal in" — alternating left/right tilt as they rise */ html[data-fx="lively"] .wlre-anim .wlre-pcard.wlre-reveal, html[data-fx="cinematic"] .wlre-anim .wlre-pcard.wlre-reveal{transform:scale(.82) translateY(56px) rotateX(11deg) rotateZ(-2.5deg);} html[data-fx="lively"] .wlre-anim .wlre-listing > *:nth-child(2n) .wlre-pcard.wlre-reveal, html[data-fx="lively"] .wlre-anim .wlre-listing > .wlre-pcard:nth-child(2n).wlre-reveal, html[data-fx="cinematic"] .wlre-anim .wlre-listing > *:nth-child(2n) .wlre-pcard.wlre-reveal, html[data-fx="cinematic"] .wlre-anim .wlre-listing > .wlre-pcard:nth-child(2n).wlre-reveal{transform:scale(.82) translateY(56px) rotateX(11deg) rotateZ(2.5deg);} html[data-fx="lively"] .wlre-anim .wlre-pcard.wlre-reveal.is-in, html[data-fx="cinematic"] .wlre-anim .wlre-pcard.wlre-reveal.is-in{transform:none;} /* feature / service / quote / area cards also pop (lighter) */ .wlre-anim .wlre-feature.wlre-reveal,.wlre-anim .wlre-service.wlre-reveal,.wlre-anim .wlre-quote.wlre-reveal,.wlre-anim .wlre-areatile.wlre-reveal{transform:scale(.93) translateY(calc(26px * max(.5, var(--motion-scale))));} .wlre-anim .wlre-feature.wlre-reveal.is-in,.wlre-anim .wlre-service.wlre-reveal.is-in,.wlre-anim .wlre-quote.wlre-reveal.is-in,.wlre-anim .wlre-areatile.wlre-reveal.is-in{transform:none;} /* keep it tame at subtle / off / reduced-motion */ html[data-fx="subtle"] .wlre-anim .wlre-pcard.wlre-reveal{transform:translateY(14px);filter:none;} html[data-fx="off"] .wlre-pcard.wlre-reveal,html[data-motion="off"] .wlre-pcard.wlre-reveal{transform:none!important;filter:none!important;opacity:1!important;} @media (prefers-reduced-motion: reduce){ .wlre-anim .wlre-pcard.wlre-reveal, html[data-fx="lively"] .wlre-anim .wlre-pcard.wlre-reveal, html[data-fx="cinematic"] .wlre-anim .wlre-pcard.wlre-reveal{transform:translateY(10px);filter:none;} .wlre-anim .wlre-pcard.wlre-reveal.is-in{transform:none;} }