/* ============================================================ ANIMATIONS.CSS — 20 preset entrance animations. 10 basic + 10 premium (high-end / top-tier feel). Each element gets `data-tpr-anim=""`, plus `.tpr-in-view` when it enters the viewport (added by animations.js). ============================================================ */ [data-tpr-anim] { opacity: 0; will-change: transform, opacity, filter, clip-path; } [data-tpr-anim="none"] { opacity: 1; } [data-tpr-anim].tpr-in-view { opacity: 1; } /* -------- 1. BASIC (10) -------- */ [data-tpr-anim="fade-in"] { transition: opacity .7s ease; } [data-tpr-anim="fade-up"] { transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="fade-up"].tpr-in-view { transform: translateY(0); } [data-tpr-anim="fade-down"] { transform: translateY(-24px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="fade-down"].tpr-in-view { transform: translateY(0); } [data-tpr-anim="slide-left"] { transform: translateX(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="slide-left"].tpr-in-view { transform: translateX(0); } [data-tpr-anim="slide-right"] { transform: translateX(-40px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="slide-right"].tpr-in-view { transform: translateX(0); } [data-tpr-anim="slide-up"] { transform: translateY(40px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="slide-up"].tpr-in-view { transform: translateY(0); } [data-tpr-anim="slide-down"] { transform: translateY(-40px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="slide-down"].tpr-in-view { transform: translateY(0); } [data-tpr-anim="zoom-in"] { transform: scale(.85); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="zoom-in"].tpr-in-view { transform: scale(1); } [data-tpr-anim="zoom-out"] { transform: scale(1.15); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="zoom-out"].tpr-in-view { transform: scale(1); } [data-tpr-anim="bounce-in"] { transform: scale(.8); transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1); } [data-tpr-anim="bounce-in"].tpr-in-view { transform: scale(1); } /* -------- 2. PREMIUM / HIGH-END (10) -------- */ /* Blur-in — Apple / Linear style */ [data-tpr-anim="blur-in"] { filter: blur(14px); transform: translateY(12px); transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="blur-in"].tpr-in-view { filter: blur(0); transform: translateY(0); } /* Clip reveal — text unmasked from the bottom */ [data-tpr-anim="clip-reveal"] { clip-path: inset(0 0 100% 0); transform: translateY(20px); transition: clip-path 1s cubic-bezier(.77,0,.175,1), transform 1s cubic-bezier(.77,0,.175,1), opacity .3s ease; } [data-tpr-anim="clip-reveal"].tpr-in-view { clip-path: inset(0 0 0 0); transform: translateY(0); } /* Gradient sweep — animated conic sheen behind element */ @keyframes tprSheen { 0% { background-position: -150% 0; } 100% { background-position: 250% 0; } } [data-tpr-anim="gradient-sweep"] { position: relative; overflow: hidden; transition: opacity .5s ease; } [data-tpr-anim="gradient-sweep"].tpr-in-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%, transparent 100%); background-size: 250% 100%; animation: tprSheen 2.2s ease-in-out infinite; } /* Letter cascade — each character fades up in sequence. editor-bridge.js and cms-loader.js split textContent into tokens when this animation is set. */ @keyframes tprLetterUp { from { opacity: 0; transform: translateY(0.8em); } to { opacity: 1; transform: translateY(0); } } [data-tpr-anim="letter-cascade"] { opacity: 1; } [data-tpr-anim="letter-cascade"] .tpr-letter { display: inline-block; opacity: 0; transform: translateY(0.8em); } [data-tpr-anim="letter-cascade"].tpr-in-view .tpr-letter { animation: tprLetterUp .7s cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(var(--i, 0) * 30ms); } /* Split reveal — two halves slide open like a curtain (uses ::before) */ [data-tpr-anim="split-reveal"] { position: relative; overflow: hidden; transition: opacity .4s ease; } [data-tpr-anim="split-reveal"]::before, [data-tpr-anim="split-reveal"]::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; background: currentColor; opacity: .12; transition: transform 1s cubic-bezier(.77,0,.175,1); pointer-events: none; } [data-tpr-anim="split-reveal"]::before { left: 0; } [data-tpr-anim="split-reveal"]::after { right: 0; } [data-tpr-anim="split-reveal"].tpr-in-view::before { transform: translateX(-101%); } [data-tpr-anim="split-reveal"].tpr-in-view::after { transform: translateX(101%); } /* Tilt-in — 3D perspective drop */ [data-tpr-anim="tilt-in"] { transform: perspective(900px) rotateX(20deg) translateY(20px); transform-origin: 50% 100%; transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="tilt-in"].tpr-in-view { transform: perspective(900px) rotateX(0) translateY(0); } /* Skew-in — editorial magazine feel */ [data-tpr-anim="skew-in"] { transform: translateX(-30px) skewX(-8deg); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); } [data-tpr-anim="skew-in"].tpr-in-view { transform: translateX(0) skewX(0); } /* Elastic — spring settle, luxury product feel */ [data-tpr-anim="elastic"] { transform: scale(.4) rotate(-6deg); transition: opacity .3s ease, transform .95s cubic-bezier(.5,1.7,.4,1); } [data-tpr-anim="elastic"].tpr-in-view { transform: scale(1) rotate(0); } /* Breathe — subtle looping scale, used by Apple product tiles */ @keyframes tprBreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } } [data-tpr-anim="breathe"] { transition: opacity .5s ease; } [data-tpr-anim="breathe"].tpr-in-view { animation: tprBreathe 4.5s ease-in-out infinite; } /* Shimmer border — animated gradient outline, Vercel/Stripe style */ @keyframes tprShimmerBorder { 0% { background-position: 0 0; } 100% { background-position: 300% 0; } } [data-tpr-anim="shimmer-border"] { position: relative; transition: opacity .4s ease; } [data-tpr-anim="shimmer-border"].tpr-in-view { background-image: linear-gradient(var(--tpr-shimmer-bg, #fff), var(--tpr-shimmer-bg, #fff)), linear-gradient(115deg, #00e5ff, #6a5cff, #ff5cf1, #00e5ff); background-origin: border-box; background-clip: padding-box, border-box; background-size: auto, 300% 100%; border: 2px solid transparent; border-radius: 12px; animation: tprShimmerBorder 4s linear infinite; } /* -------- Editor helpers -------- */ /* When admin hovers the animation name in the sidebar, we add `.tpr-preview-anim` to force a replay regardless of scroll state. */ [data-tpr-anim].tpr-preview-anim { animation-play-state: running; }