/* ============================================================================ FX — "Motion style" packs, switched by [data-fx] on (set by the ⚙ panel, per-layout default from wlre_layout_fx()). Each level layers on the one below: off < subtle < smooth (default) < lively < cinematic Pure CSS. Honours prefers-reduced-motion (infinite loops dropped). The panel "Motion: off" toggle (data-motion="off") and data-fx="off" both kill everything. ============================================================================ */ html[data-fx="off"] *, html[data-fx="off"] *::before, html[data-fx="off"] *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important; } html[data-fx="off"] .wlre-reveal{opacity:1!important;transform:none!important;filter:none!important;} html[data-fx="off"] .wlre-scrollbar,html[data-fx="off"] .wlre-hero__cue{display:none;} /* keep a handle for "anything but off" and "lively or cinematic" */ /* ---- CARDS ---------------------------------------------------------------- */ /* shadow bloom on hover — everything but subtle/off */ html[data-fx="smooth"] .wlre-pcard:hover, html[data-fx="lively"] .wlre-pcard:hover, html[data-fx="cinematic"] .wlre-pcard:hover{ box-shadow:0 22px 60px -10px color-mix(in srgb,var(--c-primary) 30%,transparent), var(--shadow-3); } /* gradient wash + warmer border on hover — lively/cinematic */ html[data-fx="lively"] .wlre-pcard:hover, html[data-fx="cinematic"] .wlre-pcard:hover{ background-image:linear-gradient(135deg, color-mix(in srgb,var(--c-primary) 8%,transparent), transparent 45%); } /* subtle: no card animation/transform at all, plain look */ html[data-fx="subtle"] .wlre-pcard{animation:none!important;} html[data-fx="subtle"] .wlre-pcard.wlre-reveal{transform:translateY(14px);} /* ---- BUTTONS -------------------------------------------------------------- */ /* shine sweep on hover — everything but off */ html:not([data-fx="off"]) .wlre-btn{overflow:hidden;position:relative;} html:not([data-fx="off"]) .wlre-btn::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);transition:left .6s var(--ease-base);pointer-events:none;} html:not([data-fx="off"]) .wlre-btn:hover::before{left:170%;} /* animated gradient flow on primary buttons — lively/cinematic */ html[data-fx="lively"] .wlre-btn:not(.wlre-btn--ghost):not(.wlre-btn--whatsapp), html[data-fx="cinematic"] .wlre-btn:not(.wlre-btn--ghost):not(.wlre-btn--whatsapp){ background-image:linear-gradient(110deg, color-mix(in srgb,var(--c-primary) 94%,#fff), color-mix(in srgb,var(--c-primary) 86%,#000), color-mix(in srgb,var(--c-primary) 94%,#fff)); background-size:220% 100%;animation:wlre-fx-btnflow 6s linear infinite; } @keyframes wlre-fx-btnflow{to{background-position:220% 0;}} /* breathing glow on the WhatsApp button — lively/cinematic */ html[data-fx="lively"] .wlre-btn--whatsapp, html[data-fx="cinematic"] .wlre-btn--whatsapp{animation:wlre-fx-glow 3.2s ease-in-out infinite;} @keyframes wlre-fx-glow{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0), var(--shadow-1);}50%{box-shadow:0 0 24px 2px rgba(37,211,102,.5), var(--shadow-2);}} /* ---- TEXT ----------------------------------------------------------------- */ /* animated gradient stat numbers — lively/cinematic */ html[data-fx="lively"] .wlre-stat__num, html[data-fx="cinematic"] .wlre-stat__num{ background:linear-gradient(90deg,var(--c-primary),var(--c-accent,var(--c-primary)),var(--c-primary));background-size:200% 100%; -webkit-background-clip:text;background-clip:text;color:transparent;animation:wlre-fx-gradtext 4.5s linear infinite; } @keyframes wlre-fx-gradtext{to{background-position:200% 0;}} /* shine sweep over section headers as they scroll in — cinematic (overlay on the header wrapper, so it never disturbs the h2's accent bar or text colour) */ html[data-fx="cinematic"] .wlre-section__head.wlre-reveal{position:relative;overflow:hidden;} html[data-fx="cinematic"] .wlre-section__head.wlre-reveal::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--c-primary) 18%,transparent) 50%,transparent 62%);transform:translateX(-170%);} html[data-fx="cinematic"] .wlre-section__head.wlre-reveal.is-in::after{animation:wlre-fx-headshine 1.5s var(--ease-base) .25s 1;} @keyframes wlre-fx-headshine{to{transform:translateX(170%);}} /* ambient glow behind hero title — cinematic */ html[data-fx="cinematic"] .wlre-hero__title{text-shadow:0 0 44px color-mix(in srgb,var(--c-primary) 24%,transparent);} /* ---- BACKGROUNDS ---------------------------------------------------------- */ /* aurora gradient drift over the hero — cinematic */ html[data-fx="cinematic"] .wlre-hero::after{ content:"";position:absolute;inset:-25%;z-index:0;pointer-events:none;mix-blend-mode:overlay;opacity:.45; background:radial-gradient(38% 55% at 20% 22%, color-mix(in srgb,var(--c-primary) 55%,transparent), transparent 62%), radial-gradient(46% 50% at 82% 72%, color-mix(in srgb,var(--c-accent,var(--c-primary)) 50%,transparent), transparent 62%); animation:wlre-fx-aurora 20s ease-in-out infinite alternate;will-change:transform; } @keyframes wlre-fx-aurora{from{transform:translate(0,0) scale(1) rotate(0deg);}to{transform:translate(-5%,4%) scale(1.18) rotate(7deg);}} /* keep the hero content above the aurora layer */ html[data-fx="cinematic"] .wlre-hero__inner,html[data-fx="cinematic"] .wlre-hero__text,html[data-fx="cinematic"] .wlre-hero__media{position:relative;z-index:2;} /* ---- REVEALS -------------------------------------------------------------- */ /* curtain wipe on section headers — cinematic */ html[data-fx="cinematic"] .wlre-anim .wlre-section__head.wlre-reveal{clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease-base), opacity .9s var(--ease-base), transform .9s var(--ease-base);} html[data-fx="cinematic"] .wlre-anim .wlre-section__head.wlre-reveal.is-in{clip-path:inset(0 0 0 0);} /* subtle: reveals are a plain fade, nothing else */ html[data-fx="subtle"] .wlre-anim .wlre-reveal{transform:none;filter:none;} /* ---- reduced motion: drop the infinite loops at every level ---------------- */ @media (prefers-reduced-motion: reduce){ html .wlre-pcard,html .wlre-btn:not(.wlre-btn--ghost),html .wlre-btn--whatsapp,html .wlre-stat__num,html .wlre-hero::after{animation:none!important;} html[data-fx="cinematic"] .wlre-section__head.wlre-reveal.is-in h2{animation:none;color:currentColor;background:none;-webkit-background-clip:initial;background-clip:initial;} } /* ---- JS-driven FX (fx.js): click ripple + word-stagger hero title ---------- */ .wlre-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.42);transform:scale(0);opacity:.7;pointer-events:none;animation:wlre-fx-ripple .6s ease-out forwards;} @keyframes wlre-fx-ripple{to{transform:scale(2.6);opacity:0;}} .wlre-w{display:inline-block;opacity:0;transform:translateY(.45em) rotateX(38deg);transform-origin:center bottom;animation:wlre-fx-wordin .7s var(--ease-base) forwards;} @keyframes wlre-fx-wordin{to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){.wlre-w{opacity:1;transform:none;animation:none;}.wlre-ripple{display:none;}}