/* Shared motion language: short arrivals and restrained interaction feedback. */
@keyframes valoris-rise{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes valoris-dialog{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes valoris-backdrop{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
 .home-page .hero-art{animation:landscape-drift 22s ease-out both;animation-iteration-count:1}
 .home-page .hero-content>.eyebrow{animation:valoris-rise .8s cubic-bezier(.22,1,.36,1) .08s both}
 .home-page .hero-content>h1{animation:valoris-rise 1s cubic-bezier(.22,1,.36,1) .18s both}
 .home-page .hero-content>.hero-description{animation:valoris-rise 1s cubic-bezier(.22,1,.36,1) .3s both}
 .home-page .dock-intro{animation:valoris-rise .85s cubic-bezier(.22,1,.36,1) .38s both}
 .home-page .dock-button{animation:valoris-rise .85s cubic-bezier(.22,1,.36,1) .46s both;transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s,box-shadow .3s}
 .home-page .dock-button:nth-child(2){animation-delay:.55s}
 .home-page .mobile-menu:not([hidden]){animation:valoris-rise .28s ease-out both}
 .account-page #account-view{animation:none}
 .account-page .account-welcome{animation:valoris-rise .65s ease-out both}
 .account-page .stat-card{animation:valoris-rise .7s ease-out .08s both}
 .account-page .stat-card:nth-child(2){animation-delay:.15s}
 .account-page .stat-card:nth-child(3){animation-delay:.22s}
 .account-page .profile-card{animation:valoris-rise .75s ease-out .25s both}
 .account-page .character-section{animation:valoris-rise .75s ease-out .32s both}
 .account-page #biztonsag{animation:valoris-rise .75s ease-out .38s both}
 dialog[open],.download-modal[open]{animation:valoris-dialog .32s cubic-bezier(.22,1,.36,1) both}
 dialog[open]::backdrop,.download-modal[open]::backdrop{animation:valoris-backdrop .3s ease-out both}
 .download-modal-choice,.dialog-close,.download-modal-close,.account-submit,.sidebar-link,.desktop-nav button,.account-header nav a{transition:color .25s,background .25s,border-color .25s,box-shadow .25s}
 .download-modal-choice svg,.dock-icon{transition:transform .3s cubic-bezier(.22,1,.36,1)}
 .account-page input{transition:border-color .25s,box-shadow .25s,background .25s}
 .account-page input:focus{box-shadow:0 0 0 3px #e7b67a12}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .home-page .dock-button:hover{transform:translateY(-3px);box-shadow:0 10px 26px #0003}
 .dock-button:hover .dock-icon{transform:translateX(2px)}
 .download-modal-choice:hover{color:#e7b67a;border-color:#e7b67a80}
 .download-modal-choice:hover svg{transform:translateY(3px)}
 .download-modal-close:hover,.dialog-close:hover{color:#e7b67a;background:#e7b67a0c}
 .account-submit:hover{box-shadow:0 5px 18px #0003}
}
@media(prefers-reduced-motion:reduce){dialog[open],dialog[open]::backdrop,.download-modal[open],.download-modal[open]::backdrop{animation:none!important}}

/* Reference-based Metin cast; old village artwork retained for rollback. */
.home-page .hero-art{background-image:linear-gradient(90deg,rgba(9,10,11,.72),rgba(9,10,11,.25) 38%,transparent 65%),url('/assets/valoris-heroes-v1.webp');background-position:center center}
@media(max-width:767px){.home-page .hero-art{background-image:linear-gradient(0deg,#121414 0%,#121414b3 30%,#1214140d 75%),url('/assets/valoris-heroes-v1.webp');background-position:68% top;background-size:cover}}

/* Fit the complete composition instead of cropping it to a shallow banner. */
.home-page .hero{height:auto;min-height:0;aspect-ratio:1672/941}
.home-page .hero-art{background-image:linear-gradient(90deg,rgba(9,10,11,.62),rgba(9,10,11,.15) 38%,transparent 65%),url('/assets/valoris-heroes-v2.png');background-size:100% 100%;background-position:center;animation:none;transform:none}
@media(max-width:767px){
 .home-page .hero{aspect-ratio:auto;height:auto;min-height:0;padding-top:56.28%;padding-bottom:24px;background:#121414}
 .home-page .hero-art{bottom:auto;height:auto;aspect-ratio:1672/941;background-image:linear-gradient(0deg,#121414,transparent 24%),url('/assets/valoris-heroes-v2.png');background-size:100% 100%;background-position:center;animation:none;transform:none}
 .home-page .hero-content{position:relative;inset:auto;width:auto;transform:none;margin:12px 23px 0}
}
/* Keep the action dock within the opening screen; fit, never crop, the artwork. */
@media(min-width:768px){
 .home-page .hero{aspect-ratio:auto;height:calc(100svh - 86px - 158px);min-height:330px;background:#111314}
 .home-page .hero-art{background-size:100% 100%,contain;background-repeat:no-repeat;background-position:center,right center}
 .home-page .action-dock{min-height:158px;padding-top:22px;padding-bottom:22px}
 .home-page .hero-content{width:44%;transform:translateY(-50%)}
 .home-page .hero h1{font-size:clamp(42px,4.8vw,90px)}
}
/* Seamless full-width scenery beneath the uncropped character composition. */
@media(min-width:768px){
 .home-page .hero{background-image:linear-gradient(90deg,#0e1113df,#111314a8 55%,#11131470),url('/assets/village.png');background-size:cover;background-position:center}
 .home-page .hero-art{left:auto;right:0;width:min(100%,calc((100svh - 244px)*1.77683));background-image:url('/assets/valoris-heroes-v2.png');background-size:contain;background-repeat:no-repeat;background-position:right center;mask-image:linear-gradient(90deg,transparent,#000 25%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%)}
 .home-page .hero-content{z-index:1;text-shadow:0 2px 22px #000a}
}
/* Mobile opening: a single composition with readable copy and a compact action dock. */
@media(max-width:767px){
 .home-page .hero{height:clamp(380px,calc(100svh - 250px),590px);min-height:0;padding:0;aspect-ratio:auto;isolation:isolate}
 .home-page .hero-art{inset:0;width:100%;height:100%;aspect-ratio:auto;background-color:#121414;background-image:linear-gradient(0deg,#121414 0%,#121414f5 24%,#12141465 48%,transparent 76%),url('/assets/valoris-heroes-v2.png');background-size:100% 100%,100% auto;background-position:center,center top;background-repeat:no-repeat;mask-image:none;-webkit-mask-image:none}
 .home-page .hero-content{position:absolute;left:23px;right:23px;top:auto;bottom:24px;margin:0;width:auto;transform:none;z-index:1}
 .home-page .hero-content .eyebrow{font-size:8px;letter-spacing:2.5px;margin-bottom:13px;max-width:none}
 .home-page .hero h1{font-size:clamp(33px,8.8vw,46px);line-height:1.08;letter-spacing:-1.2px}
 .home-page .hero-description{font-size:14px;line-height:1.55;margin-top:15px;max-width:300px}
 .home-page .action-dock{height:180px;min-height:180px;padding:19px 23px;gap:14px}
 .home-page .dock-intro>strong{font-size:20px}
 .home-page .dock-button{height:76px}
}
@media(max-width:767px){
 .home-page .hero{height:clamp(350px,calc(100svh - 280px),540px)}
 .home-page .hero-art::after{content:"";position:absolute;left:0;right:0;top:calc(56.28vw - 80px);height:90px;background:linear-gradient(0deg,#121414 12%,transparent);pointer-events:none}
}
/* Mobile composition follows its content, not an oversized viewport spacer. */
@media(max-width:767px){
 .home-page .hero{height:auto;min-height:0;max-height:none;padding:0 0 24px;display:flow-root;background:#121414}
 .home-page .hero-art{inset:0;height:100%;background-image:linear-gradient(0deg,#121414 0%,#121414e8 18%,transparent 70%),url('/assets/valoris-heroes-v2.png');background-size:100% 100%,100% auto;background-position:center,center top}
 .home-page .hero-art::after{top:calc(56.28vw - 90px);height:100px;background:linear-gradient(0deg,#121414 8%,transparent)}
 .home-page .hero-content{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0 23px;padding-top:calc(56.28vw - 36px);width:auto;transform:none}
 .home-page .hero-content .eyebrow{margin:0 0 12px;font-size:8px;letter-spacing:2px}
 .home-page .hero h1{font-size:clamp(33px,8.8vw,46px);line-height:1.08;margin:0}
 .home-page .hero-description{font-size:14px;line-height:1.5;margin-top:14px;max-width:310px}
}
/* First mobile screen ends after the action buttons; footer starts below the fold. */
@media(max-width:767px){
 .home-page .site-shell>main{min-height:calc(100svh - var(--opening-header,70px));display:flex;flex-direction:column}
 .home-page .hero{flex:1 0 auto}
 .home-page .action-dock{flex:0 0 180px}
}