/* ============================================================
FLEXYPRO AI — motion layer (cinematic enhancements)
Pairs with /static/js/motion.js?v=1
Vanilla CSS, transform/opacity only, 60fps target.
============================================================ */
/* ------------------------------------------------------------
1. PARALLAX (hero__visual) — JS sets --motion-parallax-y
------------------------------------------------------------ */
.motion-parallax {
will-change: transform;
transform: translate3d(0, var(--motion-parallax-y, 0px), 0);
transition: transform 0.08s linear;
}
@media (max-width: 880px) {
.motion-parallax { transform: none !important; will-change: auto; }
}
/* ------------------------------------------------------------
2. MAGNETIC CURSOR (CTA buttons)
------------------------------------------------------------ */
.motion-magnetic {
transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.5s, border-color 0.35s, color 0.35s, background 0.35s;
will-change: transform;
}
@media (hover: none), (pointer: coarse) {
.motion-magnetic { transform: none !important; }
}
/* ------------------------------------------------------------
3. SCROLL-REVEAL with stagger
The existing .reveal rule in landing.html stays.
This adds child-stagger + new selectors.
------------------------------------------------------------ */
.m-reveal {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity 0.9s cubic-bezier(.22,1,.36,1),
transform 0.9s cubic-bezier(.22,1,.36,1);
will-change: opacity, transform;
}
.m-reveal.m-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Stagger: children inside an m-reveal-group fade-in one after another */
.m-reveal-group > .m-stagger {
opacity: 0;
transform: translate3d(0, 20px, 0);
transition: opacity 0.85s cubic-bezier(.22,1,.36,1),
transform 0.85s cubic-bezier(.22,1,.36,1);
transition-delay: calc(var(--m-stagger-i, 0) * 60ms);
will-change: opacity, transform;
}
.m-reveal-group.m-in > .m-stagger { opacity: 1; transform: translate3d(0, 0, 0); }
/* ------------------------------------------------------------
4. GLOW-CURSOR — radial gradient follows the mouse over landing
JS toggles .motion-glow-active on .motion-glow on enter/leave
------------------------------------------------------------ */
.motion-glow {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
background:
radial-gradient(800px circle at var(--mx, 50%) var(--my, 30%),
rgba(253, 97, 67, 0.08) 0%,
rgba(253, 97, 67, 0.04) 30%,
transparent 60%);
mix-blend-mode: screen;
}
.motion-glow.motion-glow-active { opacity: 1; }
@media (max-width: 880px), (hover: none), (pointer: coarse) {
.motion-glow { display: none !important; }
}
/* Ensure topbar / sections stay above the glow */
body > .topbar,
body > section,
body > main,
body > footer,
body > header { position: relative; z-index: 1; }
/* ------------------------------------------------------------
5. MARQUEE — speed-up on hover (only desktop)
------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) {
.marquee .marquee__track { transition: animation-duration 0.6s ease; }
.marquee:hover .marquee__track { animation-duration: 22s; }
}
/* ------------------------------------------------------------
6. CASE / CASE-MINI — 3D depth on hover
------------------------------------------------------------ */
@media (hover: hover) and (pointer: fine) and (min-width: 881px) {
.case, .case-mini {
transition: transform 0.6s cubic-bezier(.22,1,.36,1),
box-shadow 0.6s cubic-bezier(.22,1,.36,1);
transform-style: preserve-3d;
perspective: 1200px;
}
.case:hover {
transform: perspective(1200px) rotateY(1.2deg) translateZ(0);
box-shadow:
0 30px 80px -28px rgba(253, 97, 67, 0.28),
0 12px 32px -10px rgba(0, 0, 0, 0.6);
}
.case-mini {
transition: transform 0.45s cubic-bezier(.22,1,.36,1),
box-shadow 0.45s cubic-bezier(.22,1,.36,1),
background 0.3s;
}
.case-mini:hover {
transform: perspective(1000px) rotateY(1.5deg) translateY(-2px) translateZ(0);
box-shadow:
0 20px 50px -20px rgba(253, 97, 67, 0.32),
0 8px 24px -8px rgba(0, 0, 0, 0.55);
}
}
/* ------------------------------------------------------------
8. SECTION DIVIDERS — animated 1px line that grows from center
Injected by motion.js as
------------------------------------------------------------ */
.motion-divider {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
pointer-events: none;
}
.motion-divider > span {
display: block;
height: 1px;
width: 0%;
background: linear-gradient(90deg,
rgba(253, 97, 67, 0) 0%,
rgba(253, 97, 67, 0.65) 50%,
rgba(253, 97, 67, 0) 100%);
transition: width 1.2s cubic-bezier(.22,1,.36,1);
will-change: width;
}
.motion-divider.m-in > span { width: 88%; }
@media (max-width: 880px) {
.motion-divider.m-in > span { width: 78%; }
}
/* ------------------------------------------------------------
9. CHAT FAB — pulse-attention every 12s if untouched
------------------------------------------------------------ */
@keyframes m-fab-bounce {
0%, 100% { transform: scale(1); }
35% { transform: scale(1.08); }
60% { transform: scale(0.98); }
80% { transform: scale(1.03); }
}
.chat-fab.motion-bounce { animation: m-fab-bounce 0.9s cubic-bezier(.22,1,.36,1); }
/* ------------------------------------------------------------
10. HERO TEXT — staggered word-reveal
Each word gets wrapped in .m-word by JS.
------------------------------------------------------------ */
.m-word {
display: inline-block;
opacity: 0;
transform: translate3d(0, 12px, 0);
transition: opacity 0.8s cubic-bezier(.22,1,.36,1),
transform 0.8s cubic-bezier(.22,1,.36,1);
transition-delay: calc(var(--m-word-i, 0) * 80ms);
will-change: opacity, transform;
}
.m-word.m-in {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* Preserve color inside word reveal */
.m-word em { color: inherit; font-style: normal; }
/* ------------------------------------------------------------
REDUCED MOTION — disable EVERYTHING animation-y
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.motion-parallax,
.motion-magnetic,
.m-reveal,
.m-reveal-group > .m-stagger,
.m-word,
.motion-divider > span {
transform: none !important;
opacity: 1 !important;
transition: none !important;
animation: none !important;
}
.motion-glow { display: none !important; }
.chat-fab.motion-bounce { animation: none !important; }
.marquee:hover .marquee__track { animation-duration: 38s !important; }
.case:hover, .case-mini:hover { transform: none !important; }
.motion-divider.m-in > span { width: 88%; transition: none !important; }
}
/* ------------------------------------------------------------
MOBILE — disable heavy effects below 768px
------------------------------------------------------------ */
@media (max-width: 768px) {
.motion-parallax { transform: none !important; }
.motion-magnetic { transform: none !important; }
.motion-glow { display: none !important; }
.case:hover, .case-mini:hover { transform: none !important; box-shadow: none !important; }
}