/* ============================================================
   Motion layer — animated background, button physics, living type
   (additive; artwork/images are NEVER animated; reduced-motion safe)
   ============================================================ */

/* ---------- 1. Akatsuki red clouds drifting behind everything ---------- */
.rst-bg-blobs{position:fixed;inset:-12vmax;z-index:0;pointer-events:none;overflow:hidden}
.rst-bg-blobs i{position:absolute;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%2080%27%3E%3Cpath%20d%3D%27M15%2060%20Q5%2060%205%2050%20Q5%2042%2013%2040%20Q11%2030%2021%2028%20Q23%2018%2034%2020%20Q40%2010%2052%2014%20Q62%208%2070%2016%20Q82%2014%2084%2026%20Q95%2028%2093%2038%20Q102%2042%2098%2052%20Q94%2060%2085%2060%20Q80%2068%2070%2065%20Q60%2072%2050%2066%20Q40%2070%2032%2064%20Q24%2066%2015%2060%20Z%27%20fill%3D%27%23d21f2c%27%20stroke%3D%27%23f4f2f7%27%20stroke-width%3D%273%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;opacity:.13;will-change:transform;filter:drop-shadow(0 6px 18px rgba(210,31,44,.25))}
.rst-bg-blobs i:nth-child(1){width:34vmax;height:23vmax;left:-6vmax;top:-8vmax;animation:rst-blob-a 52s ease-in-out infinite alternate}
.rst-bg-blobs i:nth-child(2){width:28vmax;height:19vmax;right:-5vmax;top:24vh;animation:rst-blob-b 64s ease-in-out infinite alternate}
.rst-bg-blobs i:nth-child(3){width:30vmax;height:20vmax;left:24vw;bottom:-10vmax;animation:rst-blob-c 58s ease-in-out infinite alternate}
.rst-bg-blobs i:nth-child(4){width:22vmax;height:15vmax;right:20vw;bottom:10vh;opacity:.10;animation:rst-blob-a 70s ease-in-out infinite alternate-reverse}
.rst-bg-blobs i:nth-child(5){width:18vmax;height:12vmax;left:46vw;top:40vh;opacity:.09;animation:rst-blob-b 76s ease-in-out infinite alternate-reverse}
@keyframes rst-blob-a{from{transform:translate(0,0) scale(1)}to{transform:translate(9vmax,7vmax) scale(1.18)}}
@keyframes rst-blob-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8vmax,9vmax) scale(.94)}}
@keyframes rst-blob-c{from{transform:translate(0,0) scale(.95)}to{transform:translate(7vmax,-8vmax) scale(1.14)}}
/* keep app chrome above the clouds */
.app,.rst-bg-blobs~*{position:relative;z-index:1}

/* ---------- 2. Living typography ---------- */
/* Animated gradient headings */
.head h2,.rst-welcome h1,.rst-section-title{
  background:linear-gradient(100deg,var(--rst-ink) 20%,var(--rst-electric) 38%,var(--rst-pink) 52%,var(--rst-violet) 66%,var(--rst-ink) 84%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rst-ink-flow 9s linear infinite}
@keyframes rst-ink-flow{to{background-position:220% center}}
/* Hero title pop-in */
.rst-welcome h1{animation:rst-ink-flow 9s linear infinite,rst-title-in .8s cubic-bezier(.2,1.4,.4,1) both}
@keyframes rst-title-in{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
/* Kicker shimmer */
.rst-kicker,.refine-kicker,.rst-ops-kicker{position:relative;overflow:hidden}
.rst-kicker::after,.refine-kicker::after,.rst-ops-kicker::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
  transform:translateX(-110%);animation:rst-kicker-shine 4.5s ease-in-out infinite}
@keyframes rst-kicker-shine{0%,55%{transform:translateX(-110%)}90%,100%{transform:translateX(110%)}}

/* ---------- 3. Button physics ---------- */
.btn{transition:transform .16s cubic-bezier(.2,1.6,.4,1),box-shadow .2s ease,filter .2s ease;will-change:transform}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(1px) scale(.96)}
.btn.gold:hover{box-shadow:0 8px 22px -6px rgba(224,38,51,.55)}
/* Click ripple */
.rst-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);
  transform:translate(-50%,-50%) scale(0);animation:rst-ripple .55s ease-out forwards}
@keyframes rst-ripple{to{transform:translate(-50%,-50%) scale(3.2);opacity:0}}
/* Paint burst particles */
.rst-paint-dot{position:fixed;z-index:9999;pointer-events:none;border-radius:50%;will-change:transform,opacity}

/* ---------- 4. Card + tile playfulness (containers only, never artwork) ---------- */
.rst-card,.trainer-card,.card{transition:transform .22s cubic-bezier(.2,1.5,.4,1),box-shadow .25s ease}
.rst-card:hover,.trainer-card:hover,.card:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:var(--rst-shadow-lg)}
.stat{transition:transform .2s ease}
.stat:hover{transform:translateY(-3px)}
.stat b{background:linear-gradient(100deg,var(--rst-ink),var(--rst-electric),var(--rst-pink),var(--rst-ink));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rst-ink-flow 7s linear infinite}
/* Nav icon bounce */
.nav .ico,.rst-rail-link [data-rst-icon]{display:inline-block;transition:transform .2s cubic-bezier(.2,2,.4,1)}
.nav:hover .ico,.rst-rail-link:hover [data-rst-icon]{transform:translateY(-3px) rotate(-8deg) scale(1.15)}

/* ---------- 5. Page entrance ---------- */
.page.on{animation:rst-page-in .38s cubic-bezier(.2,.9,.3,1)}
@keyframes rst-page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- 6. Fun extras ---------- */
/* Spinning star on section pills */
.pill{position:relative}
.head .pill::before{content:"✦";margin-right:.4em;display:inline-block;animation:rst-spin 5s linear infinite}
@keyframes rst-spin{to{transform:rotate(360deg)}}
/* Pulsing notification dot */
.rst-notify-btn.has-unread::after{animation:rst-pulse 1.6s ease-in-out infinite}
@keyframes rst-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
/* Back-to-top gets a happy bounce */
#rstToTop:hover{animation:rst-happy .5s ease}
@keyframes rst-happy{0%,100%{transform:translateY(0)}30%{transform:translateY(-7px) rotate(-6deg)}60%{transform:translateY(2px) rotate(4deg)}}

/* ---------- 7. Reduced motion: everything stops ---------- */
@media (prefers-reduced-motion:reduce){
  .rst-bg-blobs i,.head h2,.rst-welcome h1,.rst-section-title,.stat b{animation:none!important}
  .head h2,.rst-welcome h1,.rst-section-title,.stat b{color:var(--rst-ink);background:none}
  .rst-kicker::after,.refine-kicker::after,.rst-ops-kicker::after,.head .pill::before,
  .rst-notify-btn.has-unread::after{animation:none!important;display:none!important}
  .btn:hover{transform:none}
  .page.on{animation:none}
}

/* ---------- 8. Scroll reveals (staggered) ---------- */
.rst-js .rst-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1)}
.rst-js .rst-reveal.in{opacity:1;transform:none}
/* ---------- 9. Card shine sweep (containers only) ---------- */
.rst-card,.trainer-card,.rst-news-card{position:relative;overflow:hidden}
.rst-card::after,.trainer-card::after,.rst-news-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
  transform:translateX(-120%);transition:transform .7s ease}
.rst-card:hover::after,.trainer-card:hover::after,.rst-news-card:hover::after{transform:translateX(120%)}
/* ---------- 10. Skeleton shimmer for loading states ---------- */
.rst-skeleton{position:relative;overflow:hidden;background:#1a141d;border-radius:10px;min-height:18px}
.rst-skeleton::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(210,31,44,.14) 50%,transparent 70%);
  animation:rst-shimmer 1.4s linear infinite}
@keyframes rst-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .rst-js .rst-reveal{opacity:1;transform:none;transition:none}
  .rst-card::after,.trainer-card::after,.rst-news-card::after{display:none}
  .rst-skeleton::after{animation:none}
}