/* ============================================================ 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; }