/* ============================================================================
   DEADLY WORLD — opening title sequence and realm gate
   ----------------------------------------------------------------------------
   Two stages on #dwGate, driven by gate.js:

     stage-title  the title card: letterbox bars, an igniting emblem, the
                  wordmark rising letter by letter, a hairline that fills
     stage-pick   the picker: backdrop revealed, logo docked to the top, the
                  two realm slabs rising

   Only transform and opacity animate, so the whole sequence stays on the
   compositor. Tokens come from style.css; hairlines are warmed to gold here
   rather than globally.
   ========================================================================== */

.dw-gate{
    --rule:rgba(198,158,74,.24);
    --rule-lit:rgba(240,206,120,.5);
    position:fixed;inset:0;z-index:200;
    background:#04050a;color:var(--text);
    overflow:hidden;
    isolation:isolate;
}
.dw-gate[hidden]{display:none}

body.dw-gate-on{
    overflow:hidden;
    height:100%;
}
body.dw-gate-on > .vignette,
body.dw-gate-on > .grid-overlay,
body.dw-gate-on > header,
body.dw-gate-on > main,
body.dw-gate-on > footer{
    visibility:hidden;
}

/* ── Backdrop ─────────────────────────────────────────────────────────────
   Two plates cross-fade under the picker so the background never sits still. */
.dw-gate-reel{position:absolute;inset:0;z-index:0}
.dw-gate-shot{
    position:absolute;inset:-10%;
    background:#04050a center/cover no-repeat;
    opacity:0;
    transform:scale(1.08);
    will-change:transform,opacity;
    transition:opacity 1.4s ease;
}
.dw-gate-shot-a{background-image:url('../img/gate/intro-1.jpg')}
.dw-gate-shot-b{background-image:url('../img/gate/intro-2.jpg')}

/* Title card: the plate is a dim suggestion behind the black, nothing more. */
.dw-gate.stage-title .dw-gate-shot-a{
    opacity:.20;
    animation:dwGateKen 26s ease-in-out infinite alternate;
}
.dw-gate.stage-pick .dw-gate-shot-a{
    opacity:.46;
    animation:dwGateKen 26s ease-in-out infinite alternate;
}
.dw-gate.stage-pick .dw-gate-shot-b{
    opacity:0;
    animation:dwGateKen2 22s ease-in-out infinite alternate,
              dwGateCross 34s ease-in-out infinite;
}

/* Ember light: a coal glow from below, gold rim from above. */
.dw-gate-veil{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
        linear-gradient(180deg, rgba(4,5,10,.72) 0%, rgba(4,5,10,.42) 38%, rgba(4,5,10,.97) 100%),
        radial-gradient(58% 42% at 50% 0%, rgba(232,189,94,.16), transparent 60%),
        radial-gradient(78% 56% at 50% 104%, rgba(179,49,26,.34), transparent 72%);
}
.dw-gate.stage-pick .dw-gate-veil{
    background:
        linear-gradient(180deg, rgba(4,5,10,.86) 0%, rgba(4,5,10,.5) 40%, rgba(4,5,10,.96) 100%),
        radial-gradient(58% 42% at 50% 0%, rgba(232,189,94,.12), transparent 58%),
        radial-gradient(78% 56% at 50% 104%, rgba(179,49,26,.28), transparent 72%);
}

.dw-gate-dust{
    position:absolute;inset:0;z-index:3;
    width:100%;height:100%;pointer-events:none;
}

/* ── Letterbox bars ──────────────────────────────────────────────────────
   Closed for the title card, then they retract. Pure scaleY, no reflow. */
.dw-gate-bar{
    position:absolute;left:0;right:0;z-index:7;
    height:12vh;background:#04050a;
    pointer-events:none;
    transform-origin:center top;
    transition:transform 1s var(--ease);
}
.dw-gate-bar-t{top:0;transform-origin:center top}
.dw-gate-bar-b{bottom:0;transform-origin:center bottom}
.dw-gate-bar::after{
    content:'';position:absolute;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(232,189,94,.42),transparent);
    opacity:0;transition:opacity .6s ease;
}
.dw-gate-bar-t::after{bottom:0}
.dw-gate-bar-b::after{top:0}
.dw-gate.stage-title .dw-gate-bar{transform:scaleY(1)}
.dw-gate.stage-title .dw-gate-bar::after{opacity:1}
.dw-gate.stage-pick .dw-gate-bar{transform:scaleY(0)}

/* ── Title card ──────────────────────────────────────────────────────────── */
.dw-gate-logo{
    position:absolute;left:50%;top:46%;
    transform:translate(-50%,-50%);
    z-index:5;text-align:center;width:min(94vw,900px);
    opacity:0;
}
.dw-gate.stage-title .dw-gate-logo{opacity:1}
.dw-gate.stage-pick .dw-gate-logo{
    opacity:1;
    top:max(22px, env(safe-area-inset-top));
    transform:translate(-50%,0);
    transition:top .8s var(--ease), transform .8s var(--ease);
}

/* The emblem strikes in, then keeps a slow ember breath. */
.dw-gate-emblem{
    position:relative;width:112px;height:112px;margin:0 auto 22px;
    display:flex;align-items:center;justify-content:center;
}
.dw-gate-emblem img{
    width:88px;height:88px;object-fit:contain;display:block;
    filter:drop-shadow(0 0 18px rgba(232,189,94,.5)) drop-shadow(0 10px 26px rgba(0,0,0,.7));
}
/* Two counter-rotating rings of gold, struck open from nothing. */
.dw-gate-emblem::before,
.dw-gate-emblem::after{
    content:'';position:absolute;inset:0;
    border:1px solid rgba(232,189,94,.55);
    transform:rotate(45deg) scale(.2);
    opacity:0;
}
.dw-gate-emblem::after{inset:14px;border-color:rgba(255,106,42,.4)}
.dw-gate.stage-title .dw-gate-emblem img{animation:dwSigilIn 1s var(--ease) both}
.dw-gate.stage-title .dw-gate-emblem::before{animation:dwRingIn .9s var(--ease) .1s both, dwRingSpin 34s linear 1s infinite}
.dw-gate.stage-title .dw-gate-emblem::after{animation:dwRingIn .9s var(--ease) .22s both, dwRingSpinBack 26s linear 1s infinite}
.dw-gate.stage-pick .dw-gate-emblem{width:46px;height:46px;margin:0 auto 8px;transition:width .7s var(--ease),height .7s var(--ease),margin .7s var(--ease)}
.dw-gate.stage-pick .dw-gate-emblem img{
    width:40px;height:40px;
    animation:dwEmblemBreath 4.6s ease-in-out infinite;
}
@keyframes dwEmblemBreath{
    0%,100%{filter:drop-shadow(0 0 8px rgba(232,189,94,.28))}
    50%{filter:drop-shadow(0 0 20px rgba(232,189,94,.65))}
}
.dw-gate.stage-pick .dw-gate-emblem::before,
.dw-gate.stage-pick .dw-gate-emblem::after{opacity:0}

/* The wordmark. Each letter is its own span so it can rise on a stagger. */
.dw-gate-word{
    display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;
    font-family:var(--f-display);font-weight:900;
    font-size:clamp(30px, 8.4vw, 92px);
    letter-spacing:.14em;line-height:1;
    text-transform:uppercase;
}
.dw-gate-word i{
    display:inline-block;font-style:normal;
    background:var(--au-sheen);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 0 rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(232,189,94,.34));
    opacity:0;transform:translateY(.42em);
}
.dw-gate-word i.sp{width:.34em}
.dw-gate.stage-title .dw-gate-word i{animation:dwLetterIn .72s var(--ease) both}
.dw-gate.stage-pick .dw-gate-word{
    font-size:17px;letter-spacing:.3em;
    transition:font-size .7s var(--ease), letter-spacing .7s var(--ease);
}
.dw-gate.stage-pick .dw-gate-word i{opacity:1;transform:none;animation:none}

/* Hairline that opens under the wordmark, with a diamond at the centre. */
.dw-gate-rule{
    position:relative;height:1px;margin:20px auto 0;width:min(78vw,560px);
    background:linear-gradient(90deg,transparent,rgba(232,189,94,.7),transparent);
    transform:scaleX(0);
}
.dw-gate-rule::after{
    content:'';position:absolute;left:50%;top:50%;
    width:7px;height:7px;margin:-4px 0 0 -4px;
    background:var(--au-lit);transform:rotate(45deg);
    box-shadow:0 0 14px rgba(232,189,94,.7);
}
.dw-gate.stage-title .dw-gate-rule{animation:dwRuleOpen .9s var(--ease) .5s both}
.dw-gate.stage-pick .dw-gate-rule{display:none}

.dw-gate-sub{
    display:block;margin-top:16px;
    font-family:var(--f-mono);font-size:clamp(9px,1.5vw,12px);letter-spacing:.42em;
    text-transform:uppercase;color:var(--au-lit);
    opacity:0;
}
.dw-gate.stage-title .dw-gate-sub{animation:dwFadeUp .8s ease 1.05s both}
.dw-gate.stage-pick .dw-gate-sub{display:none}

/* Progress hairline: how long the title card has left. Sits clear of the
   letterbox bar, which is 12vh tall and painted above it. */
.dw-gate-load{
    position:absolute;left:50%;bottom:calc(12vh + 44px);
    transform:translateX(-50%);
    width:min(46vw,240px);height:2px;z-index:9;
    background:rgba(232,189,94,.14);
    opacity:0;
}
.dw-gate-load i{
    display:block;height:100%;width:100%;
    background:linear-gradient(90deg,var(--au),var(--au-hi));
    box-shadow:0 0 12px rgba(232,189,94,.6);
    transform-origin:left center;transform:scaleX(0);
}
html[dir="rtl"] .dw-gate-load i{transform-origin:right center}
.dw-gate.stage-title .dw-gate-load{opacity:1;transition:opacity .4s ease .3s}
.dw-gate.stage-title .dw-gate-load i{animation:dwLoad 2.4s linear .2s both}
.dw-gate.stage-pick .dw-gate-load{opacity:0;pointer-events:none}

/* ── Picker ──────────────────────────────────────────────────────────────── */
.dw-gate-pick{
    position:absolute;inset:0;z-index:5;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:0 max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    opacity:0;pointer-events:none;
    transform:translateY(20px);
}
.dw-gate.stage-pick .dw-gate-pick{
    opacity:1;pointer-events:auto;
    transform:translateY(0);
    transition:opacity .7s ease, transform .7s var(--ease);
}
.dw-gate-kicker{
    text-align:center;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.38em;
    text-transform:uppercase;color:var(--au-lit);
    margin:0 0 18px;
}
.dw-gate-kicker::before,
.dw-gate-kicker::after{
    content:'';display:inline-block;vertical-align:middle;
    width:clamp(18px,7vw,64px);height:1px;margin:0 14px;
    background:linear-gradient(90deg,transparent,rgba(232,189,94,.6));
}
.dw-gate-kicker::after{background:linear-gradient(90deg,rgba(232,189,94,.6),transparent)}
.dw-gate-cards{
    width:100%;max-width:1120px;margin:0 auto;
    display:grid;grid-template-columns:1fr 1fr;gap:20px;
}

/* A realm slab: photo, scrim, gold frame, ember spine. */
.dw-gate-card{
    position:relative;overflow:hidden;isolation:isolate;
    min-height:min(48vh, 440px);
    border:1px solid var(--rule);
    background:#04050a;
    display:flex;flex-direction:column;justify-content:flex-end;
    text-decoration:none;color:inherit;
    transform:translateY(26px);opacity:0;
}
.dw-gate.stage-pick .dw-gate-card{
    opacity:1;transform:translateY(0);
    transition:transform .6s var(--ease), opacity .6s ease,
               border-color .25s ease, box-shadow .35s var(--ease);
}
.dw-gate.stage-pick .dw-gate-card:nth-child(1){transition-delay:.08s}
.dw-gate.stage-pick .dw-gate-card:nth-child(2){transition-delay:.2s}
.dw-gate-card.is-live:hover{border-color:var(--rule-lit);box-shadow:var(--glow-au-lit)}
.dw-gate-card.is-live:focus-visible{border-color:var(--au-hi);box-shadow:var(--glow-au-lit)}

/* Spine down the leading edge: jade for the live realm, steel for the locked. */
.dw-gate-card::before{
    content:'';position:absolute;inset:0 auto auto 0;width:3px;height:100%;z-index:4;
    background:var(--au);
}
.dw-gate-card.is-live::before{
    background:linear-gradient(180deg,var(--jade),#8fd4b0,var(--jade));
    box-shadow:0 0 16px rgba(77,138,106,.6);
}
.dw-gate-card.is-soon::before{background:linear-gradient(180deg,#3a4756,#6b7b8c,#3a4756)}

/* Corner brackets, the same ornament the slabs on the homepage use. Drawn on
   an overlay so the card's own ::before stays free for the spine. */
.dw-gate-card-frame{position:absolute;inset:0;z-index:5;pointer-events:none}
.dw-gate-card-frame::before,
.dw-gate-card-frame::after{
    content:'';position:absolute;width:18px;height:18px;
    border:1px solid var(--au-lit);opacity:.5;transition:opacity .25s ease;
}
.dw-gate-card-frame::before{
    top:0;inset-inline-start:0;border-inline-end:none;border-bottom:none;
}
.dw-gate-card-frame::after{
    bottom:0;inset-inline-end:0;border-inline-start:none;border-top:none;
}
.dw-gate-card:hover .dw-gate-card-frame::before,
.dw-gate-card:hover .dw-gate-card-frame::after{opacity:1}

.dw-gate-card-bg{
    position:absolute;inset:0;z-index:0;
    background:center/cover no-repeat;
    transform:scale(1.04);
    transition:transform .9s var(--ease), filter .5s ease;
    will-change:transform;
}
.dw-gate-card.is-live:hover .dw-gate-card-bg{transform:scale(1.1)}
.dw-gate-card-bg-eu{background-image:url('../img/gate/eu-realm.jpg')}
.dw-gate-card-bg-us{background-image:url('../img/gate/us-realm.jpg');filter:saturate(.35) brightness(.72)}
.dw-gate-card-shade{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
        linear-gradient(180deg, rgba(4,5,10,.1) 0%, rgba(4,5,10,.5) 44%, rgba(4,5,10,.97) 100%),
        radial-gradient(70% 50% at 50% 100%, rgba(179,49,26,.2), transparent 70%);
}
/* Gold catch-light crossing the slab on hover. */
.dw-gate-card-sheen{
    position:absolute;top:-20%;bottom:-20%;width:44%;left:-55%;z-index:2;
    pointer-events:none;transform:skewX(-12deg);
    background:linear-gradient(100deg,transparent,rgba(255,246,222,.16),transparent);
    transition:left .8s var(--ease);
}
.dw-gate-card.is-live:hover .dw-gate-card-sheen{left:120%}

.dw-gate-card-body{position:relative;z-index:3;padding:24px 24px 22px}
.dw-gate-card-top{
    display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;
}
.dw-gate-flag{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--text-2);
}
.dw-gate-flag svg{display:none}
.dw-gate-badge{
    font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;padding:4px 10px;
    border:1px solid var(--rule);
}
.dw-gate-badge.live{color:#8fd4b0;border-color:rgba(77,138,106,.55);background:rgba(77,138,106,.14)}
.dw-gate-badge.soon{color:#a9b6c5;border-color:rgba(143,163,184,.4);background:rgba(143,163,184,.1)}
.dw-gate-card h2{
    margin:0 0 8px;font-size:clamp(24px, 3.2vw, 34px);
    letter-spacing:.1em;text-transform:uppercase;color:#fff;
    text-shadow:0 4px 26px rgba(0,0,0,.7);
}
.dw-gate-card.is-live h2{
    background:var(--au-sheen);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    filter:drop-shadow(0 2px 14px rgba(0,0,0,.6));
}
.dw-gate-card p{
    margin:0 0 16px;color:var(--text-2);font-size:15px;line-height:1.55;
}
.dw-gate-online{
    display:inline-flex;align-items:center;gap:8px;
    font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;
    color:var(--text-3);text-transform:uppercase;margin-bottom:16px;
    padding:6px 12px;border:1px solid var(--rule);background:rgba(4,5,10,.5);
}
.dw-gate-dot{
    width:8px;height:8px;border-radius:50%;background:#25D366;
    box-shadow:0 0 0 0 rgba(37,211,102,.55);
    animation:dwGatePulse 1.8s ease-out infinite;
}
.dw-gate-online strong{color:#fff;font-weight:500}
.dw-gate-cta{
    min-height:50px;padding:15px 30px;font-size:12px;letter-spacing:.18em;
}
.dw-gate-ghost{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:50px;padding:15px 30px;
    border:1px dashed rgba(143,163,184,.4);color:var(--text-3);
    font-family:var(--f-display);letter-spacing:.18em;text-transform:uppercase;font-size:12px;
    cursor:default;
}
/* Keycap hint: press 1 or 2 to pick a realm. */
.dw-gate-key{
    position:absolute;z-index:5;
    top:16px;inset-inline-end:16px;
    width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;
    border:1px solid rgba(232,189,94,.45);background:rgba(4,5,10,.66);
    font-family:var(--f-mono);font-size:11px;color:var(--au-lit);
}

.dw-gate-hint{
    text-align:center;margin:16px 0 0;
    font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--text-3);
}

/* Countdown tiles, shared with the US coming-soon screen. */
.dw-gate-cd{
    display:grid;grid-template-columns:repeat(4, minmax(0,1fr));
    gap:8px;margin:0 0 16px;max-width:300px;
}
.dw-gate-cd > div{
    background:rgba(4,5,10,.6);border:1px solid var(--rule);padding:8px 4px;
}
.dw-gate-cd b{
    display:block;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
    font-size:21px;color:var(--au-hi);text-align:center;line-height:1.15;
}
.dw-gate-cd span{
    display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.14em;
    color:var(--text-3);text-align:center;text-transform:uppercase;
}

.dw-gate-skip{
    position:absolute;z-index:8;
    top:max(calc(12vh + 16px), 16px);
    inset-inline-end:max(16px, env(safe-area-inset-right));
    background:rgba(4,5,10,.5);border:1px solid var(--rule);color:var(--text-2);
    font-family:var(--f-display);font-size:11px;letter-spacing:.2em;
    text-transform:uppercase;padding:10px 16px;cursor:pointer;
    min-height:40px;
    transition:color .2s ease,border-color .2s ease;
}
.dw-gate-skip:hover{color:var(--au-hi);border-color:var(--rule-lit)}
.dw-gate.stage-pick .dw-gate-skip{opacity:0;pointer-events:none}

.dw-gate.is-exit{
    opacity:0;transition:opacity .45s ease;
    pointer-events:none;
}

/* ── US coming-soon page (after US is chosen) ───────────────────────────── */
.dw-us-soon{
    position:relative;min-height:calc(100vh - 88px);
    display:flex;align-items:flex-end;justify-content:center;
    overflow:hidden;margin:0;
}
.dw-us-soon-bg{
    position:absolute;inset:0;z-index:0;
    background:#04050a url('../img/gate/us-realm.jpg') center/cover no-repeat;
    transform:scale(1.05);
    animation:dwGateKen 24s ease-in-out infinite alternate;
}
.dw-us-soon-veil{
    position:absolute;inset:0;z-index:1;
    background:
        linear-gradient(180deg, rgba(4,5,10,.4) 0%, rgba(4,5,10,.95) 100%),
        radial-gradient(70% 50% at 50% 104%, rgba(179,49,26,.24), transparent 70%);
}
.dw-us-soon-inner{
    position:relative;z-index:2;width:100%;max-width:720px;
    padding:48px 20px 64px;text-align:center;
}
.dw-us-soon-inner h1{
    font-size:clamp(28px, 5vw, 48px);letter-spacing:.14em;
    text-transform:uppercase;color:#fff;margin:0 0 12px;
}
.dw-us-soon-inner p{color:var(--text-2);font-size:17px;line-height:1.7;margin:0 0 28px}
.dw-us-soon .dw-gate-cd{margin:0 auto 28px;max-width:380px}
.dw-us-soon .dw-cta-row{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* ── Keyframes ──────────────────────────────────────────────────────────── */
@keyframes dwGateKen{
    from{transform:scale(1.04) translate3d(0,0,0)}
    to{transform:scale(1.12) translate3d(-2%,-1%,0)}
}
@keyframes dwGateKen2{
    from{transform:scale(1.1) translate3d(2%,0,0)}
    to{transform:scale(1.04) translate3d(-1%,1%,0)}
}
@keyframes dwGateCross{
    0%,42%{opacity:0}
    58%,92%{opacity:.4}
    100%{opacity:0}
}
@keyframes dwSigilIn{
    from{opacity:0;transform:scale(1.5)}
    to{opacity:1;transform:scale(1)}
}
@keyframes dwRingIn{
    from{opacity:0;transform:rotate(45deg) scale(.2)}
    to{opacity:1;transform:rotate(45deg) scale(1)}
}
@keyframes dwRingSpin{
    from{transform:rotate(45deg) scale(1)}
    to{transform:rotate(405deg) scale(1)}
}
@keyframes dwRingSpinBack{
    from{transform:rotate(45deg) scale(1)}
    to{transform:rotate(-315deg) scale(1)}
}
@keyframes dwLetterIn{
    from{opacity:0;transform:translateY(.42em)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes dwRuleOpen{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}
@keyframes dwFadeUp{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes dwLoad{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}
@keyframes dwGatePulse{
    0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
    70%{box-shadow:0 0 0 10px rgba(37,211,102,0)}
    100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

html[dir="rtl"] .dw-gate-card::before{inset:0 0 auto auto}

@media (max-width: 860px){
    .dw-gate-cards{grid-template-columns:1fr;gap:14px}
    .dw-gate-card{min-height:230px}
    .dw-gate-pick{justify-content:flex-end}
    .dw-gate.stage-pick .dw-gate-logo{display:none}
    .dw-gate-bar{height:7vh}
    .dw-gate-load{bottom:calc(7vh + 32px)}
    .dw-gate-key{display:none}
}
@media (max-width: 480px){
    .dw-gate-emblem{width:84px;height:84px;margin-bottom:16px}
    .dw-gate-emblem img{width:66px;height:66px}
    .dw-gate-card h2{font-size:22px}
    .dw-gate-cta,.dw-gate-ghost{width:100%}
}
@media (prefers-reduced-motion: reduce){
    .dw-gate-shot,
    .dw-gate-logo,
    .dw-gate-emblem,
    .dw-gate-emblem img,
    .dw-gate-emblem::before,
    .dw-gate-emblem::after,
    .dw-gate-word i,
    .dw-gate-rule,
    .dw-gate-sub,
    .dw-gate-load i,
    .dw-gate-bar,
    .dw-gate-pick,
    .dw-gate-card,
    .dw-gate-card-bg,
    .dw-gate-card-sheen,
    .dw-us-soon-bg,
    .dw-gate-dot{animation:none;transition:none}
    .dw-gate-card{opacity:1;transform:none}
    .dw-gate-word i{opacity:1;transform:none}
    .dw-gate-rule{transform:scaleX(1)}
}

/* ── Realm chip in the site header ─────────────────────────────────────── */
.dw-realm-chip{
    display:inline-flex;align-items:center;gap:8px;
    min-height:36px;padding:6px 12px;flex:none;white-space:nowrap;
    border:1px solid rgba(198,158,74,.3);color:var(--au-hi);
    background:rgba(194,145,47,.07);
    font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
    text-transform:uppercase;text-decoration:none;
    transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.dw-realm-chip:hover{border-color:rgba(240,206,120,.55);color:#fff;background:rgba(194,145,47,.14)}
.dw-realm-chip .dw-gate-dot{width:6px;height:6px}
@media(max-width:1400px){
    .dw-realm-chip-change{display:none}
}

/* ── Download hero ─────────────────────────────────────────────────────── */
.dw-dl-hero{
    position:relative;overflow:hidden;margin-bottom:28px;
    border:1px solid var(--rule);background:#000;
}
.dw-dl-hero-bg{
    position:absolute;inset:0;
    background:#000 url('../img/download_banner.jpg') center top / cover no-repeat;
    transform:scale(1.05);
    animation:dwGateKen 24s ease-in-out infinite alternate;
    opacity:.88;
}
.dw-dl-hero-inner{
    position:relative;z-index:1;
    background:
        linear-gradient(180deg, transparent 12%, rgba(4,5,10,.96)),
        radial-gradient(70% 60% at 50% 110%, rgba(179,49,26,.28), transparent 70%);
    padding:28px 28px 24px;
    min-height:240px;
    display:flex;flex-direction:column;justify-content:flex-end;
}
@media (prefers-reduced-motion: reduce){
    .dw-dl-hero-bg{animation:none}
}