.card-scroll-track{position:relative;height:280svh;min-height:calc(820px + 160svh)}
.card-scroll-track .card-hero{position:sticky;top:0;height:100svh;min-height:820px;max-height:none}
.card-stage{--scroll-y:0deg;--scroll-x:0deg;--scroll-z:0deg;--scroll-scale:1;--reflection-width:1}
.card-float{animation:none;transform-style:preserve-3d;transform:rotateX(var(--scroll-x)) rotateY(var(--scroll-y)) rotateZ(var(--scroll-z)) scale(var(--scroll-scale));will-change:transform}
.hero-card{isolation:auto;backface-visibility:visible;transform-style:preserve-3d}
.hero-card>.card-edge{display:none}
.hero-card>.card-front{transform:translateZ(2px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{position:absolute;inset:0;overflow:hidden;border-radius:inherit;transform:rotateY(180deg) translateZ(2px);backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card-gradient);border:1px solid #e2d5ff43;box-shadow:inset 0 1px 0 #fff5,inset -1px -1px 1px #ffffff30;color:#e9def8}
.back-heading{position:absolute;top:24px;left:22px;right:22px;display:flex;align-items:center;justify-content:space-between;font-size:18px;letter-spacing:-.05em}
.back-heading>svg{width:15px;height:18px;color:#cfbaec}
.back-stripe{position:absolute;top:77px;left:0;right:0;height:46px;background:linear-gradient(110deg,#09070f,#21172e 52%,#110b1c);box-shadow:inset 0 1px 0 #e9d6ff15,inset 0 -1px 0 #0008}
.back-signature{position:absolute;top:150px;left:22px;right:22px;padding:12px 11px;border:1px solid #ddc5f933;border-radius:4px;background:repeating-linear-gradient(0deg,#cdb5ed12 0,#cdb5ed12 1px,transparent 1px,transparent 3px);font:8px/1.6 Manrope,Arial,sans-serif;letter-spacing:.09em;color:#d2bee6}
.back-orbits{position:absolute;width:170px;height:96px;top:55%;left:50%;transform:translateX(-50%);opacity:.23}
.back-caption{position:absolute;left:22px;right:22px;bottom:29px;display:flex;flex-direction:column;gap:9px}
.back-caption>b{font-size:11px;font-weight:500;letter-spacing:.02em}
.back-caption>span{font-size:8px;color:#d2bee699;line-height:1.5;letter-spacing:.035em}
.card-rim{position:absolute;top:15px;bottom:15px;width:4px;left:calc(100% - 2px);transform:rotateY(90deg);background:linear-gradient(0deg,#75609a,#d7cbed 45%,#75639e);backface-visibility:visible;opacity:.95}
.card-rim-left{left:-2px;background:linear-gradient(0deg,#57406f,#b8a0da 45%,#6a547e)}
.card-reflection{transform:scaleY(-1) skewX(-3deg) scaleX(var(--reflection-width));transform-origin:center top}
.card-shadow{transform:scaleX(var(--reflection-width))}
.stage-hint{font-size:9px;letter-spacing:.09em}
.stage-hint>.icon{width:13px;height:13px}
@media(min-width:1600px){.card-scroll-track .card-hero{min-height:950px}.card-scroll-track{min-height:calc(950px + 160svh)}}
@media(max-width:900px){.card-scroll-track .card-hero{height:100svh;min-height:800px}.card-scroll-track{min-height:calc(800px + 160svh)}}
@media(max-width:600px){.card-scroll-track .card-hero{height:100svh;min-height:800px}.card-scroll-track{height:280svh;min-height:calc(800px + 160svh)}.back-heading{font-size:16px;left:18px;right:18px;top:20px}.back-stripe{top:65px;height:35px}.back-signature{left:18px;right:18px;top:122px;font-size:7px;padding:10px}.back-orbits{width:140px;height:80px;top:53%}.back-caption{left:18px;right:18px;bottom:22px;gap:7px}.back-caption>b{font-size:9px}.back-caption>span{font-size:7px}.stage-hint{font-size:8px}}
@media(prefers-reduced-motion:reduce){.card-scroll-track{height:auto;min-height:0}.card-scroll-track .card-hero{position:relative}.card-float{will-change:auto;transform:none}}
