/* Motion and color layer for MarketRitual (landing page and app).
   Visual language after luxalgo.com: drifting aurora, grid with a sweeping light ray, spinning gradient rings,
   gradient outline pills, reveal on scroll, sheen text, logo marquee. Only transform/opacity are animated.
   Everything stops for "prefers-reduced-motion". */
:root{
  --c-sky:#35A2DE; --c-cobalt:#3746CC; --c-purple:#9200FF; --c-pink:#FF00D6; --c-orange:#FF8A00; --c-teal:#1FA38A;
  --grad-brand:linear-gradient(90deg,var(--c-sky),var(--c-cobalt) 30%,var(--c-purple) 55%,var(--c-pink) 78%,var(--c-orange));
  /* Same colors, ending again in sky: tiles without a seam for moving gradient text */
  --grad-loop:linear-gradient(90deg,var(--c-sky),var(--c-cobalt) 20%,var(--c-purple) 40%,var(--c-pink) 60%,var(--c-orange) 80%,var(--c-sky));
  --aurora-o:.55; --grid-o:.5;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){ --aurora-o:.28; --grid-o:.35; } }
:root[data-theme="light"]{ --aurora-o:.28; --grid-o:.35; }

/* ---------- Moving background ---------- */
.bg-motion{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg)}
.bg-motion .blob{position:absolute;border-radius:50%;opacity:var(--aurora-o);will-change:transform}
.bg-motion .b1{width:70vmax;height:70vmax;left:-20vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(55,70,204,.55),transparent 70%);animation:drift-a 26s ease-in-out infinite alternate}
.bg-motion .b2{width:60vmax;height:60vmax;right:-25vmax;top:-10vmax;background:radial-gradient(closest-side,rgba(146,0,255,.38),transparent 70%);animation:drift-b 32s ease-in-out infinite alternate}
.bg-motion .b3{width:55vmax;height:55vmax;left:20vw;bottom:-35vmax;background:radial-gradient(closest-side,rgba(53,162,222,.32),transparent 70%);animation:drift-c 29s ease-in-out infinite alternate}
.bg-motion .b4{width:40vmax;height:40vmax;right:5vw;bottom:-20vmax;background:radial-gradient(closest-side,rgba(255,0,214,.16),transparent 70%);animation:drift-a 36s ease-in-out infinite alternate-reverse}
.bg-motion .grid{position:absolute;inset:-2px;opacity:var(--grid-o);
  background-image:linear-gradient(color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--fg) 7%,transparent) 1px,transparent 1px);
  background-size:72px 72px;mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%)}
.bg-motion .ray{position:absolute;top:0;bottom:0;width:30vw;opacity:var(--grid-o);
  background:linear-gradient(90deg,transparent,rgba(53,162,222,.10) 35%,rgba(146,0,255,.12) 55%,transparent);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 30%,transparent 75%);
  animation:grid-ray 11s cubic-bezier(.45,0,.25,1) infinite;will-change:transform}
@keyframes drift-a{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8vw,6vh) scale(1.12)}}
@keyframes drift-b{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-10vw,8vh) scale(.95)}}
@keyframes drift-c{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6vw,-8vh) scale(1.1)}}
@keyframes grid-ray{0%{transform:translateX(-45vw)}100%{transform:translateX(115vw)}}

/* ---------- Spinning gradient ring (border) ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.gring{position:relative;isolation:isolate;border-color:transparent !important}
.gring::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--ang),var(--line-2) 0deg,var(--line-2) 40deg,var(--c-sky) 78deg,var(--c-cobalt) 104deg,var(--c-purple) 128deg,var(--c-pink) 150deg,var(--c-orange) 172deg,var(--line-2) 210deg,var(--line-2) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ring-spin 7s linear infinite}
.gring.slow::after{animation-duration:12s}
@keyframes ring-spin{to{--ang:360deg}}
/* Static brand border, like a featured pricing card */
.gring-static{position:relative;isolation:isolate;border-color:transparent !important}
.gring-static::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,var(--c-purple),var(--c-cobalt) 28%,var(--line-2) 50%,var(--line-2) 72%,var(--c-orange));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* Soft colored glow below an element */
.glow-under{position:relative}
.glow-under::before{content:"";position:absolute;left:8%;right:8%;bottom:-18px;height:60px;border-radius:50%;z-index:-1;filter:blur(36px);opacity:.55;
  background:linear-gradient(90deg,var(--c-sky),var(--c-purple),var(--c-pink));animation:breathe 6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.65}}

/* ---------- Gradient outline pills (like "4× Premium") ---------- */
.gpill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font:600 12.5px/1.4 var(--f-ui);white-space:nowrap;color:var(--fg);
  border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gp) border-box}
.gpill.blue{--gp:linear-gradient(90deg,var(--c-sky),var(--c-cobalt))}
.gpill.violet{--gp:linear-gradient(90deg,var(--c-cobalt),var(--c-purple),var(--c-pink))}
.gpill.pink{--gp:linear-gradient(90deg,var(--c-pink),var(--c-orange));color:color-mix(in srgb,var(--c-pink) 70%,var(--fg))}
.gpill.teal{--gp:linear-gradient(90deg,var(--c-sky),var(--c-teal));background:linear-gradient(color-mix(in srgb,var(--c-sky) 12%,var(--surface)),color-mix(in srgb,var(--c-sky) 12%,var(--surface))) padding-box,var(--gp) border-box;color:color-mix(in srgb,var(--c-sky) 75%,var(--fg))}

/* ---------- Text ---------- */
.grad-text{background:var(--grad-loop);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 12s linear infinite}
@keyframes sheen{to{background-position:200% 0}}
.btn.primary.shine{position:relative;overflow:hidden}
.btn.primary.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);background-size:250% 100%;animation:btn-sheen 4.5s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}
@keyframes btn-sheen{0%,60%{background-position:150% 0}100%{background-position:-60% 0}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);filter:blur(8px)}
.reveal.in{animation:reveal-in .8s cubic-bezier(.16,1,.3,1) var(--d,0s) both}
@keyframes reveal-in{0%{opacity:0;filter:blur(8px);transform:translateY(16px)}100%{opacity:1;filter:blur(0);transform:none}}

/* ---------- Floating, marquee, hover ---------- */
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.lift{transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s}
.lift:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c-purple) 45%,var(--line-2));box-shadow:0 18px 50px -20px color-mix(in srgb,var(--c-purple) 55%,transparent)}
.page.on{animation:page-in .45s cubic-bezier(.16,1,.3,1) both}
@keyframes page-in{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .bg-motion *,.gring::after,.grad-text,.btn.primary.shine::after,.float,.marquee-track,.glow-under::before,.page.on{animation:none !important}
  .reveal{opacity:1;transform:none;filter:none}
  .reveal.in{animation:none}
}
@media print{ .bg-motion{display:none} }