/* NanoFlow /beta: ambient motion layer.
   Everything here is decorative: no content lives in these elements, all are
   aria-hidden, and prefers-reduced-motion collapses the lot to a still frame.
   Only transform/opacity animate (compositor-only); blur is applied once to
   large static shapes that are then moved with transform. */

/* ---------- shared: sections become stacking contexts ---------- */
.hero .wrap,.day .wrap,.social .wrap,.close .wrap{position:relative;z-index:1}
.day,.social{position:relative;overflow:hidden}

/* ---------- aurora: three drifting brand blobs ---------- */
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora i{
  position:absolute;display:block;border-radius:50%;will-change:transform;
  /* soft edge baked into the gradient: no filter, so the compositor just moves a bitmap */
  --c:109,40,217;
  background:radial-gradient(circle at 50% 50%,rgba(var(--c),.55) 0%,rgba(var(--c),.28) 32%,rgba(var(--c),.08) 58%,rgba(var(--c),0) 72%);
  animation:auroraDrift 24s ease-in-out infinite alternate;
}
.aurora i:nth-child(1){width:78vw;height:78vw;left:-26vw;top:-36vw;--c:109,40,217;opacity:.34}
.aurora i:nth-child(2){width:66vw;height:66vw;right:-20vw;top:-20vw;--c:240,138,36;opacity:.32;animation-duration:30s;animation-delay:-9s}
.aurora i:nth-child(3){width:58vw;height:58vw;left:26vw;bottom:-36vw;--c:217,38,119;opacity:.22;animation-duration:27s;animation-delay:-16s}
@keyframes auroraDrift{
  0%  {transform:translate3d(0,0,0) scale(1)}
  33% {transform:translate3d(6vw,4vw,0) scale(1.08)}
  66% {transform:translate3d(-4vw,7vw,0) scale(.96)}
  100%{transform:translate3d(5vw,-5vw,0) scale(1.05)}
}
/* darker band: same blobs, richer */
.close .aurora i{opacity:.62}
.close .aurora i:nth-child(1){opacity:.72}
.close::before{display:none}   /* static blur wash replaced by the aurora */
/* social: quieter */
.social .aurora i{opacity:.20}
.social .aurora i:nth-child(1){left:auto;right:-16vw;top:6vw}
.social .aurora i:nth-child(2){right:auto;left:-14vw;top:18vw}

/* ---------- hero: ribbon flow canvas ---------- */
.flow-canvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;opacity:.9;
}

/* ---------- hero: "handled while you drove" activity chips ---------- */
.busy{position:absolute;inset:0;z-index:4;pointer-events:none}
.busy-chip{
  position:absolute;display:inline-flex;align-items:center;gap:7px;
  background:var(--card);color:var(--ink);
  border:1px solid rgba(33,29,43,.10);border-radius:999px;
  padding:7px 13px 7px 9px;font-size:13px;font-weight:700;line-height:1;
  box-shadow:0 10px 28px rgba(33,29,43,.14);
  opacity:0;will-change:transform,opacity;
  animation:busyRise 11s cubic-bezier(.2,.7,.2,1) infinite;
}
.busy-chip svg{width:15px;height:15px;color:var(--violet);flex:none}
.busy-chip em{font-style:normal;color:var(--body-c);font-weight:600}
.busy-chip--go svg{color:var(--orange)}
.busy-chip:nth-child(1){left:-9%;top:16%;animation-delay:0s}
.busy-chip:nth-child(2){left:-5%;top:52%;animation-delay:-2.2s}
.busy-chip:nth-child(3){left:2%;top:80%;animation-delay:-4.4s}
.busy-chip:nth-child(4){right:-2%;top:0;animation-delay:-6.6s}
.busy-chip:nth-child(5){right:-7%;top:60%;animation-delay:-8.8s}
@keyframes busyRise{
  0%   {opacity:0;transform:translate3d(0,26px,0) scale(.94)}
  8%   {opacity:1;transform:translate3d(0,0,0) scale(1)}
  30%  {opacity:1;transform:translate3d(0,-14px,0) scale(1)}
  38%  {opacity:0;transform:translate3d(0,-34px,0) scale(.96)}
  100% {opacity:0;transform:translate3d(0,-34px,0) scale(.96)}
}

/* ---------- day feed: dot grid + light sweep ---------- */
.day::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(33,29,43,.11) 1px,transparent 1.6px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
          mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 78%);
}
.sweep{
  position:absolute;top:-20%;bottom:-20%;left:-30%;width:34%;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(109,40,217,.07) 35%,rgba(240,138,36,.08) 62%,transparent);
  transform:skewX(-12deg) translate3d(0,0,0);
  will-change:transform;
  animation:sweep 11s cubic-bezier(.45,.05,.4,.95) infinite;
}
@keyframes sweep{
  0%  {transform:skewX(-12deg) translate3d(0,0,0)}
  100%{transform:skewX(-12deg) translate3d(440%,0,0)}
}
.day-sync .pulse{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.55}}

/* ---------- social: phones breathe, halo turns ---------- */
.phone-col{animation:bob 6.5s ease-in-out infinite;will-change:transform}
.phone-col:nth-child(2){animation-duration:7.5s;animation-delay:-2.1s}
.phone-col:nth-child(3){animation-duration:7s;animation-delay:-4.2s}
@keyframes bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
.halo{
  position:absolute;left:50%;top:52%;width:min(760px,92vw);aspect-ratio:1;z-index:0;
  pointer-events:none;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(109,40,217,.16) 74%,rgba(217,38,119,.14) 82%,rgba(240,138,36,.16) 90%,transparent 100%);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%,#000 66%,transparent 67%);
          mask:radial-gradient(circle,transparent 62%,#000 63%,#000 66%,transparent 67%);
  transform:translate(-50%,-50%) rotate(0deg);
  will-change:transform;
  animation:spin 26s linear infinite;
}
.halo::after{
  content:"";position:absolute;inset:7%;border-radius:50%;
  background:conic-gradient(from 180deg,transparent 0 70%,rgba(240,138,36,.18) 84%,rgba(109,40,217,.14) 94%,transparent 100%);
  -webkit-mask:radial-gradient(circle,transparent 60%,#000 61%,#000 63%,transparent 64%);
          mask:radial-gradient(circle,transparent 60%,#000 61%,#000 63%,transparent 64%);
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- close: rising sparks ---------- */
.sparks{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sparks i{
  position:absolute;bottom:-4%;display:block;width:5px;height:5px;border-radius:50%;
  background:var(--orange);opacity:0;will-change:transform,opacity;
  animation:spark linear infinite;
}
.sparks i:nth-child(3n){background:var(--magenta)}
.sparks i:nth-child(3n+1){background:#e9d5ff}
@keyframes spark{
  0%  {opacity:0;transform:translate3d(0,0,0) scale(.6)}
  12% {opacity:.9}
  70% {opacity:.55}
  100%{opacity:0;transform:translate3d(var(--dx,0),-120vh,0) scale(1.1)}
}

/* ---------- mobile: fewer moving parts ---------- */
@media (max-width:960px){
  .aurora i:nth-child(1){width:120vw;height:120vw;left:-50vw;top:-50vw}
  .aurora i:nth-child(2){width:110vw;height:110vw;right:-45vw;top:-30vw}
  .aurora i:nth-child(3){display:none}
  .busy-chip{font-size:12px;padding:6px 11px 6px 8px}
  .busy-chip:nth-child(3),.busy-chip:nth-child(5){display:none}
  .busy-chip:nth-child(1){left:-2%;top:6%}
  .busy-chip:nth-child(2){left:-3%;top:70%}
  .busy-chip:nth-child(4){right:-3%;top:-4%}
  .halo{display:none}
  .sparks i:nth-child(n+11){display:none}
}

/* ---------- off-screen sections stop animating (toggled by motion.js) ---------- */
.motion-off .aurora i,.motion-off .busy-chip,.motion-off .sweep,.motion-off .phone-col,
.motion-off .halo,.motion-off .sparks i{animation-play-state:paused}

/* ---------- reduced motion: a still frame, nothing hidden that matters ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora i,.busy-chip,.sweep,.phone-col,.halo,.sparks i,.day-sync .pulse{animation:none}
  .flow-canvas,.busy,.sweep,.sparks,.halo{display:none}
  .close::before{display:block}
}