/* =========================================================================
   RichAsians - motion layer
   Everything here is optional decoration: the site stays fully usable with
   motion disabled (see the reduced-motion block at the bottom).
   ========================================================================= */

/* ---------- keyframes ---------- */
@keyframes ra-shine{to{transform:translateX(120%) skewX(-18deg)}}
@keyframes ra-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes ra-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes ra-stripes{to{background-position:400px 0}}
@keyframes ra-pulse{
  0%{box-shadow:0 0 0 0 rgba(87,242,135,.55)}
  70%{box-shadow:0 0 0 12px rgba(87,242,135,0)}
  100%{box-shadow:0 0 0 0 rgba(87,242,135,0)}
}
@keyframes ra-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes ra-drift{
  0%{transform:translate(0,0) scale(1)}
  33%{transform:translate(3%,-4%) scale(1.06)}
  66%{transform:translate(-3%,3%) scale(.96)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes ra-scan{0%{transform:translateY(-100%)}100%{transform:translateY(900%)}}
@keyframes ra-spin{to{transform:rotate(360deg)}}
@keyframes ra-glitch-a{
  0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}
  20%{clip-path:inset(12% 0 60% 0);transform:translate(-5px,2px)}
  40%{clip-path:inset(52% 0 24% 0);transform:translate(4px,-3px)}
  60%{clip-path:inset(28% 0 46% 0);transform:translate(-3px,1px)}
  80%{clip-path:inset(70% 0 8% 0);transform:translate(3px,2px)}
}
@keyframes ra-glitch-b{
  0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)}
  25%{clip-path:inset(36% 0 40% 0);transform:translate(5px,-2px)}
  50%{clip-path:inset(8% 0 74% 0);transform:translate(-4px,3px)}
  75%{clip-path:inset(62% 0 14% 0);transform:translate(2px,-1px)}
}
@keyframes ra-fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ra-fade-in{from{opacity:0}to{opacity:1}}
@keyframes ra-slide-r{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes ra-slide-l{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes ra-zoom{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes ra-mask-up{from{transform:translateY(105%)}to{transform:translateY(0)}}
@keyframes ra-cut{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ra-draw{to{stroke-dashoffset:0}}
@keyframes ra-loadbar{from{transform:translateX(-100%)}to{transform:translateX(350%)}}

/* ---------- page loader ---------- */
.ra-load{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;
  transition:opacity .5s ease,visibility .5s}
.ra-load.is-done{opacity:0;visibility:hidden}
.ra-load__mark{width:74px;height:74px}
.ra-load__mark path,.ra-load__mark polygon{stroke:var(--vp-red);stroke-width:2;fill:none;
  stroke-dasharray:280;stroke-dashoffset:280;animation:ra-draw 1.3s var(--ease) forwards}
.ra-load__txt{position:absolute;bottom:33%;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.ra-load__bar{position:absolute;bottom:29%;width:min(220px,50vw);height:2px;background:var(--hair);overflow:hidden}
.ra-load__bar i{display:block;height:100%;width:40%;background:var(--vp-red);
  animation:ra-loadbar 1.1s var(--ease) infinite}

/* ---------- ambient hero motion ---------- */
.hero__glow--a{animation:ra-drift 22s ease-in-out infinite}
.hero__glow--b{animation:ra-drift 28s ease-in-out infinite reverse}
.term::after{ /* red scanline crossing the store panel */
  content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,70,85,.85),transparent);
  animation:ra-scan 6s linear infinite}
.float{animation:ra-float 7s ease-in-out infinite}

/* ---------- hero load sequence (one orchestrated moment) ---------- */
.hero h1 .line>span{animation:ra-mask-up .9s var(--ease) both}
.hero h1 .line:nth-child(1)>span{animation-delay:.15s}
.hero h1 .line:nth-child(2)>span{animation-delay:.28s}
.hero h1 .line:nth-child(3)>span{animation-delay:.41s}
.hero .eyebrow{animation:ra-fade-in .7s ease .05s both}
.hero__sub{animation:ra-fade-up .8s var(--ease) .5s both}
.hero__cta{animation:ra-fade-up .8s var(--ease) .62s both}
.hero__trust{animation:ra-fade-up .8s var(--ease) .74s both}
.term{animation:ra-zoom 1s var(--ease) .45s both}

/* ---------- scroll reveal ---------- */
[data-anim]{opacity:0;will-change:opacity,transform}
[data-anim].is-in{animation-duration:.85s;animation-timing-function:var(--ease);animation-fill-mode:both}
[data-anim="up"].is-in{animation-name:ra-fade-up}
[data-anim="in"].is-in{animation-name:ra-fade-in}
[data-anim="right"].is-in{animation-name:ra-slide-r}
[data-anim="left"].is-in{animation-name:ra-slide-l}
[data-anim="zoom"].is-in{animation-name:ra-zoom}
[data-anim="cut"].is-in{animation-name:ra-cut;animation-duration:1s}

/* heading rule draws itself in */
.shead h2::after{content:"";position:absolute;left:0;bottom:-.18em;height:4px;width:100%;
  background:var(--vp-red);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .2s}
.shead.is-in h2::after{transform:scaleX(1)}
.shead--center h2::after{transform-origin:center}

/* card tilt (JS writes --mx / --my) */
.tilt{transform:perspective(900px) rotateX(calc(var(--my,0)*-4deg)) rotateY(calc(var(--mx,0)*4deg))}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
    transition-duration:.001s!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1!important;transform:none!important}
  .ticker__track,.dc__track{animation:none!important}
  .term::after,.band::before{display:none}
  .tilt{transform:none!important}
}

/* a converted price changing region */
@keyframes ra-flip{
  0%{transform:translateY(-40%) rotateX(-70deg);opacity:0}
  100%{transform:none;opacity:1}
}