/* Career Bazar BD — motion layer. Loaded after theme.css. Extends the existing .cb-reveal system (theme.css ~201, app.js observer). Rules: transform/opacity only; all motion gated behind prefers-reduced-motion:no-preference; no JS added. */ :root{ --mo-fast:180ms; --mo-base:400ms; --mo-slow:700ms; --mo-ease:cubic-bezier(.22,1,.36,1); --mo-spring:cubic-bezier(.34,1.4,.64,1); --mo-rise:18px; } /* --- Reveal variants (element must also have .cb-reveal) ------------- */ @media(prefers-reduced-motion:no-preference){ .cb-reveal.cb-reveal-left{transform:translateX(calc(-1 * var(--mo-rise)))} .cb-reveal.cb-reveal-right{transform:translateX(var(--mo-rise))} .cb-reveal.cb-reveal-scale{transform:translateY(10px) scale(.96)} .cb-reveal.is-in{transform:none} } /* --- No-JS safety net ------------------------------------------------ app.js:51 already reveals everything when IntersectionObserver or motion is unavailable, but with JS fully disabled .cb-reveal stays opacity:0 forever. CSP forbids an inline script, so use the scripting media feature (Chrome 120+/FF/Safari 17+). */ @media(scripting:none){ .cb-reveal{opacity:1 !important;transform:none !important} } /* --- Load-in entrance (hero, urgency bar): plays on paint, no JS ----- */ @media(prefers-reduced-motion:no-preference){ @keyframes mo-enter-up{from{opacity:0;transform:translateY(var(--mo-rise))}to{opacity:1;transform:none}} .cb-enter{opacity:0;animation:mo-enter-up var(--mo-slow) var(--mo-ease) forwards} .cb-enter-1{animation-delay:80ms} .cb-enter-2{animation-delay:160ms} .cb-enter-3{animation-delay:240ms} .cb-enter-4{animation-delay:320ms} .cb-enter-5{animation-delay:400ms} .cb-enter-6{animation-delay:480ms} @keyframes mo-slide-down{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}} .cb-urgency{animation:mo-slide-down var(--mo-base) var(--mo-ease)} } @media(scripting:none){ .cb-enter{opacity:1 !important;animation:none !important} } /* --- Hover micro-interactions ---------------------------------------- */ @media(prefers-reduced-motion:no-preference){ /* category card: icon tilt (arrow slide already exists in theme.css) */ .cb-cat-ic{transition:transform var(--mo-fast) var(--mo-ease)} .cb-cat-card:hover .cb-cat-ic{transform:rotate(3deg) scale(1.06)} /* product card: image zoom inside the overflow-hidden card */ .cb-card>img{transition:transform var(--mo-base) var(--mo-ease)} .cb-card:hover>img{transform:scale(1.04)} /* CTA press feel: spring scale on hover, compress on press. theme.css already transitions transform on these spans (line 283); we add the transform values + spring easing override. */ .cb-cta-primary>span,.cb-header-cta>span{transition-timing-function:var(--mo-spring)} .cb-cta-primary:hover>span,.cb-header-cta:hover>span{transform:scale(1.03)} .cb-cta-primary:active>span,.cb-header-cta:active>span{transform:scale(.97)} .cb-cta-secondary>span{transition:background .2s,border-color .2s,transform var(--mo-fast) var(--mo-spring)} .cb-cta-secondary:hover>span{transform:scale(1.03)} .cb-cta-secondary:active>span{transform:scale(.97)} } /* --- Pricing card: one-shot border glow after reveal ----------------- */ @media(prefers-reduced-motion:no-preference){ @keyframes mo-glow{0%,100%{opacity:0}45%{opacity:1}} .cb-price-glow{position:relative} .cb-price-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 1px rgba(159,239,0,.5),0 0 40px rgba(159,239,0,.18);opacity:0} .cb-price-glow.is-in::after{animation:mo-glow 1.6s var(--mo-ease) .3s 1} } /* --- Mega-menu: per-row stagger on open ------------------------------ */ @media(prefers-reduced-motion:no-preference){ .cb-mega-panel .cb-mega-row{opacity:0;transform:translateY(6px);transition:opacity var(--mo-fast) var(--mo-ease),transform var(--mo-fast) var(--mo-ease)} .cb-mega:hover .cb-mega-row,.cb-mega:focus-within .cb-mega-row{opacity:1;transform:none} .cb-mega:hover .cb-mega-row:nth-child(2),.cb-mega:focus-within .cb-mega-row:nth-child(2){transition-delay:40ms} .cb-mega:hover .cb-mega-row:nth-child(3),.cb-mega:focus-within .cb-mega-row:nth-child(3){transition-delay:80ms} .cb-mega:hover .cb-mega-row:nth-child(4),.cb-mega:focus-within .cb-mega-row:nth-child(4){transition-delay:120ms} .cb-mega:hover .cb-mega-row:nth-child(5),.cb-mega:focus-within .cb-mega-row:nth-child(5){transition-delay:160ms} } /* mobile: panel is display-toggled (theme.css:124, 860px breakpoint), rows must stay visible */ @media(max-width:860px){.cb-mega-panel .cb-mega-row{opacity:1;transform:none;transition:none}} /* --- Custom cursor: dot + trailing ring ------------------------------ Markup printed by wp_footer (inc/assets.php); app.js positions the wrappers (transform translate) and adds body.cb-cursor ONLY when pointer:fine + motionOK — so touch, reduced-motion, and no-JS all keep the native cursor. Inner handles scale/hover so the wrapper translate never fights a transition. */ body.cb-cursor{cursor:none} body.cb-cursor :where(a,button,summary,select,label,[role=button]){cursor:none} body.cb-cursor :where(input,textarea){cursor:text} .cb-cur{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;opacity:0;transition:opacity .25s} body.cb-cursor .cb-cur{opacity:1} body.cb-cursor.cb-cur-hide .cb-cur{opacity:0} .cb-cur i{display:block;border-radius:50%;transition:transform var(--mo-fast) var(--mo-ease),border-color var(--mo-fast) var(--mo-ease)} .cb-cur-dot i{width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--cb-primary);box-shadow:0 0 10px rgba(159,239,0,.8)} .cb-cur-ring i{width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid rgba(159,239,0,.55)} body.cb-cur-hover .cb-cur-dot i{transform:scale(.5)} body.cb-cur-hover .cb-cur-ring i{transform:scale(1.6);border-color:rgba(159,239,0,.9)} body.cb-cur-click .cb-cur-dot i{transform:scale(2.4)}