.sah-widget{width:100%;} .sah-heading{margin:0;line-height:1.3;} /* ---- Fade Up (on scroll) ---- */ /* Hidden-until-revealed state only applies once JS confirms we're on the live frontend (adds .sah-live-js to ). This guarantees content always stays visible in the Elementor editor and in any no-JS situation. */ .sah-live-js .sah-anim-fade-up{opacity:0;transform:translateY(30px);transition:opacity .7s ease, transform .7s ease;} .sah-live-js .sah-anim-fade-up.sah-play{opacity:1;transform:translateY(0);} /* ---- Bounce In (on scroll) ---- */ .sah-live-js .sah-anim-bounce-in{opacity:0;transform:scale(.6);} .sah-live-js .sah-anim-bounce-in.sah-play{animation:sah-bounce-in .8s cubic-bezier(.34,1.56,.64,1) forwards;} @keyframes sah-bounce-in{ 0%{opacity:0;transform:scale(.6);} 60%{opacity:1;transform:scale(1.08);} 100%{opacity:1;transform:scale(1);} } /* ---- Letter by Letter Pop (on scroll) ---- */ .sah-live-js .sah-anim-letter-pop .sah-letter{display:inline-block;opacity:0;transform:translateY(16px);} .sah-live-js .sah-anim-letter-pop.sah-play .sah-letter{animation:sah-letter-pop .5s ease forwards;} @keyframes sah-letter-pop{ 0%{opacity:0;transform:translateY(16px) scale(.8);} 100%{opacity:1;transform:translateY(0) scale(1);} } /* ---- Typewriter Effect ---- */ .sah-anim-typing{display:inline-flex;align-items:baseline;white-space:pre-wrap;} .sah-cursor{ display:inline-block;width:3px;height:1em;margin-left:3px; animation:sah-blink 0.9s step-end infinite; vertical-align:middle; } @keyframes sah-blink{0%,49%{opacity:1;}50%,100%{opacity:0;}} /* ---- Animated Gradient Text ---- */ .sah-gradient-text{ --sah-grad-1:#5b2ee8;--sah-grad-2:#00b8a9;--sah-grad-3:#ff6b6b; background:linear-gradient(90deg,var(--sah-grad-1),var(--sah-grad-2),var(--sah-grad-3),var(--sah-grad-1)); background-size:300% 100%; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; animation:sah-gradient-shift 6s linear infinite; display:inline-block; } @keyframes sah-gradient-shift{ 0%{background-position:0% 50%;} 100%{background-position:300% 50%;} } /* ==================== Animated Button ==================== */ .sab-button{ display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden; padding:14px 32px;text-decoration:none;font-weight:700;background:#5b2ee8;color:#fff; transition:transform .2s ease, box-shadow .2s ease; } .sab-button:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18);} .sab-label{position:relative;z-index:1;} .sab-anim-pulse{animation:sab-pulse 1.8s ease-in-out infinite;} @keyframes sab-pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(91,46,232,.5);} 50%{box-shadow:0 0 0 14px rgba(91,46,232,0);} } .sab-anim-shine{} .sab-shine{ position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-20deg); } .sab-anim-shine:hover .sab-shine{animation:sab-shine-sweep .9s ease;} @keyframes sab-shine-sweep{ 0%{left:-60%;} 100%{left:130%;} } .sab-anim-bounce:hover{animation:sab-bounce-hover .5s ease;} @keyframes sab-bounce-hover{ 0%,100%{transform:translateY(0);} 30%{transform:translateY(-8px);} 60%{transform:translateY(0);} 80%{transform:translateY(-3px);} } .sab-anim-gradient-bg{ --sab-grad-1:#5b2ee8;--sab-grad-2:#00b8a9; background:linear-gradient(90deg,var(--sab-grad-1),var(--sab-grad-2),var(--sab-grad-1)); background-size:250% 100%; animation:sab-gradient-move 4s linear infinite; } @keyframes sab-gradient-move{ 0%{background-position:0% 50%;} 100%{background-position:250% 50%;} } /* ==================== Animated Counter ==================== */ .sac-wrap{padding:10px;} .sac-number{font-size:42px;font-weight:800;line-height:1;} .sac-label{margin-top:8px;font-size:15px;font-weight:600;} /* ==================== Animated Image ==================== */ .sai-wrap{} .sai-img{display:inline-block;overflow:hidden;} .sai-img img{display:block;width:100%;height:auto;transition:transform .4s ease, filter .4s ease;} .sah-live-js .sai-entrance-fade-in{opacity:0;transition:opacity .8s ease;} .sai-entrance-fade-in.sah-play{opacity:1;} .sah-live-js .sai-entrance-zoom-in{opacity:0;transform:scale(.85);transition:opacity .7s ease, transform .7s ease;} .sai-entrance-zoom-in.sah-play{opacity:1;transform:scale(1);} .sah-live-js .sai-entrance-slide-left{opacity:0;transform:translateX(-60px);transition:opacity .7s ease, transform .7s ease;} .sai-entrance-slide-left.sah-play{opacity:1;transform:translateX(0);} .sah-live-js .sai-entrance-slide-right{opacity:0;transform:translateX(60px);transition:opacity .7s ease, transform .7s ease;} .sai-entrance-slide-right.sah-play{opacity:1;transform:translateX(0);} .sai-hover-zoom:hover img{transform:scale(1.08);} .sai-hover-grayscale img{filter:grayscale(100%);} .sai-hover-grayscale:hover img{filter:grayscale(0%);} .sai-hover-tilt:hover img{transform:rotate(-2deg) scale(1.03);} /* ==================== Image Marquee ==================== */ .sim-wrap{position:relative;width:100%;overflow:hidden;} .sim-scroller{display:flex;width:100%;overflow:hidden;} .sim-track{ display:flex;align-items:center;flex-shrink:0;min-width:100%; animation-name:sim-scroll-left;animation-timing-function:linear;animation-iteration-count:infinite; } @keyframes sim-scroll-left{ from{transform:translateX(0);} to{transform:translateX(-100%);} } .sim-pause-hover:hover .sim-track{animation-play-state:paused;} .sim-item{display:inline-flex;align-items:center;flex-shrink:0;} .sim-item img{display:block;object-fit:contain;transition:filter .3s ease, transform .3s ease;} .sim-item:hover img{transform:scale(1.06);} .sim-grayscale .sim-item img{filter:grayscale(100%);opacity:.75;} .sim-grayscale .sim-item:hover img{filter:grayscale(0%);opacity:1;} .sim-fade-edges::before,.sim-fade-edges::after{ content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none; } .sim-fade-edges::before{left:0;background:linear-gradient(90deg, var(--sim-fade-color,#fff), transparent);} .sim-fade-edges::after{right:0;background:linear-gradient(-90deg, var(--sim-fade-color,#fff), transparent);}