/* Homepage introduction animation, adapted from tests/new slider.html. */
.hero-intro-stage {
  --intro-accent:#8b5cf6; --intro-light:#a5b4fc; --intro-edge:#4c3a9e;
  box-sizing:border-box;
}
.hero-intro-stage *, .hero-intro-stage *::before, .hero-intro-stage *::after {box-sizing:inherit}
body.home-modern .top-holder.is-intro .dollar-3d,
body.home-modern .top-holder.is-intro .floater {display:none}
.hero-intro-stage[hidden] {display:none}
.hero-intro-stage {
  position:absolute;
  inset:0;
  height:100%;
  perspective:1200px;
  display:grid;
  place-items:center;
  overflow:visible;
  pointer-events:none;
}
.hero-intro-scene{position:relative;width:0;height:0;scale:var(--intro-scale,.6);transform-style:preserve-3d;transform:rotateX(calc(-16deg + var(--rx,0deg))) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.hero-intro-float{transform-style:preserve-3d;animation:hero-intro-bob 5s ease-in-out infinite}
.hero-intro-shadow{position:absolute;left:-130px;top:170px;width:260px;height:40px;border-radius:50%;background:radial-gradient(#000,transparent 70%);transform:rotateX(90deg);animation:hero-intro-shd 5s ease-in-out infinite}

/* coins */
.hero-intro-coin{--sz:190px;--step:2.2px;position:absolute;width:var(--sz);height:var(--sz);left:calc(var(--sz)/-2);top:calc(var(--sz)/-2);transform-style:preserve-3d;animation:hero-intro-spin 7s linear infinite}
.hero-intro-coin.hero-intro-sm{--sz:80px;--step:.9px}
.hero-intro-coin>i{position:absolute;inset:0;border-radius:50%;background:var(--intro-edge);transform:translateZ(calc((var(--i) - 6) * var(--step)))}
.hero-intro-coin>.hero-intro-f{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-weight:900;color:#f5f3ff;font-family:Tahoma,system-ui,sans-serif;
  background:radial-gradient(circle at 32% 28%,#e0e7ff,#818cf8 35%,var(--intro-accent) 75%);
  border:calc(var(--sz)*.06) solid var(--intro-edge);box-shadow:inset 0 0 0 calc(var(--sz)*.03) rgba(255,255,255,.18);
  font-size:calc(var(--sz)*.42);backface-visibility:hidden}
.hero-intro-coin.hero-intro-sm>.hero-intro-f{font-size:calc(var(--sz)*.34)}
.hero-intro-coin>.hero-intro-f.hero-intro-a{transform:translateZ(calc(6*var(--step) + .5px))}
.hero-intro-coin>.hero-intro-f.hero-intro-b{transform:rotateY(180deg) translateZ(calc(6*var(--step) + .5px))}
.hero-intro-orbit{position:absolute;left:0;top:0;transform-style:preserve-3d;animation:hero-intro-orb 16s linear infinite}
.hero-intro-slot{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateY(var(--a)) translateZ(230px)}
.hero-intro-slot .hero-intro-coin{animation-duration:4s}
.hero-intro-slot:nth-child(2) .hero-intro-coin{animation-direction:reverse}

/* cubes */
.hero-intro-pos{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:translate3d(var(--x),var(--y),var(--z))}
.hero-intro-pos>.hero-intro-bobber{transform-style:preserve-3d;animation:hero-intro-bob var(--d,4s) ease-in-out infinite}
.hero-intro-cube{--c:64px;position:absolute;left:calc(var(--c)/-2);top:calc(var(--c)/-2);width:var(--c);height:var(--c);transform-style:preserve-3d;animation:hero-intro-tumble var(--t,10s) linear infinite}
.hero-intro-cube div{position:absolute;inset:0;background:rgba(22,22,32,.72);border:2px solid var(--intro-accent);box-shadow:inset 0 0 16px rgba(139,92,246,.28);display:grid;place-items:center;color:var(--intro-accent);font-size:calc(var(--c)*.4)}
.hero-intro-cube.hero-intro-solid div{background:linear-gradient(135deg,var(--intro-light),var(--intro-edge));border-color:var(--intro-edge);color:#f5f3ff}
.hero-intro-cube div:nth-child(1){transform:translateZ(calc(var(--c)/2))}
.hero-intro-cube div:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--c)/2))}
.hero-intro-cube div:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--c)/2))}
.hero-intro-cube div:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--c)/2))}
.hero-intro-cube div:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--c)/2))}
.hero-intro-cube div:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--c)/2))}

/* rings */
.hero-intro-ring{position:absolute;left:-150px;top:-150px;width:300px;height:300px;border-radius:50%;border:2px solid var(--intro-accent);box-shadow:0 0 22px rgba(139,92,246,.38),inset 0 0 22px rgba(99,102,241,.22);transform-style:preserve-3d;animation:hero-intro-rx 12s linear infinite}
.hero-intro-ring.hero-intro-two{left:-185px;top:-185px;width:370px;height:370px;border-color:var(--intro-light);border-width:2px;opacity:.7;animation:hero-intro-ry 18s linear infinite}

@keyframes hero-intro-spin{to{transform:rotateY(360deg)}}
@keyframes hero-intro-orb{to{transform:rotateY(-360deg)}}
@keyframes hero-intro-bob{50%{transform:translateY(-16px)}}
@keyframes hero-intro-shd{50%{transform:rotateX(90deg) scale(.82);opacity:.5}}
@keyframes hero-intro-tumble{to{transform:rotateX(360deg) rotateY(720deg)}}
@keyframes hero-intro-rx{from{transform:rotateX(70deg) rotateZ(0)}to{transform:rotateX(70deg) rotateZ(360deg)}}
@keyframes hero-intro-ry{from{transform:rotateY(70deg) rotateZ(0)}to{transform:rotateY(70deg) rotateZ(-360deg)}}


@media (prefers-reduced-motion:reduce){.hero-intro-stage *{animation:none!important;transition:none!important}}