/* ============================================================ MotionCraft – animation library Elements start hidden via .mc-waiting and play when the JS engine adds .mc-play. Easing comes from a CSS variable so the editor control maps 1:1. ============================================================ */ .mc-el { --mc-dur: 800ms; --mc-delay: 0ms; --mc-ease: cubic-bezier(.2, .7, .2, 1); } /* easing presets (set by JS from data-mc-easing) */ .mc-ease-smooth { --mc-ease: cubic-bezier(.2, .7, .2, 1); } .mc-ease-ease { --mc-ease: ease; } .mc-ease-out { --mc-ease: cubic-bezier(0, 0, .2, 1); } .mc-ease-in-out { --mc-ease: cubic-bezier(.45, 0, .55, 1); } .mc-ease-spring { --mc-ease: cubic-bezier(.2, .9, .25, 1.2); } .mc-ease-back { --mc-ease: cubic-bezier(.34, 1.56, .64, 1); } .mc-ease-linear { --mc-ease: linear; } /* Hide before play (except looping + mouse-only elements) */ .mc-waiting:not(.mc-play) { opacity: 0 !important; } .mc-waiting[data-mc-anim^="shimmer"]:not(.mc-play), .mc-waiting[data-mc-anim="float"]:not(.mc-play), .mc-waiting[data-mc-anim="pulse"]:not(.mc-play), .mc-waiting[data-mc-anim="wiggle"]:not(.mc-play), .mc-waiting[data-mc-anim="glow"]:not(.mc-play) { opacity: 1 !important; } .mc-play { opacity: 1; } /* After a one-shot entrance finishes, release the animation so mouse effects (tilt / magnetic / parallax) can transform freely. */ .mc-play.mc-done { animation: none !important; } /* ---------- fade & slide ---------- */ .mc-play[data-mc-anim="fade-in"] { animation: mcFadeIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="fade-up"] { animation: mcFadeUp var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="fade-down"] { animation: mcFadeDown var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="fade-left"] { animation: mcFadeLeft var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="fade-right"] { animation: mcFadeRight var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="slide-up-big"] { animation: mcSlideUpBig var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="zoom-in"] { animation: mcZoomIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="zoom-out"] { animation: mcZoomOut var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="blur-in"] { animation: mcBlurIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="elastic-pop"] { animation: mcElastic var(--mc-dur) cubic-bezier(.34,1.56,.64,1) var(--mc-delay) both; } .mc-play[data-mc-anim="bounce-in"] { animation: mcBounceIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } @keyframes mcFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mcFadeUp { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } } @keyframes mcFadeDown { from { opacity: 0; transform: translateY(-38px); } to { opacity: 1; transform: none; } } @keyframes mcFadeLeft { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: none; } } @keyframes mcFadeRight { from { opacity: 0; transform: translateX(-46px); } to { opacity: 1; transform: none; } } @keyframes mcSlideUpBig{ from { opacity: 0; transform: translateY(110px); } to { opacity: 1; transform: none; } } @keyframes mcZoomIn { from { opacity: 0; transform: scale(.78); } to { opacity: 1; transform: none; } } @keyframes mcZoomOut { from { opacity: 0; transform: scale(1.22); } to { opacity: 1; transform: none; } } @keyframes mcBlurIn { from { opacity: 0; filter: blur(14px); transform: scale(1.04); } to { opacity: 1; filter: blur(0); transform: none; } } @keyframes mcElastic { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } } @keyframes mcBounceIn { 0% { opacity: 0; transform: translateY(-60px); } 55% { opacity: 1; transform: translateY(12px); } 75% { transform: translateY(-6px); } 100% { transform: none; } } /* ---------- rotate & flip ---------- */ .mc-play[data-mc-anim="flip-x"] { animation: mcFlipX var(--mc-dur) var(--mc-ease) var(--mc-delay) both; transform-origin: center; } .mc-play[data-mc-anim="flip-y"] { animation: mcFlipY var(--mc-dur) var(--mc-ease) var(--mc-delay) both; transform-origin: center; } .mc-play[data-mc-anim="rotate-in"] { animation: mcRotIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="skew-in"] { animation: mcSkewIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="swing-in"] { animation: mcSwingIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; transform-origin: top center; } @keyframes mcFlipX { from { opacity: 0; transform: perspective(900px) rotateX(70deg); } to { opacity: 1; transform: none; } } @keyframes mcFlipY { from { opacity: 0; transform: perspective(900px) rotateY(70deg); } to { opacity: 1; transform: none; } } @keyframes mcRotIn { from { opacity: 0; transform: rotate(-9deg) scale(.92); } to { opacity: 1; transform: none; } } @keyframes mcSkewIn { from { opacity: 0; transform: skewY(5deg) translateY(40px); } to { opacity: 1; transform: none; } } @keyframes mcSwingIn { 0% { opacity: 0; transform: perspective(900px) rotateX(-80deg); } 60% { opacity: 1; transform: perspective(900px) rotateX(14deg); } 100% { opacity: 1; transform: none; } } /* ---------- reveal masks ---------- */ .mc-play[data-mc-anim="wipe-right"] { animation: mcWipeR var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } .mc-play[data-mc-anim="wipe-left"] { animation: mcWipeL var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } .mc-play[data-mc-anim="wipe-up"] { animation: mcWipeU var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } .mc-play[data-mc-anim="wipe-down"] { animation: mcWipeD var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } .mc-play[data-mc-anim="circle-reveal"] { animation: mcCircle var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } .mc-play[data-mc-anim="curtain"] { animation: mcCurtain var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } @keyframes mcWipeR { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes mcWipeL { from { opacity: 1; clip-path: inset(0 0 0 100%); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes mcWipeU { from { opacity: 1; clip-path: inset(100% 0 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes mcWipeD { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } } @keyframes mcCircle { from { opacity: 1; clip-path: circle(0% at 50% 50%); } to { opacity: 1; clip-path: circle(75% at 50% 50%); } } @keyframes mcCurtain { from { opacity: 1; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* ---------- text split pieces (JS wraps words / letters) ---------- */ .mc-w, .mc-ch { display: inline-block; will-change: transform, opacity; } .mc-ws { white-space: pre; } /* preserved space */ [data-mc-anim="words-up"] .mc-w, [data-mc-anim="words-pop"] .mc-w, [data-mc-anim="letters-rise"] .mc-ch, [data-mc-anim="letters-scatter"] .mc-ch, [data-mc-anim="letters-wave"] .mc-ch, [data-mc-anim="letters-flip"] .mc-ch { opacity: 0; } .mc-play[data-mc-anim="words-up"] .mc-w { animation: mcWordUp .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--mc-i, 0ms); } .mc-play[data-mc-anim="words-pop"] .mc-w { animation: mcWordPop .55s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--mc-i, 0ms); } .mc-play[data-mc-anim="letters-rise"] .mc-ch { animation: mcChUp .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--mc-i, 0ms); } .mc-play[data-mc-anim="letters-scatter"] .mc-ch{ animation: mcChScatter .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--mc-i, 0ms); } .mc-play[data-mc-anim="letters-wave"] .mc-ch { animation: mcChWave .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--mc-i, 0ms); } .mc-play[data-mc-anim="letters-flip"] .mc-ch { animation: mcChFlip .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--mc-i, 0ms); transform-origin: bottom; } @keyframes mcWordUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } @keyframes mcWordPop { from { opacity: 0; transform: scale(.5) translateY(14px); } to { opacity: 1; transform: none; } } @keyframes mcChUp { from { opacity: 0; transform: translateY(100%) rotate(4deg); } to { opacity: 1; transform: none; } } @keyframes mcChScatter { from { opacity: 0; transform: translate(var(--mc-sx, 30px), var(--mc-sy, -40px)) rotate(var(--mc-sr, 20deg)); } to { opacity: 1; transform: none; } } @keyframes mcChWave { 0% { opacity: 0; transform: translateY(22px); } 60% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } } @keyframes mcChFlip { from { opacity: 0; transform: perspective(600px) rotateX(-90deg); } to { opacity: 1; transform: none; } } /* typewriter */ [data-mc-anim="typewriter"] .mc-type-inner { display: inline-block; white-space: nowrap; overflow: hidden; max-width: 0; border-right: 3px solid currentColor; } .mc-play[data-mc-anim="typewriter"] .mc-type-inner { animation: mcTyping var(--mc-dur) steps(var(--mc-steps, 24)) var(--mc-delay) forwards, mcCaret .8s step-end infinite; } @keyframes mcTyping { to { max-width: 100%; } } @keyframes mcCaret { 50% { border-color: transparent; } } /* underline draw */ [data-mc-anim="underline-draw"] .mc-line-target { position: relative; display: inline-block; } [data-mc-anim="underline-draw"] .mc-line-target::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 4px; width: 0; background: linear-gradient(120deg, var(--mc-c1, #FFB704), var(--mc-c2, #F1343A)); border-radius: 3px; } .mc-play[data-mc-anim="underline-draw"] .mc-line-target::after { animation: mcLine var(--mc-dur) cubic-bezier(.65,0,.35,1) calc(var(--mc-delay) + 150ms) forwards; } @keyframes mcLine { to { width: 100%; } } /* marker highlight */ [data-mc-anim="highlight-marker"] .mc-line-target { background-image: linear-gradient(120deg, rgba(255,183,4,.45), rgba(241,52,58,.4)); background-repeat: no-repeat; background-size: 0% 42%; background-position: 0 78%; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .mc-play[data-mc-anim="highlight-marker"] .mc-line-target { animation: mcMarker var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) forwards; } @keyframes mcMarker { to { background-size: 100% 42%; } } /* gradient sweep */ .mc-play[data-mc-anim="gradient-sweep"] .mc-grad-target { background: linear-gradient(120deg, var(--mc-c1, #FFB704), var(--mc-c2, #F1343A), var(--mc-c1, #FFB704)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mcGradSweep calc(var(--mc-dur) * 2.2) ease infinite; } @keyframes mcGradSweep { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } } /* glitch */ .mc-play[data-mc-anim="glitch"] { animation: mcFadeIn .3s ease var(--mc-delay) both; } .mc-play[data-mc-anim="glitch"] .mc-glitch-target { position: relative; animation: mcGlitchShift .9s steps(2) var(--mc-delay); } @keyframes mcGlitchShift { 0%, 100% { transform: none; text-shadow: none; } 20% { transform: translate(-3px, 2px); text-shadow: 3px 0 #F1343A, -3px 0 #2f6bff; } 40% { transform: translate(3px, -2px); text-shadow: -3px 0 #F1343A, 3px 0 #2f6bff; } 60% { transform: translate(-2px, -1px); text-shadow: 2px 0 #EC1651, -2px 0 #1fae54; } 80% { transform: translate(2px, 1px); text-shadow: none; } } /* shimmer loop */ .mc-play[data-mc-anim="shimmer"] { position: relative; overflow: hidden; } .mc-play[data-mc-anim="shimmer"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-100%); animation: mcShimmer 2.6s ease infinite; pointer-events: none; } @keyframes mcShimmer { to { transform: translateX(100%); } } /* counter just fades in – numbers handled in JS */ .mc-play[data-mc-anim="counter"] { animation: mcFadeUp var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } /* ---------- looping attention ---------- */ .mc-play[data-mc-anim="float"] { animation: mcFloat 2.6s ease-in-out infinite; } .mc-play[data-mc-anim="pulse"] { animation: mcPulse 1.8s ease-in-out infinite; } .mc-play[data-mc-anim="wiggle"] { animation: mcWiggle 2.4s ease-in-out infinite; } .mc-play[data-mc-anim="glow"] { animation: mcGlow 2.2s ease-in-out infinite; } @keyframes mcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes mcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes mcWiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-1.6deg); } 75% { transform: rotate(1.6deg); } } @keyframes mcGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,183,4,0)); } 50% { filter: drop-shadow(0 0 18px rgba(255,183,4,.55)); } } /* ---------- cascade children ---------- */ .mc-cascade > * { opacity: 0; transform: translateY(30px); } .mc-play.mc-cascade > * { opacity: 1; transform: none; transition: opacity .7s var(--mc-ease), transform .7s var(--mc-ease); transition-delay: var(--mc-i, 0ms); } /* ---------- mouse interaction helpers ---------- */ [data-mc-mouse] { will-change: transform; } [data-mc-mouse="tilt"] { transform-style: preserve-3d; } /* ---------- global cursor canvas ---------- */ #mc-cursor-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 999999; } /* ---------- reduced motion ---------- */ .mc-reduced .mc-waiting, .mc-reduced .mc-play, .mc-reduced .mc-cascade > * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } .mc-reduced [data-mc-anim="typewriter"] .mc-type-inner { max-width: 100%; border-right: none; animation: none !important; } /* ============================================================ v1.1.0 ADDITIONS ============================================================ */ /* ---------- new entrance / rotate / reveal ---------- */ .mc-play[data-mc-anim="roll-in"] { animation: mcRollIn var(--mc-dur) var(--mc-ease) var(--mc-delay) both; } .mc-play[data-mc-anim="fold-down"] { animation: mcFoldDown var(--mc-dur) var(--mc-ease) var(--mc-delay) both; transform-origin: top center; } .mc-play[data-mc-anim="blinds"] { animation: mcBlinds var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } .mc-play[data-mc-anim="diagonal"] { animation: mcDiagonal var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) both; } @keyframes mcRollIn { from { opacity: 0; transform: translateX(-60px) rotate(-90deg); } to { opacity: 1; transform: none; } } @keyframes mcFoldDown { from { opacity: 0; transform: perspective(800px) rotateX(-95deg); } to { opacity: 1; transform: none; } } @keyframes mcBlinds { from { opacity: 1; clip-path: repeating-linear-gradient(transparent 0, transparent 0); -webkit-mask: repeating-linear-gradient(#000 0 0); } } @keyframes mcDiagonal { from { opacity: 1; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } /* blinds done with mask for a real venetian effect */ [data-mc-anim="blinds"] { -webkit-mask: linear-gradient(#000 0 0); } .mc-play[data-mc-anim="blinds"] { -webkit-mask: repeating-linear-gradient(to bottom, #000 0, #000 0, transparent 0, transparent 12.5%); -webkit-mask-size: 100% 100%; animation: mcBlindsMask var(--mc-dur) steps(1) var(--mc-delay) forwards, mcFadeIn .3s var(--mc-delay); } @keyframes mcBlindsMask { 0% { -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 0%, transparent 0% 12.5%); } 100% { -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0 12.5%, transparent 12.5% 12.5%); } } /* ---------- new heading: words mask / blur / rotate ---------- */ [data-mc-anim="words-mask"] .mc-w-wrap, [data-mc-anim="lines-mask"] .mc-line-wrap { display: inline-block; overflow: hidden; vertical-align: top; } [data-mc-anim="words-mask"] .mc-w, [data-mc-anim="lines-mask"] .mc-line { display: inline-block; transform: translateY(110%); } .mc-play[data-mc-anim="words-mask"] .mc-w, .mc-play[data-mc-anim="lines-mask"] .mc-line { animation: mcMaskUp .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--mc-i, 0ms); } @keyframes mcMaskUp { to { transform: none; } } [data-mc-anim="words-blur"] .mc-w { opacity: 0; filter: blur(10px); } .mc-play[data-mc-anim="words-blur"] .mc-w { animation: mcWordBlur .7s ease both; animation-delay: var(--mc-i, 0ms); } @keyframes mcWordBlur { to { opacity: 1; filter: blur(0); } } [data-mc-anim="words-rotate"] .mc-w { opacity: 0; transform: rotate(8deg) translateY(20px); transform-origin: bottom left; } .mc-play[data-mc-anim="words-rotate"] .mc-w { animation: mcWordRot .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: var(--mc-i, 0ms); } @keyframes mcWordRot { to { opacity: 1; transform: none; } } [data-mc-anim="letters-blur"] .mc-ch { opacity: 0; filter: blur(8px); } .mc-play[data-mc-anim="letters-blur"] .mc-ch { animation: mcWordBlur .55s ease both; animation-delay: var(--mc-i, 0ms); } [data-mc-anim="letters-fade-rand"] .mc-ch { opacity: 0; } .mc-play[data-mc-anim="letters-fade-rand"] .mc-ch { animation: mcFadeIn .5s ease both; animation-delay: var(--mc-i, 0ms); } /* color fill on scroll (text knockout that fills L→R) */ [data-mc-anim="color-fill"] .mc-fill-target { background: linear-gradient(90deg, var(--mc-c1, #FFB704), var(--mc-c2, #F1343A)) no-repeat; background-size: 0% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: rgba(127,127,127,.32); color: rgba(127,127,127,.32); } .mc-play[data-mc-anim="color-fill"] .mc-fill-target { animation: mcColorFill var(--mc-dur) cubic-bezier(.65,0,.35,1) var(--mc-delay) forwards; } @keyframes mcColorFill { to { background-size: 100% 100%; } } /* neon flicker */ .mc-play[data-mc-anim="neon-flicker"] .mc-neon-target { color: #fff; text-shadow: 0 0 6px var(--mc-c1,#FFB704), 0 0 14px var(--mc-c1,#FFB704), 0 0 28px var(--mc-c2,#F1343A); animation: mcNeon 2.2s linear var(--mc-delay) both; } @keyframes mcNeon { 0%, 19%, 21%, 23%, 80%, 100% { opacity: 1; text-shadow: 0 0 6px var(--mc-c1,#FFB704), 0 0 14px var(--mc-c1,#FFB704), 0 0 28px var(--mc-c2,#F1343A); } 20%, 22%, 63%, 65% { opacity: .35; text-shadow: none; } } /* ---------- image hover effects ---------- */ [data-mc-img-hover] img { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .5s ease; will-change: transform, filter; } [data-mc-img-hover] { overflow: hidden; position: relative; display: inline-block; } [data-mc-img-hover] .elementor-image, [data-mc-img-hover] figure { overflow: hidden; } [data-mc-img-hover="zoom"]:hover img { transform: scale(1.12); } [data-mc-img-hover="zoom-out"] img { transform: scale(1.12); } [data-mc-img-hover="zoom-out"]:hover img { transform: scale(1); } [data-mc-img-hover="pan"]:hover img { transform: scale(1.18) translateX(-4%); } [data-mc-img-hover="gray-color"] img { filter: grayscale(1); } [data-mc-img-hover="gray-color"]:hover img { filter: grayscale(0); } [data-mc-img-hover="color-gray"]:hover img { filter: grayscale(1); } [data-mc-img-hover="blur-sharp"] img { filter: blur(5px); } [data-mc-img-hover="blur-sharp"]:hover img { filter: blur(0); } [data-mc-img-hover="lift"] { transition: transform .4s ease, box-shadow .4s ease; } [data-mc-img-hover="lift"]:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,.35); } [data-mc-img-hover="tilt"] img { transition: transform .2s ease; } [data-mc-img-hover="color-tint"]::after { content: ""; position: absolute; inset: 0; background: var(--mc-tint, #F1343A); mix-blend-mode: multiply; opacity: 0; transition: opacity .45s ease; pointer-events: none; } [data-mc-img-hover="color-tint"]:hover::after { opacity: .55; } [data-mc-img-hover="duotone"] img { filter: grayscale(1) contrast(1.1); transition: filter .5s ease; } [data-mc-img-hover="duotone"]::after { content: ""; position: absolute; inset: 0; background: var(--mc-tint, #F1343A); mix-blend-mode: color; opacity: .7; transition: opacity .45s ease; pointer-events: none; } [data-mc-img-hover="duotone"]:hover::after { opacity: 0; } [data-mc-img-hover="duotone"]:hover img { filter: grayscale(0); } [data-mc-img-hover="shine"]::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 2; background: linear-gradient(120deg, transparent, rgba(255,255,255,.5), transparent); transform: skewX(-22deg); pointer-events: none; } [data-mc-img-hover="shine"]:hover::before { animation: mcShine .9s ease; } @keyframes mcShine { to { left: 130%; } } /* ---------- image reveal on scroll ---------- */ [data-mc-img-reveal] { overflow: hidden; } [data-mc-img-reveal]:not(.mc-rev) img { will-change: clip-path, transform, opacity; } [data-mc-img-reveal="clip-up"]:not(.mc-rev) img { clip-path: inset(100% 0 0 0); } [data-mc-img-reveal="clip-left"]:not(.mc-rev) img { clip-path: inset(0 100% 0 0); } [data-mc-img-reveal="clip-right"]:not(.mc-rev) img { clip-path: inset(0 0 0 100%); } [data-mc-img-reveal="circle"]:not(.mc-rev) img { clip-path: circle(0% at 50% 50%); } [data-mc-img-reveal="splash"]:not(.mc-rev) img { clip-path: circle(0% at 50% 70%); } [data-mc-img-reveal="blinds"]:not(.mc-rev) img { clip-path: inset(0 0 100% 0); } [data-mc-img-reveal="zoom-blur"]:not(.mc-rev) img { opacity: 0; transform: scale(1.3); filter: blur(16px); } [data-mc-img-reveal].mc-rev img { transition: clip-path 1s cubic-bezier(.7,0,.2,1), transform 1.2s ease, opacity .8s ease, filter .8s ease; } [data-mc-img-reveal="clip-up"].mc-rev img, [data-mc-img-reveal="clip-left"].mc-rev img, [data-mc-img-reveal="clip-right"].mc-rev img { clip-path: inset(0 0 0 0); } [data-mc-img-reveal="circle"].mc-rev img { clip-path: circle(75% at 50% 50%); } [data-mc-img-reveal="splash"].mc-rev img { clip-path: circle(75% at 50% 70%); transition: clip-path 1.1s cubic-bezier(.34,1.4,.64,1); } [data-mc-img-reveal="blinds"].mc-rev img { clip-path: inset(0 0 0 0); } [data-mc-img-reveal="zoom-blur"].mc-rev img { opacity: 1; transform: none; filter: blur(0); } /* ken burns – continuous slow drift once revealed */ [data-mc-img-reveal="ken-burns"].mc-rev img { animation: mcKen 14s ease-in-out infinite alternate; } @keyframes mcKen { from { transform: scale(1) translate(0,0); } to { transform: scale(1.15) translate(-2%, -2%); } } /* ---------- scroll-linked (scrub) ---------- */ [data-mc-scrub] { will-change: transform, opacity; } [data-mc-scrub="h-scroll"] { white-space: nowrap; } /* ---------- mouse glare / spotlight / shine overlays ---------- */ [data-mc-mouse="tilt-glare"] { position: relative; overflow: hidden; } .mc-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.4), transparent 45%); } [data-mc-mouse="tilt-glare"]:hover .mc-glare { opacity: 1; } [data-mc-mouse="spotlight"] { position: relative; } .mc-spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(160px circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.18), transparent 70%); } [data-mc-mouse="spotlight"]:hover .mc-spot { opacity: 1; } [data-mc-mouse="shine"] { position: relative; overflow: hidden; } .mc-shine { position: absolute; top: 0; bottom: 0; width: 40%; pointer-events: none; left: var(--gx,-50%); transform: translateX(-50%) skewX(-18deg); background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); opacity: 0; transition: opacity .3s; } [data-mc-mouse="shine"]:hover .mc-shine { opacity: 1; } /* ============================================================ CUSTOM CURSOR ============================================================ */ .mc-has-cursor, .mc-has-cursor * { cursor: none !important; } .mc-cur { position: fixed; top: 0; left: 0; z-index: 1000000; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); } .mc-cur-dot { width: 8px; height: 8px; background: var(--mc-cursor, #FFB704); transition: width .2s, height .2s, background .2s; } .mc-cur-ring { width: 38px; height: 38px; border: 2px solid var(--mc-cursor, #FFB704); transition: width .25s, height .25s, border-color .25s, transform .12s ease-out; } .mc-cur-blend { mix-blend-mode: difference; } .mc-cur-blend.mc-cur-dot { background: #fff; } .mc-cur-blend.mc-cur-ring { border-color: #fff; } /* hover states (toggled by JS via .mc-cur-hot) */ .mc-cur-hot.mc-cur-grow.mc-cur-ring { width: 60px; height: 60px; } .mc-cur-hot.mc-cur-grow.mc-cur-dot { width: 14px; height: 14px; } .mc-cur-hot.mc-cur-shrink.mc-cur-ring{ width: 10px; height: 10px; } .mc-cur-hot.mc-cur-blob { filter: blur(1px); } /* ============================================================ SCROLL-TO-TOP BUTTON ============================================================ */ .mc-stt { position: fixed; bottom: 28px; z-index: 99998; width: 52px; height: 52px; border: none; cursor: pointer; border-radius: 50%; background: var(--mc-stt-bg, #FFB704); color: var(--mc-stt-fg, #000); display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; box-shadow: 0 10px 30px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(20px) scale(.8); transition: opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1), visibility .35s; } .mc-stt-right { right: 28px; } .mc-stt-left { left: 28px; } .mc-stt.mc-stt-show { opacity: 1; visibility: visible; transform: none; } .mc-stt:hover { transform: translateY(-3px) scale(1.06); } .mc-stt:focus-visible { outline: 3px solid var(--mc-stt-bg, #FFB704); outline-offset: 3px; } .mc-stt-ico { transition: transform .3s ease; } /* arrow */ .mc-stt-arrow:hover .mc-stt-ico { transform: translateY(-3px); } /* rocket – blasts up on click */ .mc-stt-rocket.mc-stt-launch .mc-stt-ico { animation: mcLaunch .6s ease forwards; } @keyframes mcLaunch { to { transform: translateY(-70px) scale(.6); opacity: 0; } } /* pill with label */ .mc-stt-pill { width: auto; height: 46px; border-radius: 30px; padding: 0 20px; gap: 8px; font-weight: 700; font-size: 13px; } .mc-stt-pill .mc-stt-label { letter-spacing: .5px; } /* bouncy bubble */ .mc-stt-bubble.mc-stt-show { animation: mcBubble 2.2s ease-in-out infinite; } @keyframes mcBubble { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } .mc-stt-bubble:hover { animation: none; } /* progress ring */ .mc-stt-ring { width: 56px; height: 56px; background: transparent; box-shadow: none; } .mc-stt-ring .mc-stt-ico { position: absolute; } .mc-stt-ring svg.mc-stt-ring { position: absolute; inset: 0; transform: rotate(-90deg); width: 56px; height: 56px; } .mc-stt-ring .mc-stt-track { fill: rgba(0,0,0,.15); stroke: rgba(0,0,0,.12); stroke-width: 3; } .mc-stt-ring .mc-stt-prog { fill: var(--mc-stt-bg, #FFB704); stroke: var(--mc-stt-bg, #FFB704); stroke-width: 3; stroke-dasharray: 132; stroke-dashoffset: 132; transition: stroke-dashoffset .15s linear; } .mc-stt-ring .mc-stt-ico { color: var(--mc-stt-fg, #000); } /* reduced motion: still works, just no flourish */ .mc-reduced .mc-stt, .mc-reduced .mc-stt * { animation: none !important; transition: opacity .2s !important; }