/* This carousel explicitly uses visible horizontal motion, including reduced-motion environments. */
.hero.hero-carousel .hero-track{
  transition:transform .85s cubic-bezier(.22,.68,.25,1)!important;
  backface-visibility:hidden;
}
.hero-carousel .hero-slide{contain:paint}
.hero.hero-carousel .hero-track[data-instant="true"]{
  transition:none!important;
}

.hero-wyvern-sprite{position:absolute;width:48%;height:auto;right:-3%;top:48%;transform:translateY(-50%);overflow:hidden;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 4px 0 #11202833)}
@media(max-width:680px){.hero-wyvern-sprite{width:82%;right:-12%;top:66%;opacity:.9}}

/* Keep the marble theme's white scrim and dark copy. Only give the pastel
   background artwork more definition; the game sprite retains its own colors. */
:root:is([data-theme="light"],[data-theme="white"]) .hero-slide.hero-wyvern .hero-image{filter:contrast(1.24) saturate(1.2) brightness(.94)}

/* Keep every pillar visible beside the copy, with a short fade over the quiet edge. */
.hero-slide.hero-celestial .hero-image{left:8%;width:92%}
.hero-slide.hero-celestial .hero-content{max-width:33%;padding-right:0}
.hero-slide.hero-celestial h2{font-size:clamp(23px,1.8vw,28px);letter-spacing:0}
.hero-slide.hero-celestial p{font-size:11px;line-height:1.8}
.hero-slide.hero-celestial:after{background:linear-gradient(90deg,#1d3a2bf5 0%,#1d3a2be6 25%,#1d3a2b20 35%,transparent 43%)}
:root:is([data-theme="light"],[data-theme="white"]) .hero-slide.hero-celestial:after{background:linear-gradient(90deg,#fff 0%,#fffffff2 25%,#ffffff20 35%,transparent 43%)}
:root:is([data-theme="dark"],[data-theme="black"]) .hero-slide.hero-celestial:after{background:linear-gradient(90deg,#000 0%,#000f 25%,#0002 35%,transparent 43%)}
.hero-carousel[data-slide="2"] .hero-actions{gap:8px}
.hero-carousel[data-slide="2"] .hero-actions button{font-size:11px;padding:10px}
@media(max-width:1050px){
  .hero-slide.hero-celestial .hero-image{left:0;top:auto;bottom:0;width:100%;height:45%;object-fit:contain;object-position:center bottom}
  .hero-slide.hero-celestial .hero-content{max-width:100%;padding:22px}
  .hero-slide.hero-celestial h2{font-size:25px;line-height:1.35;margin-bottom:8px}
  .hero-slide.hero-celestial:after{background:linear-gradient(180deg,#1d3a2bf5 0%,#1d3a2bf0 38%,transparent 64%)}
  :root:is([data-theme="light"],[data-theme="white"]) .hero-slide.hero-celestial:after{background:linear-gradient(180deg,#fff 0%,#fffffff5 38%,transparent 64%)}
  :root:is([data-theme="dark"],[data-theme="black"]) .hero-slide.hero-celestial:after{background:linear-gradient(180deg,#000 0%,#000f 38%,transparent 64%)}
  .hero-carousel[data-slide="2"] .hero-actions{top:146px;bottom:auto;left:22px}
}
@media(min-width:681px) and (max-width:1050px){.hero-slide.hero-celestial .hero-image{object-fit:cover;object-position:center 12%}}