/* Slow crimson atmosphere, scoped to the public site. */
@keyframes raven-coast-drift{from{transform:scale(1.01) translateX(-.2%)}to{transform:scale(1.09) translateX(1%)}}
@keyframes raven-mist{from{opacity:.22}to{opacity:.48}}
@media(min-width:721px){
 .public-site .hero:before{animation:raven-coast-drift 16s ease-in-out infinite alternate;pointer-events:none}
 .public-site .hero:after{content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 83% 70%,#ae133a44,transparent 47%),radial-gradient(ellipse at 10% 60%,#8a16372e,transparent 45%);animation:raven-mist 13s ease-in-out infinite alternate}
}
.public-site a,.public-site button{transition:color .22s ease,background-color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease}
.public-site nav a,.public-site .platforms a,.public-site .textlink,.public-site .streamlink{position:relative}
.public-site nav a:after,.public-site .platforms a:after,.public-site .textlink:after,.public-site .streamlink:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:#ff244e;transform:scaleX(0);transform-origin:left;transition:transform .25s ease;pointer-events:none}
.public-site a:focus-visible,.public-site button:focus-visible{outline:2px solid #ff4566;outline-offset:5px;box-shadow:0 0 18px #dc153b44}
.public-site nav a:focus-visible:after,.public-site .platforms a:focus-visible:after,.public-site .textlink:focus-visible:after,.public-site .streamlink:focus-visible:after{transform:scaleX(1)}
.public-site .card-image img{transition:transform .45s ease,filter .45s ease}
.public-site .card-image .play{transition:transform .25s ease,text-shadow .25s ease}
.public-site .social-card,.public-site .sponsor-card,.public-site .card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.public-site .effects-toggle{background:transparent;border:1px solid #4a2833;border-radius:3px;color:#c9bbc1;padding:8px 12px;font-size:.75rem;justify-self:start}
.public-site.effects-paused .hero:before,.public-site.effects-paused .hero:after,.public-site.effects-hidden .hero:before,.public-site.effects-hidden .hero:after{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){
 .public-site nav a:hover:after,.public-site .platforms a:hover:after,.public-site .textlink:hover:after,.public-site .streamlink:hover:after{transform:scaleX(1)}
 .public-site .button:hover{transform:translateY(-2px);background:#d9153d;border-color:#ff3a5d;color:#fff;box-shadow:0 5px 22px #b6073544}
 .public-site .button:active{transform:translateY(0)}
 .public-site .social-card:hover,.public-site .sponsor-card:hover,.public-site .card:not(.playing):hover{transform:translateY(-4px);border-color:#a8203d;box-shadow:0 10px 26px #0005,0 0 18px #9b153022}
 .public-site .thumbnail-choice:hover img{transform:scale(1.035);filter:brightness(1.08)}
 .public-site .thumbnail-choice:hover .play{transform:scale(1.15);text-shadow:0 0 24px #ff244e}
 .public-site .logo-link:hover{filter:drop-shadow(0 0 9px #ba153b66)}
}
@media(prefers-reduced-motion:reduce){
 .public-site:not(.effects-enabled) *,.public-site:not(.effects-enabled) *:before,.public-site:not(.effects-enabled) *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .public-site .thumbnail-choice:hover img,.public-site .thumbnail-choice:hover .play,.public-site .button:hover,.public-site .card:hover,.public-site .social-card:hover,.public-site .sponsor-card:hover{transform:none}
 .public-site .effects-toggle{display:inline-flex}
}
/* Visible ember layer remains behind the content on every screen size. */
.public-site .hero-copy{position:relative;z-index:2}.public-site .hero-portrait{z-index:2}.raven-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.raven-embers i{position:absolute;bottom:-15px;left:10%;width:5px;height:5px;background:#ff4960;border-radius:50%;box-shadow:0 0 8px 3px #ec123c66;animation:raven-ember-rise 9s linear infinite}.raven-embers i:nth-child(2){left:19%;animation-delay:-3s;animation-duration:12s}.raven-embers i:nth-child(3){left:28%;animation-delay:-7s}.raven-embers i:nth-child(4){left:36%;animation-delay:-2s;animation-duration:11s}.raven-embers i:nth-child(5){left:43%;animation-delay:-5s}.raven-embers i:nth-child(6){left:51%;animation-delay:-8s;animation-duration:14s}.raven-embers i:nth-child(7){left:59%;animation-delay:-4s}.raven-embers i:nth-child(8){left:66%;animation-delay:-6s;animation-duration:12s}.raven-embers i:nth-child(9){left:73%;animation-delay:-1s}.raven-embers i:nth-child(10){left:81%;animation-delay:-9s;animation-duration:13s}.raven-embers i:nth-child(11){left:89%;animation-delay:-5s}.raven-embers i:nth-child(12){left:95%;animation-delay:-7s;animation-duration:11s}
@keyframes raven-ember-rise{0%{bottom:-15px;transform:translateX(0);opacity:0}12%{opacity:.95}80%{opacity:.8}100%{bottom:105%;transform:translateX(-45px);opacity:0}}
.public-site.effects-paused .raven-embers i,.public-site.effects-hidden .raven-embers i{animation-play-state:paused}
@media(hover:hover) and (pointer:fine){.public-site .button:hover{box-shadow:0 0 28px #eb174a77;transform:translateY(-3px)}.public-site nav a:hover,.public-site .textlink:hover{color:#ff5879;text-shadow:0 0 12px #ef214977}}
@media(prefers-reduced-motion:reduce){.public-site:not(.effects-enabled) .raven-embers{display:none}.public-site .button:hover{transform:none}}

/* Anchor the zoom below navigation, never into the header. */
.public-site .hero:before{transform-origin:center top}
.public-site header.nav{position:relative;z-index:5;isolation:isolate;background:#08090b;animation:none;transform:none}
.public-site header.nav:before{content:'';position:absolute;inset:0 calc((100vw - 100%)/-2);background:#08090b;z-index:-1;pointer-events:none}
.public-site header.nav .button:hover,.public-site header.nav .button:active{transform:none}

/* Extend the mist across the artwork so no tinted edge crosses the portrait. */
@media(min-width:721px){.public-site .hero:after{left:calc((100vw - 100%)/-2);right:auto;width:100vw;transform:none;background:radial-gradient(ellipse at 83% 70%,#ae133a44,transparent 47%),radial-gradient(ellipse at 10% 60%,#8a16372e,transparent 45%)}}
.public-site .effects-toggle{display:inline-flex;align-items:center;min-height:40px}

/* Keep sparks above the portrait while preserving readable, clickable content. */
.public-site .hero-copy{z-index:4}.raven-embers i{display:block;pointer-events:none;animation-name:raven-ember-rise}

/* Animate transforms rather than layout for smoother mobile effects. */
.raven-embers i{top:100%;bottom:auto}
@keyframes raven-ember-rise{0%{transform:translate(0,0);opacity:0}12%{opacity:.95}80%{opacity:.8}100%{transform:translate(-45px,-850px);opacity:0}}
@media(max-width:720px){.raven-embers i:nth-child(n+7){display:none}}

/* Mobile uses its own artwork layer, behind the stationary portrait and logo. */
@keyframes raven-mobile-coast{from{transform:translate3d(-1%,0,0) scale(1.02)}to{transform:translate3d(1%,-1%,0) scale(1.1)}}
@media(max-width:720px){
 .public-site .hero-portrait{overflow:hidden;background:none}
 .public-site .hero-portrait:before{content:"";position:absolute;inset:-5%;z-index:-1;pointer-events:none;background:url('/static/raven-background-mobile.webp') center/cover no-repeat;transform-origin:center;animation:raven-mobile-coast 18s ease-in-out infinite alternate}
 .public-site .hero-portrait:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#08090b,transparent 25%,#08090b 100%)}
 .public-site.effects-paused .hero-portrait:before,.public-site.effects-hidden .hero-portrait:before{animation-play-state:paused}
}