/* WorldLegends visual patch. Loaded after app.css. */
.wl-brand img { max-height: 92px; width: 210px; }
.wl-nav-shell { min-height: 92px; }
.wl-brand { height: 92px; }
.wl-hero { background: #080b0e; min-height: 590px; }
.wl-hero::before { content: none; }
.wl-landscape {
    position: absolute; inset: -7%; z-index: 0;
    background: url('../img/worldlegends-cinematic.webp') center 45% / cover no-repeat;
    transform-origin: 25% 48%;
    animation: wl-landscape-drift 10s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform;
}
.wl-hero::after {
    z-index: 1;
    background: linear-gradient(90deg, rgba(4,7,9,.07) 0%, rgba(4,7,9,.28) 28%, rgba(4,7,9,.55) 55%, rgba(4,7,9,.38) 100%), linear-gradient(180deg, rgba(4,7,9,.08), rgba(4,7,9,.1) 45%, #080b0e 100%);
    mix-blend-mode: normal;
    pointer-events: none;
}
.wl-hero-grid {
    position: relative; z-index: 2;
    width: min(1460px, calc(100% - 3rem));
    grid-template-columns: minmax(0, 1fr) 310px;
    padding-left: clamp(130px, 17vw, 280px);
    padding-top: 1.25rem; padding-bottom: 3.2rem;
    gap: 1.5rem; min-height: 590px;
}
.wl-hero-content { width: 100%; padding: .4rem 0 0; }
.wl-hero-logo { width: min(390px, 90%); margin: 0 auto .3rem; }
.wl-hero h1 { font-size: clamp(1.65rem, 2.8vw, 3rem); letter-spacing: .015em; line-height: 1.2; margin-top: .65rem; }
.wl-hero-kicker { font-size: .82rem; letter-spacing: .28em; }
.wl-hero-tagline { font-size: .83rem; letter-spacing: .07em; }
.wl-hero-buttons { gap: .7rem; }
.wl-hero .wl-button { min-width: 0; padding: .9rem 1.1rem; font-size: .83rem; }
.wl-status-card { background: linear-gradient(145deg, rgba(7,13,16,.95), rgba(3,7,9,.96)); border-color: rgba(225,169,56,.8); }
.wl-feature-card, .wl-panel { border-color: rgba(216,168,63,.62); }
.wl-feature-card { background: linear-gradient(145deg,#0d1317,#05090b); }
.wl-hero-overlay { z-index: 1; pointer-events: none; }
.wl-embers { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.wl-embers span {
    position: absolute; bottom: -12%; left: var(--x); width: 3px; height: 3px;
    background: #ffd583; border-radius: 50%; opacity: 0;
    box-shadow: 0 0 7px 2px rgba(255,167,46,.35);
    animation: wl-ember-rise var(--duration) linear var(--delay) infinite;
}
@keyframes wl-landscape-drift {
    from { transform: translate3d(-3%, 1%, 0) scale(1.02); }
    to { transform: translate3d(3%, -1.5%, 0) scale(1.15); }
}
@keyframes wl-ember-rise {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    15% { opacity: .7; }
    75% { opacity: .4; }
    100% { transform: translate3d(55px, -640px, 0); opacity: 0; }
}
@media (max-width: 1320px) {
    .wl-brand img { width: 164px; }
}
@media (max-width: 1110px) {
    .wl-brand img { width: 182px; }
}
@media (max-width: 1200px) {
    .wl-hero-grid { padding-left: 120px; grid-template-columns: minmax(0,1fr) 280px; }
    .wl-hero .wl-button { padding: .75rem; font-size: .72rem; }
}
@media (max-width: 900px) {
    .wl-hero-grid { grid-template-columns: 1fr; padding-left: 0; padding-bottom: 3.8rem; gap: 1.5rem; }
    .wl-hero-content { max-width: 590px; }
    .wl-hero h1 { font-size: clamp(1.75rem, 5vw, 2.7rem); }
    .wl-hero::after { background: linear-gradient(180deg,rgba(4,7,9,.38),rgba(4,7,9,.6) 55%,#080b0e); }
    .wl-landscape { background-position: 30% center; }
}
@media (max-width: 620px) {
    .wl-nav-shell { min-height: 76px; }
    .wl-brand { height: 76px; }
    .wl-brand { width: 150px; }
    .wl-brand img { width: 150px; max-height: 74px; }
    .wl-hero-grid { width: calc(100% - 1.25rem); padding-top: 1.5rem; }
    .wl-hero-logo { width: min(315px, 87vw); }
    .wl-hero-kicker { font-size: .7rem; }
    .wl-hero-buttons { margin-top: .7rem; }
    .wl-hero .wl-button { width: min(100%,330px); padding: .9rem 1rem; font-size: .85rem; }
    .wl-embers span:nth-child(n+7) { display: none; }
    .wl-landscape { animation-duration: 14s; }
}
/* The home background is intentionally continuous, even when the base stylesheet
   applies its global reduced-motion rule to all animations. */
@media (prefers-reduced-motion: reduce) {
    .wl-hero .wl-landscape { animation-duration: 10s !important; animation-iteration-count: infinite !important; }
    .wl-hero .wl-embers span { animation-duration: var(--duration) !important; animation-iteration-count: infinite !important; }
}

.wl-embers span:nth-child(1) { --x: 37%; --duration: 18s; --delay: -3s; }
.wl-embers span:nth-child(2) { --x: 74%; --duration: 12s; --delay: -6s; }
.wl-embers span:nth-child(3) { --x: 14%; --duration: 19s; --delay: -9s; }
.wl-embers span:nth-child(4) { --x: 51%; --duration: 13s; --delay: -12s; }
.wl-embers span:nth-child(5) { --x: 88%; --duration: 20s; --delay: -15s; }
.wl-embers span:nth-child(6) { --x: 28%; --duration: 14s; --delay: -18s; }
.wl-embers span:nth-child(7) { --x: 65%; --duration: 21s; --delay: -2s; }
.wl-embers span:nth-child(8) { --x: 5%; --duration: 15s; --delay: -5s; }
.wl-embers span:nth-child(9) { --x: 42%; --duration: 22s; --delay: -8s; }
.wl-embers span:nth-child(10) { --x: 79%; --duration: 16s; --delay: -11s; }
.wl-embers span:nth-child(11) { --x: 19%; --duration: 23s; --delay: -14s; }
.wl-embers span:nth-child(12) { --x: 56%; --duration: 17s; --delay: -17s; }
.wl-embers span:nth-child(13) { --x: 93%; --duration: 11s; --delay: -1s; }
.wl-embers span:nth-child(14) { --x: 33%; --duration: 18s; --delay: -4s; }