/* ========================================================================== ProFocus — Distinctive scroll & hover animation system Progressive enhancement: elements are fully visible by default (this file). js/profocus-animations.js adds the hidden starting state + scroll triggers. ========================================================================== */ :root{ --pf-teal:#00C9D2; --pf-ink:#0C0E18; --pf-ease:cubic-bezier(.16,.84,.44,1); } /* Scroll progress bar (top of viewport) */ #pf-scroll-progress{ position:fixed;top:0;left:0;height:3px;width:0%; background:linear-gradient(90deg,var(--pf-teal),#68EBCF); z-index:9999;transition:width .12s linear; } /* Reveal targets — final visible state lives here so the editor looks correct */ .pf-reveal, .pf-reveal-left, .pf-reveal-right, .pf-reveal-scale, .pf-reveal-stagger > *{ opacity:1; transform:none; } /* JS adds .pf-armed to once the script has run; only then do we hide elements for the animation (so no-JS / editor / reduced-motion visitors always see final, fully visible content). */ body.pf-armed .pf-reveal{ opacity:0; transform:translateY(36px); } body.pf-armed .pf-reveal-left{ opacity:0; transform:translateX(-48px); } body.pf-armed .pf-reveal-right{ opacity:0; transform:translateX(48px); } body.pf-armed .pf-reveal-scale{ opacity:0; transform:scale(.92); } body.pf-armed .pf-reveal-stagger > *{ opacity:0; transform:translateY(28px); } body.pf-armed .pf-reveal, body.pf-armed .pf-reveal-left, body.pf-armed .pf-reveal-right, body.pf-armed .pf-reveal-scale, body.pf-armed .pf-reveal-stagger > *{ transition:opacity .8s var(--pf-ease), transform .8s var(--pf-ease); } body.pf-armed .pf-in-view.pf-reveal, body.pf-armed .pf-in-view.pf-reveal-left, body.pf-armed .pf-in-view.pf-reveal-right, body.pf-armed .pf-in-view.pf-reveal-scale, body.pf-armed .pf-reveal-stagger.pf-in-view > *{ opacity:1; transform:none; } /* Stagger delays for children inside a .pf-reveal-stagger container */ body.pf-armed .pf-reveal-stagger > *:nth-child(1){ transition-delay:.05s; } body.pf-armed .pf-reveal-stagger > *:nth-child(2){ transition-delay:.15s; } body.pf-armed .pf-reveal-stagger > *:nth-child(3){ transition-delay:.25s; } body.pf-armed .pf-reveal-stagger > *:nth-child(4){ transition-delay:.35s; } body.pf-armed .pf-reveal-stagger > *:nth-child(5){ transition-delay:.45s; } body.pf-armed .pf-reveal-stagger > *:nth-child(6){ transition-delay:.55s; } body.pf-armed .pf-reveal-stagger > *:nth-child(7){ transition-delay:.65s; } body.pf-armed .pf-reveal-stagger > *:nth-child(8){ transition-delay:.75s; } /* Teal glow hover — cards, industry tiles, panels */ .pf-glow-hover{ transition:box-shadow .4s var(--pf-ease), transform .4s var(--pf-ease), background-color .4s var(--pf-ease); } .pf-glow-hover:hover{ box-shadow:0 0 0 1px rgba(0,201,210,.4), 0 20px 40px -12px rgba(0,201,210,.35); transform:translateY(-6px); } /* Industry tile fill-in effect */ .pf-fill-hover{ position:relative; overflow:hidden; z-index:0; } .pf-fill-hover::before{ content:"";position:absolute;inset:0;background:var(--pf-teal); transform:scaleY(0);transform-origin:bottom;z-index:-1; transition:transform .45s var(--pf-ease); } .pf-fill-hover:hover::before{ transform:scaleY(1); } .pf-fill-hover:hover, .pf-fill-hover:hover *{ color:var(--pf-ink) !important; transition:color .3s var(--pf-ease); } /* Image zoom on hover (portfolio / blog cards) */ .pf-zoom-hover{ overflow:hidden; } .pf-zoom-hover img{ transition:transform .7s var(--pf-ease); } .pf-zoom-hover:hover img{ transform:scale(1.1); } /* Grayscale to color reveal (about gallery) */ .pf-grayscale-hover img{ filter:grayscale(1); transition:filter .5s var(--pf-ease), transform .5s var(--pf-ease); } .pf-grayscale-hover:hover img{ filter:grayscale(0); } /* Button micro-interaction */ .pf-btn-pop{ transition:transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease); } .pf-btn-pop:hover{ transform:scale(1.05); box-shadow:0 10px 24px -8px rgba(0,201,210,.5); } /* Play button pulse */ .pf-pulse{ position:relative; } .pf-pulse::after{ content:"";position:absolute;inset:0;border-radius:50%; border:2px solid var(--pf-teal); opacity:0; } body.pf-armed .pf-pulse::after{ animation:pf-pulse-ring 2.2s var(--pf-ease) infinite; } @keyframes pf-pulse-ring{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.6); opacity:0; } } /* Sticky nav shrink-on-scroll target */ .pf-nav{ transition:padding .3s var(--pf-ease), box-shadow .3s var(--pf-ease), background-color .3s var(--pf-ease); } .pf-nav.pf-scrolled{ padding-top:10px !important; padding-bottom:10px !important; box-shadow:0 8px 24px -12px rgba(0,0,0,.4); background-color:rgba(11,14,18,.85) !important; backdrop-filter:blur(14px); } /* Counter number nudge on count-up completion */ .pf-counter-pop.pf-counted{ animation:pf-counter-pop .5s var(--pf-ease); } @keyframes pf-counter-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); } 100%{ transform:scale(1); } } /* Marquee-style ticking divider (optional accent under headings) */ .pf-underline-grow{ position:relative; display:inline-block; } .pf-underline-grow::after{ content:"";position:absolute;left:0;bottom:-6px;height:2px;width:100%; background:var(--pf-teal); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--pf-ease); } body.pf-armed .pf-in-view .pf-underline-grow::after{ transform:scaleX(1); } /* ========================================================================== Auto-apply reveal/hover to native Elementor + JeKit widgets so existing Elementor content (built with core + jkit widgets) animates without needing manual CSS classes on every widget. Header/footer excluded so navigation is always instantly visible. ========================================================================== */ body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-heading, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-image, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-image-box, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-icon-box, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_icon_box, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-testimonial, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-star-rating, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-counter, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_fun_fact, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_post_block, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_post_list, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-button, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_button, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-form{ opacity:0; transform:translateY(34px); transition:opacity .75s var(--pf-ease), transform .75s var(--pf-ease); } body.pf-armed .elementor[data-elementor-type="wp-page"] .pf-auto-in{ opacity:1 !important; transform:none !important; } /* First hero section content should not wait for scroll (already in view) */ body.pf-armed .elementor-section:first-of-type .elementor-widget-heading, body.pf-armed .elementor-section:first-of-type .elementor-widget-text-editor, body.pf-armed .elementor-section:first-of-type .elementor-widget-button, body.pf-armed .elementor-section:first-of-type .elementor-widget-jkit_button{ transition-delay:.1s; } /* Native Elementor / JeKit hover polish, applied automatically */ .elementor-widget-icon-box, .elementor-widget-jkit_icon_box, .elementor-widget-image-box{ transition:transform .4s var(--pf-ease); } .elementor-widget-icon-box:hover, .elementor-widget-jkit_icon_box:hover, .elementor-widget-image-box:hover{ transform:translateY(-6px); } .elementor-widget-image img, .elementor-widget-image-box img{ transition:transform .6s var(--pf-ease), filter .5s var(--pf-ease); } .elementor-widget-image:hover img, .elementor-widget-image-box:hover img{ transform:scale(1.05); } .jkit-button-wrapper, .elementor-button{ transition:transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease) !important; } .jkit-button-wrapper:hover, .elementor-button:hover{ transform:scale(1.04); } /* Respect reduced motion: disable all custom motion, keep final state */ @media (prefers-reduced-motion: reduce){ #pf-scroll-progress{ transition:none; } .pf-reveal, .pf-reveal-left, .pf-reveal-right, .pf-reveal-scale, .pf-reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; } .pf-glow-hover:hover{ transform:none; } .pf-zoom-hover:hover img{ transform:none; } .pf-fill-hover::before{ transition:none; } .pf-btn-pop:hover{ transform:none; } .pf-pulse::after{ animation:none !important; } .pf-nav{ transition:none; } .pf-counter-pop.pf-counted{ animation:none; } .pf-underline-grow::after{ transition:none; } body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-heading, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-text-editor, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-image, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-image-box, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-icon-box, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_icon_box, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-testimonial, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-star-rating, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-counter, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_fun_fact, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_post_block, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_post_list, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-button, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-jkit_button, body.pf-armed .elementor[data-elementor-type="wp-page"] .elementor-widget-form{ opacity:1 !important; transform:none !important; transition:none !important; } .elementor-widget-icon-box:hover, .elementor-widget-jkit_icon_box:hover, .elementor-widget-image-box:hover, .elementor-widget-image:hover img, .elementor-widget-image-box:hover img, .jkit-button-wrapper:hover, .elementor-button:hover{ transform:none !important; } }