/* MyOneClick marketing pages — shared color & motion layer (homepage, lp1, lp2, lp3).
   Loaded after each page's own styles; it only adds polish and never hides content.
   Motion switches off for visitors who ask for reduced motion. */
:root{
  --fx-a:#6366f1; --fx-b:#8b5cf6; --fx-c:#ec4899; --fx-d:#f59e0b; --fx-e:#06b6d4; --fx-f:#10b981;
  --fx-rainbow:linear-gradient(90deg,var(--fx-a),var(--fx-b),var(--fx-c),var(--fx-d),var(--fx-e),var(--fx-a));
  --fx-glow:rgba(99,102,241,.35);
  --fx-wash:.14;
}
body.fx-dark{--fx-a:#7c83ff;--fx-glow:rgba(255,170,64,.32);--fx-wash:.18;}

/* Scroll progress across the top */
.fx-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:1000;pointer-events:none;
  background:var(--fx-rainbow);background-size:200% 100%;transform-origin:0 50%;transform:scaleX(0);
  animation:fx-slide 6s linear infinite;box-shadow:0 0 10px var(--fx-glow);}
@keyframes fx-slide{to{background-position:200% 0;}}

/* Gradient headline words drift slowly through their colors */
.grad,.grad2,.hero-brand{background-size:300% 100% !important;animation:fx-drift 8s ease-in-out infinite alternate;}
@keyframes fx-drift{from{background-position:0% 50%;}to{background-position:100% 50%;}}

/* A short rainbow rule under each section title */
.section .wrap > h2::after{content:"";display:block;width:72px;height:4px;border-radius:4px;margin:.65rem auto 0;
  background:var(--fx-rainbow);background-size:200% 100%;animation:fx-slide 5s linear infinite;}

/* Soft color washes behind the plain sections (assigned in turn by fx.js) */
.fx-wash-1{background:radial-gradient(900px 420px at 0% 0%,rgba(99,102,241,var(--fx-wash)),transparent 62%),
  radial-gradient(800px 420px at 100% 100%,rgba(236,72,153,var(--fx-wash)),transparent 62%);}
.fx-wash-2{background:radial-gradient(900px 420px at 100% 0%,rgba(6,182,212,var(--fx-wash)),transparent 62%),
  radial-gradient(800px 420px at 0% 100%,rgba(16,185,129,var(--fx-wash)),transparent 62%);}
.fx-wash-3{background:radial-gradient(900px 420px at 0% 100%,rgba(245,158,11,var(--fx-wash)),transparent 62%),
  radial-gradient(800px 420px at 100% 0%,rgba(236,72,153,var(--fx-wash)),transparent 62%);}
.fx-wash-4{background:radial-gradient(900px 420px at 100% 100%,rgba(139,92,246,var(--fx-wash)),transparent 62%),
  radial-gradient(800px 420px at 0% 0%,rgba(6,182,212,var(--fx-wash)),transparent 62%);}

/* Hero: a soft light that follows the pointer */
.hero{isolation:isolate;}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(520px circle at var(--fx-x,50%) var(--fx-y,35%),rgba(139,92,246,.13),transparent 62%);transition:background .2s;}
body.fx-dark .hero::after{background:radial-gradient(520px circle at var(--fx-x,50%) var(--fx-y,35%),rgba(255,170,64,.12),transparent 62%);}

/* Feature ticker under the hero */
.fx-ticker{position:relative;overflow:hidden;padding:.75rem 0;border-top:1px solid var(--line,#e6ebf2);border-bottom:1px solid var(--line,#e6ebf2);
  background:linear-gradient(90deg,rgba(99,102,241,.07),rgba(236,72,153,.07),rgba(245,158,11,.07),rgba(6,182,212,.07));
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.fx-ticker-track{display:flex;gap:.7rem;width:max-content;animation:fx-tick 48s linear infinite;}
.fx-ticker:hover .fx-ticker-track{animation-play-state:paused;}
.fx-chip{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;font-weight:700;font-size:.9rem;color:#fff;
  border-radius:999px;padding:.38rem .9rem;box-shadow:0 6px 14px -6px rgba(15,23,42,.35);}
@keyframes fx-tick{to{transform:translateX(-50%);}}

/* Cards: lift, glow and a gentle 3-D tilt (tilt set in fx.js) */
.feat,.wn-card,.uc,.bignum,.probcard,.cat,.stat,.diff-item,.shot,.faq-item,.split{
  transition:opacity .7s ease,transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease !important;}
.feat:hover,.wn-card:hover,.uc:hover,.bignum:hover,.probcard:hover,.cat:hover,.stat:hover,.shot:hover{
  box-shadow:0 22px 44px -16px var(--fx-glow),0 0 0 1px rgba(139,92,246,.28) !important;border-color:transparent !important;}
.diff-item:hover{transform:translateX(4px);border-color:rgba(139,92,246,.45) !important;box-shadow:0 10px 24px -14px var(--fx-glow);}
.feat .ic,.wn-ic{transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.feat:hover .ic,.wn-card:hover .wn-ic{transform:translateY(-4px) rotate(-6deg) scale(1.08);}

/* Primary buttons: a light sweep every few seconds */
.btn-primary,.wn-go{position:relative;overflow:hidden;}
.btn-primary::after,.wn-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:fx-shine 4.5s ease-in-out infinite;}
@keyframes fx-shine{0%,62%{left:-60%;}100%{left:130%;}}

/* The tour video gets a colored halo */
.mvt-player{box-shadow:0 30px 70px -28px rgba(99,102,241,.55),0 0 0 1px rgba(139,92,246,.25) !important;}
body.fx-dark .mvt-player{box-shadow:0 30px 70px -28px rgba(255,140,40,.45),0 0 0 1px rgba(255,170,64,.25) !important;}

/* Top-20 table rows light up */
.pop-table tbody tr{transition:background .25s;}
.pop-table tbody tr:hover{background:linear-gradient(90deg,rgba(99,102,241,.08),rgba(236,72,153,.06));}

/* Staggered reveal for cards in a row (delay set in fx.js) */
.fx-stagger{transition-delay:var(--fx-delay,0ms) !important;}

/* Back to top */
.fx-top{position:fixed;right:18px;bottom:18px;z-index:900;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  color:#fff;font-size:1.2rem;font-weight:800;background:linear-gradient(135deg,var(--fx-a),var(--fx-c));
  box-shadow:0 12px 26px -8px var(--fx-glow);opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;transition:opacity .3s,transform .3s;}
.fx-top.on{opacity:1;transform:none;pointer-events:auto;}
.fx-top:hover{transform:translateY(-3px);}

@media (max-width:640px){
  .fx-chip{font-size:.82rem;padding:.32rem .75rem;}
  .fx-top{right:12px;bottom:12px;width:42px;height:42px;}
}
@media (prefers-reduced-motion:reduce){
  .grad,.grad2,.hero-brand,.fx-progress,.section .wrap > h2::after,.btn-primary::after,.wn-go::after{animation:none !important;}
  .fx-ticker-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;padding:0 1rem;}
  .fx-ticker-track [aria-hidden]{display:none;}
}

/* Lists get rotating color accents so long runs of items stay lively */
.diff-item,.problist li,.faq-item{--fx-k:#6366f1;border-left:4px solid var(--fx-k) !important;
  background-image:linear-gradient(90deg,color-mix(in srgb,var(--fx-k) 9%,transparent),transparent 55%) !important;}
.diff-item:nth-child(6n+2),.problist li:nth-child(6n+2),.faq-item:nth-child(6n+2){--fx-k:#ec4899;}
.diff-item:nth-child(6n+3),.problist li:nth-child(6n+3),.faq-item:nth-child(6n+3){--fx-k:#06b6d4;}
.diff-item:nth-child(6n+4),.problist li:nth-child(6n+4),.faq-item:nth-child(6n+4){--fx-k:#10b981;}
.diff-item:nth-child(6n+5),.problist li:nth-child(6n+5),.faq-item:nth-child(6n+5){--fx-k:#f59e0b;}
.diff-item:nth-child(6n+6),.problist li:nth-child(6n+6),.faq-item:nth-child(6n+6){--fx-k:#8b5cf6;}
.diff-item::before{background:var(--fx-k) !important;color:#fff !important;}
.faq-item[open]{box-shadow:0 12px 28px -18px var(--fx-glow);}