/* The large illustration stays rasterized and still; only tiny light layers animate. */
.hero-art{background:none;isolation:isolate;animation:none}
.hero.reveal-in{animation:none}
.hero-art:before{content:'';position:absolute;inset:-8px -8px -8px -160px;z-index:-1;background:linear-gradient(0deg,#13233345,transparent 65%),url('/assets/wayward-skyblock-hd-v2.webp') center/cover no-repeat;mask-image:linear-gradient(90deg,transparent,#000 48%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);filter:saturate(.85) brightness(.96)}
.hero-art:after{display:none}
.hero-badge{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0c172bf5}
.join-art{background-image:linear-gradient(0deg,#0d1d3066,transparent 65%),url('/assets/wayward-skyblock-hd-v2.webp');background-size:auto,cover;background-position:center,center}
.crystal-host{position:relative;isolation:isolate}
.crystal-decor{position:absolute;display:block;pointer-events:none;user-select:none;z-index:0;contain:layout style}
.crystal-decor>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.hero-copy>h1,.hero-copy>p,.hero-copy>.eyebrow,.hero-copy>.hero-actions,.hero-copy>.hero-bottom{position:relative;z-index:1}
.crystal-decor--hero{width:47px;height:83px;right:32px;top:23px;opacity:.95;transform:rotate(16deg)}
.crystal-decor--hero-spark{width:42px;height:47px;right:98px;top:31px;opacity:.64}
.crystal-decor--help{right:25px;top:19px;width:38px;height:52px;opacity:.85;transform:rotate(16deg)}
.help-card>.crystal-decor--help{right:24px;top:18px;width:48px;height:60px;opacity:1;transform:none;filter:none}
.help-card>.crystal-decor--help>img{image-rendering:auto;filter:none}
.help-card>.crystal-decor--help>.gem-luster:before{display:none}
.crystal-decor--discord{right:205px;bottom:18px;width:58px;height:60px;opacity:.38}
.discord-banner.crystal-host>div,.discord-banner.crystal-host>.btn,.discord-banner.crystal-host>.icon{position:relative;z-index:1}
.crystal-decor--story{right:25px;bottom:22px;width:60px;height:90px;opacity:.4;transform:rotate(24deg)}
.crystal-decor--side{right:22px;bottom:18px;width:51px;height:65px;opacity:.85;transform:rotate(-19deg)}
.side-note.crystal-host{padding-bottom:90px;overflow:hidden}
/* No moving gemstone raster or large blur/mask layer. */
.crystal-float{animation:none;transform:none}
.gem-luster{display:block;position:absolute;inset:0;pointer-events:none;user-select:none;z-index:2;color:#83e8ed}
.gem-luster[data-stone=amethyst]{color:#c9a6ff}
.gem-luster[data-stone=amber]{color:#ffe1a1}
.gem-luster[data-stone=jade]{color:#8affc6}
.gem-luster>svg{display:block;width:100%;height:100%;overflow:visible}
.gem-luster:before{content:'';position:absolute;inset:5%;background:radial-gradient(ellipse,currentColor,transparent 68%);opacity:.05}
.gem-facet-flash{opacity:0;fill:#f0ffff}
.gem-edge-flash{opacity:.12;fill:none;stroke:#f0ffff;stroke-width:1.1}
.gem-glint{position:absolute;left:36%;top:23%;width:13px;height:13px;background:radial-gradient(circle,#fff 0 12%,#d9ffff 15%,transparent 67%);opacity:.2}
.gem-glint:before,.gem-glint:after{content:'';position:absolute;background:linear-gradient(90deg,transparent,#efffff,transparent);inset:6px 0;height:1px}
.gem-glint:after{transform:rotate(90deg)}
.gem-glint--second{left:65%;top:63%;width:9px;height:9px}
.gem-glint--second:before,.gem-glint--second:after{inset:4px 0}
.redeem-visual>.gem-luster{inset:auto;width:174px;height:190px}
.bank-crystal-figure>.gem-luster{inset:auto;width:120px;height:145px}
.bank-info-heading>.gem-luster{inset:-2px 15px auto auto;width:107px;height:110px}
.product-art>.gem-luster{inset:50% auto auto 50%;width:110px;height:110px;transform:translate(-50%,-50%)}
.product-art>.gem-luster:before{inset:5%;opacity:.03}
@media(prefers-reduced-motion:no-preference){
 .gem-luster:before{animation:gem-aura 8s ease-in-out infinite paused}
 .gem-facet-flash{animation:gem-facet-light 8s ease-in-out infinite paused}
 .gem-edge-flash{animation:gem-edge-light 8s ease-in-out infinite paused}
 .gem-glint{animation:gem-point-light 8s ease-in-out infinite paused}
 .gem-glint--second{animation-delay:-3s}
 .gem-luster--offset:before,.gem-luster--offset .gem-facet-flash,.gem-luster--offset .gem-edge-flash,.gem-luster--offset .gem-glint{animation-delay:-2.6s}
 .gem-luster--late:before,.gem-luster--late .gem-facet-flash,.gem-luster--late .gem-edge-flash,.gem-luster--late .gem-glint{animation-delay:-5.2s}
 .gem-luster.crystal-awake:before,.gem-luster.crystal-awake .gem-facet-flash,.gem-luster.crystal-awake .gem-edge-flash,.gem-luster.crystal-awake .gem-glint{animation-play-state:running}
 .gem-motion--spark{animation:gem-star-light 7s ease-in-out infinite paused}
 .crystal-awake>.gem-motion--spark{animation-play-state:running}
 .crystals-page-paused .gem-luster:before,.crystals-page-paused .gem-luster *,.crystals-page-paused .gem-motion--spark{animation-play-state:paused!important}
}
@keyframes gem-aura{0%,35%,100%{opacity:.02}15%{opacity:.25}}
@keyframes gem-facet-light{0%,4%,30%,100%{opacity:0}16%{opacity:.48}}
@keyframes gem-edge-light{0%,6%,38%,100%{opacity:.08}20%{opacity:.85}}
@keyframes gem-point-light{0%,8%,34%,100%{opacity:.08;transform:scale(.9)}20%{opacity:1;transform:scale(1.1)}}
@keyframes gem-star-light{0%,100%{opacity:.3}50%{opacity:.9}}
@media(max-width:1150px){.redeem-visual>.gem-luster{width:145px;height:176px}}
@media(max-width:1100px){.crystal-decor--hero{right:17px;width:34px;height:60px;opacity:.8}.crystal-decor--hero-spark{right:61px;width:29px}.crystal-decor--discord{right:185px}}
@media(max-width:800px){
 .hero-art:before{inset:-55px -8px -8px;background-position:center 43%;mask-image:linear-gradient(180deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 35%)}
 .crystal-decor--hero{right:24px;top:14px;width:35px;height:61px;opacity:.8}
 .crystal-decor--hero-spark{right:68px;top:16px;width:29px;height:34px}
 .crystal-decor--discord{right:24px;bottom:20px;width:45px;opacity:.28}
}
@media(max-width:600px){
 .crystal-decor--hero-spark{display:none}.crystal-decor--hero{width:25px;height:44px;right:18px;top:9px;opacity:.65}
 .redeem-visual>.gem-luster{width:147px;height:140px}
 .bank-info-heading>.gem-luster{width:77px;height:90px;right:-2px;top:6px}
 .gem-glint{width:9px;height:9px}.gem-glint:before,.gem-glint:after{inset:4px 0}
}
@media(prefers-reduced-motion:reduce){.gem-luster:before,.gem-luster *,.gem-motion--spark{animation:none!important}.gem-facet-flash{opacity:0}.gem-glint{opacity:.2}}