/* ═══════════════════════════════════════════════════════════════════════════ ArabyBot · Motion Layer Layered above site.css + premium.css — additive only. Focus: animations, life, craftsmanship, mobile polish. ═══════════════════════════════════════════════════════════════════════════ */ @property --mx { syntax: ''; initial-value: 50%; inherits: true; } @property --my { syntax: ''; initial-value: 50%; inherits: true; } @property --mo-rot { syntax: ''; initial-value: 0deg; inherits: false; } :root { --mo-spring: cubic-bezier(.34, 1.56, .64, 1); --mo-out: cubic-bezier(.16, 1, .3, 1); } /* ─── HARD OVERFLOW GUARD ─────────────────────────────────────────────── IMPORTANT: do NOT set overflow on or — that would convert them into scroll containers, breaking position:sticky on .ab-nav and position:fixed on .abp-tabbar / .ab-drawer. Instead, contain overflow inside sections/hero only. */ @media (max-width: 980px) { .ab-hero, .ab-hero-inner, .ab-hero-visual, .ab-section, .ab-container, .ab-container-sm, .ab-pricing-grid, .ab-stats-row, .ab-cta-band, .ab-footer-grid, .ab-footer-inner { max-width: 100%; box-sizing: border-box; } /* Clip overflow inside specific sections (not on html/body) */ .ab-hero, .ab-section, .ab-footer { overflow-x: clip; } } /* ═══════════════════════════════════════════════════════════════════════════ PRE-LOADER — intro curtain (1.1s) ═══════════════════════════════════════════════════════════════════════════ */ .mo-preload { position: fixed; inset: 0; z-index: 9999; background: var(--ab-bg-0); display: flex; align-items: center; justify-content: center; pointer-events: none; transition: clip-path .9s var(--mo-out) .4s, opacity .4s ease 1.3s; clip-path: inset(0 0 0 0); } .mo-preload.is-out { clip-path: inset(0 0 100% 0); opacity: 0; } .mo-preload-mark { display: flex; flex-direction: column; align-items: center; gap: 18px; opacity: 0; animation: moPreFade .5s ease .15s forwards, moPreOut .35s ease .8s forwards; } @keyframes moPreFade { to { opacity: 1; } } @keyframes moPreOut { to { opacity: 0; transform: scale(.94); } } .mo-preload-logo { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--ab-mesh-1), var(--ab-mesh-3)); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 28px; font-weight: 900; position: relative; box-shadow: 0 0 60px color-mix(in srgb, var(--ab-mesh-1) 55%, transparent); } .mo-preload-logo::after { content: ''; position: absolute; inset: -4px; border-radius: 22px; border: 2px solid transparent; border-top-color: var(--ab-mesh-1); border-right-color: var(--ab-mesh-6); animation: moPreSpin .9s linear infinite; } @keyframes moPreSpin { to { transform: rotate(360deg); } } .mo-preload-text { font-family: "Geist Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ab-subtext); font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════════ MOUSE-REACTIVE AURORA Body sets --mx / --my via JS — aurora blobs follow. ═══════════════════════════════════════════════════════════════════════════ */ @media (pointer: fine) and (min-width: 980px) { .ab-aurora { transition: transform .8s var(--mo-out); transform: translate3d(calc((var(--mx, 50%) - 50%) * 0.08), calc((var(--my, 50%) - 50%) * 0.08), 0); } .ab-au-1 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) * 0.20), calc((var(--my, 50%) - 50%) * 0.10)); } .ab-au-2 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) * -0.15), calc((var(--my, 50%) - 50%) * 0.20)); } .ab-au-3 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) * 0.10), calc((var(--my, 50%) - 50%) * -0.18)); } .ab-au-4 { transition: transform 1.2s var(--mo-out); transform: translate(calc((var(--mx, 50%) - 50%) * -0.22), calc((var(--my, 50%) - 50%) * -0.10)); } } /* ═══════════════════════════════════════════════════════════════════════════ HERO HEADLINE — word-by-word stagger (DESKTOP ONLY) On mobile we keep original site.css timing for fast TTI. ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 981px) { .ab-hero h1 .mo-w { display: inline-block; opacity: 0; transform: translateY(20px); animation: moWordIn .7s var(--mo-out) forwards; } @keyframes moWordIn { to { opacity: 1; transform: translateY(0); } } .ab-hero h1 .mo-w { animation-delay: calc(.3s + var(--i, 0) * 60ms); } /* Hero sub/cta/trust gentle delays (only desktop) */ .ab-hero-sub { animation-delay: .9s !important; } .ab-hero-cta { animation-delay: 1.0s !important; } .ab-hero-trust{ animation-delay: 1.1s !important; } .ab-hero-tag { animation-delay: .2s !important; } } /* On mobile: cancel any word-stagger styles, show immediately */ @media (max-width: 980px) { .ab-hero h1 .mo-w { display: inline; opacity: 1 !important; transform: none !important; animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ CONNECTION LINES — between floating badges and mock dashboard ═══════════════════════════════════════════════════════════════════════════ */ .mo-lines { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .mo-lines svg { width: 100%; height: 100%; overflow: visible; } .mo-line-path { fill: none; stroke: url(#moLineGrad); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 6; opacity: 0; animation: moLineIn .6s ease forwards, moLineDash 18s linear infinite; } .mo-line-path:nth-child(1){ animation-delay: 2.5s, 0s; } .mo-line-path:nth-child(2){ animation-delay: 2.7s, 0s; } .mo-line-path:nth-child(3){ animation-delay: 2.9s, 0s; } .mo-line-path:nth-child(4){ animation-delay: 3.1s, 0s; } @keyframes moLineIn { to { opacity: .35; } } @keyframes moLineDash { to { stroke-dashoffset: -200; } } .mo-line-end { fill: var(--ab-mesh-1); opacity: 0; animation: moLineIn .6s ease forwards; filter: drop-shadow(0 0 6px var(--ab-mesh-1)); } .mo-line-end:nth-child(5){ animation-delay: 2.7s; } .mo-line-end:nth-child(6){ animation-delay: 2.9s; } .mo-line-end:nth-child(7){ animation-delay: 3.1s; } .mo-line-end:nth-child(8){ animation-delay: 3.3s; } @media (max-width: 980px) { .mo-lines { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ LIVE NOTIFICATION TOASTS on Mock Dashboard ═══════════════════════════════════════════════════════════════════════════ */ .mo-toast-rail { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: 240px; } .mo-toast { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--ab-card-solid); border: 1px solid var(--ab-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--ab-mesh-1) 8%, transparent); font-size: 11.5px; color: var(--ab-text); backdrop-filter: blur(12px); position: relative; overflow: hidden; opacity: 0; transform: translateX(20px); transition: opacity .45s var(--mo-out), transform .45s var(--mo-out); } [dir="rtl"] .mo-toast { transform: translateX(-20px); } .mo-toast.is-in { opacity: 1; transform: translateX(0); } .mo-toast::after { /* progress bar at bottom */ content: ''; position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--ab-mesh-1), var(--ab-mesh-6)); transform-origin: left; transform: scaleX(0); animation: moToastBar 4s linear forwards; } [dir="rtl"] .mo-toast::after { transform-origin: right; } @keyframes moToastBar { to { transform: scaleX(1); } } .mo-toast-ico { width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, var(--c, var(--ab-mesh-1)) 18%, transparent); color: var(--c, var(--ab-mesh-1)); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; } .mo-toast b { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.2; } .mo-toast span { display: block; font-size: 10px; color: var(--ab-subtext); margin-top: 2px; } .mo-toast-amount { margin-inline-start: auto; font-family: "Geist Mono", monospace; font-size: 11px; font-weight: 800; color: var(--ab-mesh-4); white-space: nowrap; } /* On mobile: hide toasts entirely — they clutter the small mock */ @media (max-width: 760px) { .mo-toast-rail { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ NUMBER FLIP BOARD (split-flap style) for stats ═══════════════════════════════════════════════════════════════════════════ */ .mo-flip { display: inline-flex; gap: 2px; } .mo-flip-digit { position: relative; width: 1ch; height: 1.1em; overflow: hidden; display: inline-block; font-variant-numeric: tabular-nums; } .mo-flip-digit > span { display: block; height: 1.1em; text-align: center; transition: transform .55s var(--mo-spring); } .mo-flip-digit > span > i { display: block; height: 1.1em; line-height: 1.1em; font-style: normal; } /* Brief flash on digit change */ .mo-flip-digit.is-changing { animation: moFlipFlash .3s ease; } @keyframes moFlipFlash { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } } /* ═══════════════════════════════════════════════════════════════════════════ CARD SPOTLIGHT — radial light follows mouse inside cards ═══════════════════════════════════════════════════════════════════════════ */ @media (pointer: fine) and (min-width: 980px) { .ab-feat-card, .ab-price-card, .ab-test, .ab-step, .ab-uc { position: relative; } .ab-feat-card::before, .ab-price-card::before, .ab-step::before, .ab-uc::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 280px circle at var(--mo-cx, 50%) var(--mo-cy, 50%), color-mix(in srgb, var(--c, var(--ab-mesh-1)) 14%, transparent) 0%, transparent 60% ); opacity: 0; transition: opacity .35s ease; pointer-events: none; z-index: 0; } .ab-feat-card > *, .ab-price-card > *, .ab-step > *, .ab-uc > * { position: relative; z-index: 1; } .ab-feat-card:hover::before, .ab-price-card:hover::before, .ab-step:hover::before, .ab-uc:hover::before { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ LIVE PULSE on data — small dot pulses next to changing numbers ═══════════════════════════════════════════════════════════════════════════ */ .mo-livedot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; margin-inline-end: 8px; vertical-align: middle; position: relative; box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: moLiveDot 1.8s ease-out infinite; } @keyframes moLiveDot { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.7); } 70% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } /* ═══════════════════════════════════════════════════════════════════════════ STAT NUMBERS — flicker glow when updating ═══════════════════════════════════════════════════════════════════════════ */ .ab-stat-cell b { position: relative; transition: filter .25s ease; } .ab-stat-cell b.is-pulse { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ab-mesh-1) 70%, transparent)); } /* ═══════════════════════════════════════════════════════════════════════════ FLOATING BADGES — premium polish (desktop only; mobile hides them anyway) ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 981px) { .ab-float-badge { opacity: 0; transform: translateY(20px) scale(.9); animation: moBadgeIn .7s var(--mo-spring) forwards; } .ab-fb-1 { animation-delay: 1.2s; } .ab-fb-2 { animation-delay: 1.35s; } .ab-fb-3 { animation-delay: 1.5s; } .ab-fb-4 { animation-delay: 1.65s; } @keyframes moBadgeIn { to { opacity: 1; transform: translateY(0) scale(1); } } .ab-float-badge::after { /* live pulse dot */ content: ''; position: absolute; top: 6px; inset-inline-end: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--ab-mesh-4); box-shadow: 0 0 0 0 rgba(34,197,94,.6); animation: moLiveDot 2s ease-out infinite; } } /* ═══════════════════════════════════════════════════════════════════════════ MOCK CHART — moving live "now" dot + indicator label ═══════════════════════════════════════════════════════════════════════════ */ .abp-chart-dot { animation: abpChartDot .5s ease-out 3s forwards, moChartDotPulse 1.6s ease-in-out 3.5s infinite, moChartDotRoam 8s ease-in-out 4s infinite; transform-origin: center; transform-box: fill-box; } @keyframes moChartDotPulse { 50% { r: 5.5; } } @keyframes moChartDotRoam { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-30px, 6px); } 50% { transform: translate(-60px, -4px); } 75% { transform: translate(-20px, 8px); } } /* ═══════════════════════════════════════════════════════════════════════════ Sticky-CTA + Live-pill: DISABLED. They conflict with the mobile tab bar + nav. Removed deliberately. ═══════════════════════════════════════════════════════════════════════════ */ .mo-sticky-cta, .mo-live-pill { display: none !important; } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE HAPTIC RIPPLE — tap creates a fading ring ═══════════════════════════════════════════════════════════════════════════ */ .mo-ripple { position: absolute; pointer-events: none; border-radius: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: color-mix(in srgb, var(--ab-mesh-1) 35%, transparent); transform: scale(0); animation: moRipple .6s var(--mo-out) forwards; z-index: 999; } @keyframes moRipple { to { transform: scale(20); opacity: 0; } } /* ═══════════════════════════════════════════════════════════════════════════ SECTION TRANSITIONS — desktop only, mobile keeps clean fast scroll ═══════════════════════════════════════════════════════════════════════════ */ @media (min-width: 981px) { .mo-section-enter { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--mo-out), transform .9s var(--mo-out); } .mo-section-enter.is-in { opacity: 1; transform: translateY(0); } } /* On mobile: no section enter animation at all */ @media (max-width: 980px) { .mo-section-enter { opacity: 1 !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE SCROLLER — snap dot indicator below horizontal feature scroller (Removed the buggy ::before/::after edge gradient that broke layout) ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { .mo-snap-dots { display: flex; gap: 6px; justify-content: center; margin-top: 18px; } .mo-snap-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ab-border-s); transition: width .3s var(--mo-spring), background .3s; } .mo-snap-dot.is-active { width: 22px; background: var(--ab-mesh-1); } } @media (min-width: 641px) { .mo-snap-dots { display: none; } } /* ═══════════════════════════════════════════════════════════════════════════ MOBILE NAV — premium scroll-shrink ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 980px) { .ab-nav { transition: padding .3s var(--mo-out), background .3s, border-color .3s; } .ab-nav.is-scrolled { padding: 8px 0; background: color-mix(in srgb, var(--ab-card-solid) 92%, transparent); border-bottom: 1px solid var(--ab-border); } .ab-nav.is-scrolled .ab-brand-logo { height: 24px; transition: height .3s; } } /* Mobile hero mock: gentle simple fade-up */ @media (max-width: 760px) { .ab-hero-mock { animation: moHeroMockSimple .8s var(--mo-out) .15s both; } @keyframes moHeroMockSimple { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Disable orbit ring + halo on mobile (caused overflow) */ .ab-hero-visual::after { display: none !important; } .ab-hero-visual::before { display: none !important; } .ab-hero::before { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ STARS — bigger, slower, more cinematic ═══════════════════════════════════════════════════════════════════════════ */ .ab-stars span { animation-duration: 6s !important; } /* ═══════════════════════════════════════════════════════════════════════════ SECTION HEADERS — gradient underline draw on view ═══════════════════════════════════════════════════════════════════════════ */ .ab-section-head .ab-h2 { position: relative; display: inline-block; } .ab-section-head .ab-h2::after { content: ''; position: absolute; bottom: -8px; left: 50%; width: 0; height: 3px; background: linear-gradient(90deg, var(--ab-mesh-1), var(--ab-mesh-6)); border-radius: 3px; transform: translateX(-50%); transition: width .8s var(--mo-out); } .ab-section-head.is-in .ab-h2::after { width: 56px; } /* ═══════════════════════════════════════════════════════════════════════════ CTA BAND — animated highlight orbit ═══════════════════════════════════════════════════════════════════════════ */ .ab-cta-band { isolation: isolate; } .ab-cta-band::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from var(--mo-rot, 0deg), transparent 0deg, rgba(255,255,255,.3) 60deg, transparent 120deg, rgba(255,255,255,.15) 200deg, transparent 280deg); pointer-events: none; mix-blend-mode: overlay; animation: moCtaOrbit 12s linear infinite; z-index: 0; } @keyframes moCtaOrbit { to { --mo-rot: 360deg; } } .ab-cta-band > * { position: relative; z-index: 1; } /* ═══════════════════════════════════════════════════════════════════════════ ANCHOR LINK HOVER — underline draw left-to-right ═══════════════════════════════════════════════════════════════════════════ */ .ab-footer-col a, .ab-faq-body a { position: relative; } .ab-footer-col a::after, .ab-faq-body a::after { content: ''; position: absolute; bottom: -2px; inset-inline-start: 0; width: 0; height: 1.5px; background: var(--ab-mesh-1); transition: width .4s var(--mo-out); } .ab-footer-col a:hover::after, .ab-faq-body a:hover::after { width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ REDUCED-MOTION RESPECT ═══════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { .mo-preload, .mo-toast, .mo-toast::after, .mo-line-path, .mo-line-end, .ab-hero h1 .mo-w, .ab-float-badge, .abp-chart-dot, .ab-cta-band::after { animation: none !important; } .mo-preload { display: none; } .ab-hero h1 .mo-w { opacity: 1; transform: none; } .ab-float-badge { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME refinements ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] .mo-toast, :root[data-abl-theme="light"] .mo-toast { box-shadow: 0 12px 32px rgba(15,23,42,.12), 0 0 0 1px var(--ab-border); } :root[data-theme="light"] .mo-preload, :root[data-abl-theme="light"] .mo-preload { background: #ffffff; }