/* ==========================================================================
   BENDER FONT FACE INITIALIZATION
   ========================================================================== */
@font-face { font-family: 'Bender'; src: url('fonts/bender/bender.OTF') format('opentype'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Bender'; src: url('fonts/bender/bender-bold.OTF') format('opentype'); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Bender'; src: url('fonts/bender/bender-black.OTF') format('opentype'); font-weight: 900; font-style: normal; }
@font-face { font-family: 'Bender'; src: url('fonts/bender/bender-light.OTF') format('opentype'); font-weight: 300; font-style: normal; }

:root {
    --tarkov-gold: #b4a072;     
    --tarkov-gold-dim: #8b7a54;
    --tarkov-bg: #090909;       
    --panel-base: #141414;      
    --panel-border: #2c2b29;    
    --text-primary: #d1cfcb;    
    --text-muted: #6e6d6b;      
    --status-warning: #b8463d;
    --glow-gold: rgba(180, 160, 114, 0.4);
    --glow-gold-heavy: rgba(180, 160, 114, 0.8);
}

@keyframes scanlinesDown { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@keyframes bgParallax1 { 0% { background-position: 0% 0%; } 100% { background-position: 0% 200%; } }
@keyframes bgParallax2 { 0% { background-position: 50% 100%; transform: scaleY(1); } 50% { background-position: 50% 50%; transform: scaleY(1.05); } 100% { background-position: 50% 0%; transform: scaleY(1); } }
@keyframes bgParallax3 { 0% { background-position: 0% 100%; transform: scaleY(1.1); } 100% { background-position: 0% 0%; transform: scaleY(1.2); } }
@keyframes bgParallax4 { 0% { background-position: 50% 0%; } 100% { background-position: 50% 100%; } }
@keyframes breathePanel { 0%, 100% { box-shadow: inset 0 0 25px rgba(0,0,0,0.9), 0 8px 20px rgba(0,0,0,0.7); } 50% { box-shadow: inset 0 0 45px rgba(0,0,0,1), 0 12px 30px rgba(0,0,0,0.9); border-color: #383734; transform: scaleY(1.002); } }
@keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes float2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes textGlitchCore { 0%, 100% { clip-path: inset(0 0 0 0); transform: translateY(0); } 10% { clip-path: inset(10% 0 80% 0); transform: translateY(3px); } 20% { clip-path: inset(80% 0 5% 0); transform: translateY(-3px); } 30% { clip-path: inset(30% 0 40% 0); transform: translateY(1px); } 40% { clip-path: inset(60% 0 20% 0); transform: translateY(-1px); } 50% { clip-path: inset(15% 0 65% 0); transform: translateY(-2px); } 60% { clip-path: inset(85% 0 10% 0); transform: translateY(2px); } }
@keyframes extremeGlitchRGB { 0%, 100% { text-shadow: 2px 2px 5px rgba(0,0,0,0.8); } 10% { text-shadow: 0 -4px #f00, 0 4px #0ff; } 15% { text-shadow: 0 4px #f00, 0 -4px #0ff; } 20% { text-shadow: 2px 2px 5px rgba(0,0,0,0.8); } }
@keyframes textShineAnim { 0% { background-position: center 200%; } 100% { background-position: center -200%; } }
@keyframes globalScanline { 0% { top: -10vh; } 100% { top: 110vh; } }
@keyframes buttonPulse { 0%, 100% { border-color: var(--panel-border); box-shadow: none; } 50% { border-color: var(--tarkov-gold); box-shadow: inset 0 0 25px rgba(180, 160, 114, 0.3), 0 0 25px rgba(180, 160, 114, 0.3); } }
@keyframes shakeElement { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-2px); } 75% { transform: translateY(2px); } }
@keyframes particleRise { 0% { transform: translateY(100vh) scale(1); } 100% { transform: translateY(-10vh) scale(2); } }

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Bender', sans-serif; user-select: none; }
body { background-color: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; color: var(--text-primary); }

.crt-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03)); background-size: 100% 4px, 6px 100%; z-index: 999; pointer-events: none; mix-blend-mode: overlay; opacity: 0.2; }
.parallax-bg-layer-1 { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: repeating-linear-gradient(45deg, #0a0a0a, #0a0a0a 10px, transparent 10px, transparent 20px); opacity: 0.15; z-index: 1; pointer-events: none; animation: bgParallax1 90s linear infinite; }
.parallax-bg-layer-2 { position: absolute; top: -20%; left: -20%; width: 140%; height: 140%; background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,0.9) 100%); z-index: 2; pointer-events: none; animation: bgParallax2 15s ease-in-out infinite; }
.parallax-bg-layer-3 { position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="%23b4a072" opacity="0.1"/></svg>'); z-index: 3; pointer-events: none; animation: bgParallax3 40s infinite alternate; }
.parallax-bg-layer-4 { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background: linear-gradient(to bottom, transparent, rgba(180, 160, 114, 0.03), transparent); z-index: 4; opacity: 0.6; pointer-events: none; animation: bgParallax4 8s infinite linear; }

.particle-system { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.particle-system div { position: absolute; bottom: -10px; width: 2px; height: 2px; background: var(--tarkov-gold); border-radius: 50%; box-shadow: 0 0 5px var(--tarkov-gold); opacity: 0.8; animation: particleRise 10s infinite linear; }
.p1 { left: 10%; animation-delay: 0s; animation-duration: 12s; } .p2 { left: 25%; animation-delay: 2s; animation-duration: 9s; } .p3 { left: 40%; animation-delay: 5s; animation-duration: 15s; } .p4 { left: 55%; animation-delay: 1s; animation-duration: 11s; } .p5 { left: 70%; animation-delay: 7s; animation-duration: 14s; } .p6 { left: 85%; animation-delay: 3s; animation-duration: 10s; } .p7 { left: 95%; animation-delay: 8s; animation-duration: 13s; } .p8 { left: 15%; animation-delay: 4s; animation-duration: 8s; } .p9 { left: 45%; animation-delay: 6s; animation-duration: 16s; } .p10{ left: 75%; animation-delay: 9s; animation-duration: 12s; }

.global-scanner { position: absolute; left: 0; width: 100%; height: 10vh; background: linear-gradient(to bottom, transparent, rgba(180,160,114,0.05), transparent); z-index: 998; pointer-events: none; animation: globalScanline 6s infinite linear; }
.launcher-window { width: 1920px; height: 1080px; max-width: none; max-height: none; background: radial-gradient(circle at 50% 10%, #1a1a1a 0%, #050505 100%), #050505; position: relative; border: 1px solid #1a1a1a; box-shadow: 0 0 150px rgba(0,0,0,1), inset 0 0 200px rgba(0,0,0,0.95); display: flex; flex-direction: column; overflow: hidden; z-index: 10; }

.windows-title-bar { height: 28px; background: #070707; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--panel-border); z-index: 100; }
.drag-region { padding-left: 15px; font-size: 11px; color: var(--text-muted); letter-spacing: 2px; flex-grow: 1; }
.window-controls { display: flex; height: 100%; }
.window-controls button { background: transparent; border: none; border-left: 1px solid var(--panel-border); color: var(--text-muted); width: 40px; height: 100%; cursor: pointer; font-size: 12px; transition: all 0.2s ease; position: relative; }
.window-controls .btn-minimize:hover { background: rgba(180, 160, 114, 0.2); color: var(--tarkov-gold); text-shadow: 0 0 8px var(--tarkov-gold); box-shadow: inset 0 0 15px rgba(180, 160, 114, 0.4); }
.window-controls .btn-close:hover { background: rgba(255, 0, 0, 0.8); color: #fff; text-shadow: 0 0 8px #fff; box-shadow: inset 0 0 15px rgba(255, 0, 0, 1), 0 0 15px rgba(255, 0, 0, 0.6); }

.panel { background: linear-gradient(145deg, rgba(22, 22, 22, 0.85) 0%, rgba(12, 12, 12, 0.95) 100%); border-radius: 2px; padding: 15px; position: relative; box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.9), inset 1px 1px 0 rgba(255, 255, 255, 0.02), 0 8px 20px rgba(0,0,0,0.7); z-index: 10; overflow: hidden; }
.panel-breathe { animation: breathePanel 6s ease-in-out infinite alternate; }
.float-anim-1 { animation: float1 8s infinite ease-in-out; } 
.panel::after { content: ''; position: absolute; inset: 4px; pointer-events: none; background-image: radial-gradient(circle at 3px 3px, #2a2a2a 2px, transparent 3px), radial-gradient(circle at calc(100% - 3px) 3px, #2a2a2a 2px, transparent 3px), radial-gradient(circle at 3px calc(100% - 3px), #2a2a2a 2px, transparent 3px), radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), #2a2a2a 2px, transparent 3px); z-index: 10; opacity: 0.6; }
.panel-scanner { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: rgba(180, 160, 114, 0.2); box-shadow: 0 0 10px rgba(180, 160, 114, 0.5); z-index: 20; pointer-events: none; animation: scanlinesDown 3s infinite linear; }
.panel-scanner.fast { animation: scanlinesDown 1.5s infinite linear; }
.metallic-border { border: 1px solid var(--panel-border); position: relative; }
.text-shine { background: linear-gradient(180deg, var(--tarkov-gold) 0%, #fff 50%, var(--tarkov-gold) 100%); background-size: auto 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: textShineAnim 6s linear infinite; }
.pulse-border-heavy::before { content: ''; position: absolute; inset: -2px; border: 2px solid var(--tarkov-gold); opacity: 0.5; pointer-events: none; animation: buttonPulse 1.5s infinite; }
.shake-on-hover:hover { animation: shakeElement 0.3s infinite; }
.hover-lift { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.hover-lift:hover { transform: scaleY(1.01); z-index: 20; }

/* GATEWAY SPECIFICS */
.login-wrapper { position: relative; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 40px; margin-top: -50px; }
.login-branding { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* The O of OASIS, at the placeholder box's own 100x100. index.css gives
   .glitch-text font-size 82px, letter-spacing 25px and margin-left 25px for
   the heading; all three are reset here or a single glyph would be pushed
   right by the margin and left of centre by the trailing letter-space. */
.login-logo-mark {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Bender, sans-serif;
    font-weight: 900;
    font-size: 120px;
    line-height: 1;
    letter-spacing: normal;
    margin-left: 0;
    text-align: center;
    color: #fff;
    border: none;
    background: none;
}

.login-logo-placeholder { width: 100px; height: 100px; border: 1px solid var(--tarkov-gold); position: relative; overflow: hidden; background: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(180,160,114,0.1) 5px, rgba(180,160,114,0.1) 10px); }
.scanning-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--tarkov-gold); box-shadow: 0 0 15px var(--tarkov-gold); animation: scanlinesDown 1s infinite linear; }
.glitch-text { position: relative; font-family: 'Bender', sans-serif; font-weight: 900; font-size: 82px; letter-spacing: 25px; margin-left: 25px; text-align: center;}
.glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; display: flex; align-items: center; justify-content: center;}
.glitch-text::before { color: #0ff; z-index: -1; animation: textGlitchCore 3s infinite reverse; }
.glitch-text::after { color: #f0f; z-index: -2; animation: textGlitchCore 2.5s infinite; }
.extreme-glitch { animation: extremeGlitchRGB 4s infinite; }

.login-panel { width: 450px; padding: 40px 50px; background: rgba(10, 10, 10, 0.95); box-shadow: 0 0 80px rgba(0,0,0,1), inset 0 0 30px rgba(180, 160, 114, 0.1); }
.login-title { text-align: center; font-size: 18px; letter-spacing: 5px; margin-bottom: 30px; border-bottom: 1px solid var(--panel-border); padding-bottom: 15px; font-weight: bold; }
.error-msg { background: rgba(184, 70, 61, 0.1); border: 1px solid var(--status-warning); color: #ff5555; padding: 12px; font-size: 11px; text-align: center; letter-spacing: 1px; text-shadow: 0 0 5px rgba(255,0,0,0.5); margin-bottom: 20px; font-weight: bold; text-transform: uppercase; }

.login-form { display: flex; flex-direction: column; gap: 20px; }
.input-group { display: flex; flex-direction: column; gap: 8px; }
.input-group label { font-size: 11px; color: var(--text-muted); letter-spacing: 2px; font-weight: bold; }
.input-group input { background: #050505; border: 1px solid var(--panel-border); color: var(--tarkov-gold); padding: 15px; font-family: 'Bender', sans-serif; font-size: 18px; outline: none; transition: 0.3s; z-index: 15; position: relative;}
.input-group input:focus { border-color: var(--tarkov-gold); box-shadow: inset 0 0 15px rgba(180,160,114,0.1), 0 0 15px rgba(180,160,114,0.3); outline: none;}

.forgot-pass-container { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: -10px; margin-bottom: 10px;}

.remember-me { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--text-muted); cursor: crosshair; transition: 0.3s; position: relative; z-index: 15; font-weight: bold; letter-spacing: 1px;}
.remember-me:hover { color: var(--tarkov-gold); text-shadow: 0 0 8px var(--glow-gold); }
.remember-me input { display: none; }
.checkmark { width: 12px; height: 12px; border: 1px solid var(--panel-border); background: #050505; display: inline-block; position: relative; transition: 0.3s; }
.remember-me:hover .checkmark { border-color: var(--tarkov-gold); box-shadow: inset 0 0 5px rgba(180,160,114,0.3); }
.remember-me input:checked + .checkmark { background: var(--tarkov-gold); border-color: var(--tarkov-gold); box-shadow: 0 0 10px var(--glow-gold-heavy); }
.remember-me input:checked + .checkmark::after { content: ''; position: absolute; left: 3px; top: 1px; width: 3px; height: 6px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.forgot-pass { font-size: 10px; color: var(--text-muted); cursor: crosshair; transition: 0.3s; position: relative; z-index: 15; font-weight: bold;}
.forgot-pass:hover { color: var(--tarkov-gold); text-shadow: 0 0 8px var(--glow-gold); letter-spacing: 1px; }

.panel-btn { font-size: 14px; font-weight: bold; cursor: crosshair; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); border: 1px solid var(--panel-border); z-index: 10; color: var(--text-primary); background: rgba(20, 20, 20, 0.9); padding: 18px; text-align: center; display: block; width: 100%; letter-spacing: 4px;}
.panel-btn:hover { border-color: var(--tarkov-gold); box-shadow: 0 10px 20px rgba(0,0,0,0.9), inset 0 0 30px rgba(180, 160, 114, 0.3); color: #fff; text-shadow: 0 0 10px var(--glow-gold); transform: scaleY(1.02); }
.btn-sweep { position: relative; overflow: hidden; }
.btn-sweep::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.1), rgba(255,255,255,0)); transition: 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); opacity: 0; pointer-events: none; }
.btn-sweep:hover::after { opacity: 1; left: 100%; }

/* ==========================================================================
   EXTRA 300 UNIQUE 3D ANIMATIONS
   ========================================================================== */
.d3d-system { position: absolute; inset: 0; perspective: 1000px; pointer-events: none; z-index: 2; overflow: hidden; }
.a { position: absolute; width: 2px; height: 2px; background: rgba(180,160,114,0.3); top: 50%; left: 50%; }

@keyframes xa1{to{transform:translate3d(0,10px,1px)}} .a1{animation:xa1 3.1s infinite alternate}
@keyframes xa2{to{transform:translate3d(0,12px,2px)}} .a2{animation:xa2 3.2s infinite alternate}
@keyframes xa3{to{transform:translate3d(0,14px,3px)}} .a3{animation:xa3 3.3s infinite alternate}
@keyframes xa4{to{transform:translate3d(0,16px,4px)}} .a4{animation:xa4 3.4s infinite alternate}
@keyframes xa5{to{transform:translate3d(0,18px,5px)}} .a5{animation:xa5 3.5s infinite alternate}
@keyframes xa6{to{transform:translate3d(0,20px,6px)}} .a6{animation:xa6 3.6s infinite alternate}
@keyframes xa7{to{transform:translate3d(0,22px,7px)}} .a7{animation:xa7 3.7s infinite alternate}
@keyframes xa8{to{transform:translate3d(0,24px,8px)}} .a8{animation:xa8 3.8s infinite alternate}
@keyframes xa9{to{transform:translate3d(0,26px,9px)}} .a9{animation:xa9 3.9s infinite alternate}
@keyframes xa10{to{transform:translate3d(0,28px,10px)}} .a10{animation:xa10 4.0s infinite alternate}
@keyframes xa11{to{transform:translate3d(0,30px,11px)}} .a11{animation:xa11 4.1s infinite alternate}
@keyframes xa12{to{transform:translate3d(0,32px,12px)}} .a12{animation:xa12 4.2s infinite alternate}
@keyframes xa13{to{transform:translate3d(0,34px,13px)}} .a13{animation:xa13 4.3s infinite alternate}
@keyframes xa14{to{transform:translate3d(0,36px,14px)}} .a14{animation:xa14 4.4s infinite alternate}
@keyframes xa15{to{transform:translate3d(0,38px,15px)}} .a15{animation:xa15 4.5s infinite alternate}
@keyframes xa16{to{transform:translate3d(0,40px,16px)}} .a16{animation:xa16 4.6s infinite alternate}
@keyframes xa17{to{transform:translate3d(0,42px,17px)}} .a17{animation:xa17 4.7s infinite alternate}
@keyframes xa18{to{transform:translate3d(0,44px,18px)}} .a18{animation:xa18 4.8s infinite alternate}
@keyframes xa19{to{transform:translate3d(0,46px,19px)}} .a19{animation:xa19 4.9s infinite alternate}
@keyframes xa20{to{transform:translate3d(0,48px,20px)}} .a20{animation:xa20 5.0s infinite alternate}
@keyframes xa21{to{transform:translate3d(0,50px,21px)}} .a21{animation:xa21 5.1s infinite alternate}
@keyframes xa22{to{transform:translate3d(0,-10px,22px)}} .a22{animation:xa22 3.1s infinite alternate}
@keyframes xa23{to{transform:translate3d(0,-12px,23px)}} .a23{animation:xa23 3.2s infinite alternate}
@keyframes xa24{to{transform:translate3d(0,-14px,24px)}} .a24{animation:xa24 3.3s infinite alternate}
@keyframes xa25{to{transform:translate3d(0,-16px,25px)}} .a25{animation:xa25 3.4s infinite alternate}
@keyframes xa26{to{transform:translate3d(0,-18px,26px)}} .a26{animation:xa26 3.5s infinite alternate}
@keyframes xa27{to{transform:translate3d(0,-20px,27px)}} .a27{animation:xa27 3.6s infinite alternate}
@keyframes xa28{to{transform:translate3d(0,-22px,28px)}} .a28{animation:xa28 3.7s infinite alternate}
@keyframes xa29{to{transform:translate3d(0,-24px,29px)}} .a29{animation:xa29 3.8s infinite alternate}
@keyframes xa30{to{transform:translate3d(0,-26px,30px)}} .a30{animation:xa30 3.9s infinite alternate}
@keyframes xa31{to{transform:translate3d(0,-28px,31px)}} .a31{animation:xa31 4.0s infinite alternate}
@keyframes xa32{to{transform:translate3d(0,-30px,32px)}} .a32{animation:xa32 4.1s infinite alternate}
@keyframes xa33{to{transform:translate3d(0,-32px,33px)}} .a33{animation:xa33 4.2s infinite alternate}
@keyframes xa34{to{transform:translate3d(0,-34px,34px)}} .a34{animation:xa34 4.3s infinite alternate}
@keyframes xa35{to{transform:translate3d(0,-36px,35px)}} .a35{animation:xa35 4.4s infinite alternate}
@keyframes xa36{to{transform:translate3d(0,-38px,36px)}} .a36{animation:xa36 4.5s infinite alternate}
@keyframes xa37{to{transform:translate3d(0,-40px,37px)}} .a37{animation:xa37 4.6s infinite alternate}
@keyframes xa38{to{transform:translate3d(0,-42px,38px)}} .a38{animation:xa38 4.7s infinite alternate}
@keyframes xa39{to{transform:translate3d(0,-44px,39px)}} .a39{animation:xa39 4.8s infinite alternate}
@keyframes xa40{to{transform:translate3d(0,-46px,40px)}} .a40{animation:xa40 4.9s infinite alternate}
@keyframes xa41{to{transform:translate3d(0,-48px,41px)}} .a41{animation:xa41 5.0s infinite alternate}
@keyframes xa42{to{transform:translate3d(0,-50px,42px)}} .a42{animation:xa42 5.1s infinite alternate}
@keyframes xa43{to{transform:translate3d(0,10px,-1px)}} .a43{animation:xa43 3.1s infinite alternate}
@keyframes xa44{to{transform:translate3d(0,12px,-2px)}} .a44{animation:xa44 3.2s infinite alternate}
@keyframes xa45{to{transform:translate3d(0,14px,-3px)}} .a45{animation:xa45 3.3s infinite alternate}
@keyframes xa46{to{transform:translate3d(0,16px,-4px)}} .a46{animation:xa46 3.4s infinite alternate}
@keyframes xa47{to{transform:translate3d(0,18px,-5px)}} .a47{animation:xa47 3.5s infinite alternate}
@keyframes xa48{to{transform:translate3d(0,20px,-6px)}} .a48{animation:xa48 3.6s infinite alternate}
@keyframes xa49{to{transform:translate3d(0,22px,-7px)}} .a49{animation:xa49 3.7s infinite alternate}
@keyframes xa50{to{transform:translate3d(0,24px,-8px)}} .a50{animation:xa50 3.8s infinite alternate}
@keyframes xa51{to{transform:translate3d(0,26px,-9px)}} .a51{animation:xa51 3.9s infinite alternate}
@keyframes xa52{to{transform:translate3d(0,28px,-10px)}} .a52{animation:xa52 4.0s infinite alternate}
@keyframes xa53{to{transform:translate3d(0,30px,-11px)}} .a53{animation:xa53 4.1s infinite alternate}
@keyframes xa54{to{transform:translate3d(0,32px,-12px)}} .a54{animation:xa54 4.2s infinite alternate}
@keyframes xa55{to{transform:translate3d(0,34px,-13px)}} .a55{animation:xa55 4.3s infinite alternate}
@keyframes xa56{to{transform:translate3d(0,36px,-14px)}} .a56{animation:xa56 4.4s infinite alternate}
@keyframes xa57{to{transform:translate3d(0,38px,-15px)}} .a57{animation:xa57 4.5s infinite alternate}
@keyframes xa58{to{transform:translate3d(0,40px,-16px)}} .a58{animation:xa58 4.6s infinite alternate}
@keyframes xa59{to{transform:translate3d(0,42px,-17px)}} .a59{animation:xa59 4.7s infinite alternate}
@keyframes xa60{to{transform:translate3d(0,44px,-18px)}} .a60{animation:xa60 4.8s infinite alternate}
@keyframes xa61{to{transform:translate3d(0,46px,-19px)}} .a61{animation:xa61 4.9s infinite alternate}
@keyframes xa62{to{transform:translate3d(0,48px,-20px)}} .a62{animation:xa62 5.0s infinite alternate}
@keyframes xa63{to{transform:translate3d(0,50px,-21px)}} .a63{animation:xa63 5.1s infinite alternate}
@keyframes xa64{to{transform:translate3d(0,-10px,-22px)}} .a64{animation:xa64 3.1s infinite alternate}
@keyframes xa65{to{transform:translate3d(0,-12px,-23px)}} .a65{animation:xa65 3.2s infinite alternate}
@keyframes xa66{to{transform:translate3d(0,-14px,-24px)}} .a66{animation:xa66 3.3s infinite alternate}
@keyframes xa67{to{transform:translate3d(0,-16px,-25px)}} .a67{animation:xa67 3.4s infinite alternate}
@keyframes xa68{to{transform:translate3d(0,-18px,-26px)}} .a68{animation:xa68 3.5s infinite alternate}
@keyframes xa69{to{transform:translate3d(0,-20px,-27px)}} .a69{animation:xa69 3.6s infinite alternate}
@keyframes xa70{to{transform:translate3d(0,-22px,-28px)}} .a70{animation:xa70 3.7s infinite alternate}
@keyframes xa71{to{transform:translate3d(0,-24px,-29px)}} .a71{animation:xa71 3.8s infinite alternate}
@keyframes xa72{to{transform:translate3d(0,-26px,-30px)}} .a72{animation:xa72 3.9s infinite alternate}
@keyframes xa73{to{transform:translate3d(0,-28px,-31px)}} .a73{animation:xa73 4.0s infinite alternate}
@keyframes xa74{to{transform:translate3d(0,-30px,-32px)}} .a74{animation:xa74 4.1s infinite alternate}
@keyframes xa75{to{transform:translate3d(0,-32px,-33px)}} .a75{animation:xa75 4.2s infinite alternate}
@keyframes xa76{to{transform:translate3d(0,-34px,-34px)}} .a76{animation:xa76 4.3s infinite alternate}
@keyframes xa77{to{transform:translate3d(0,-36px,-35px)}} .a77{animation:xa77 4.4s infinite alternate}
@keyframes xa78{to{transform:translate3d(0,-38px,-36px)}} .a78{animation:xa78 4.5s infinite alternate}
@keyframes xa79{to{transform:translate3d(0,-40px,-37px)}} .a79{animation:xa79 4.6s infinite alternate}
@keyframes xa80{to{transform:translate3d(0,-42px,-38px)}} .a80{animation:xa80 4.7s infinite alternate}
@keyframes xa81{to{transform:translate3d(0,-44px,-39px)}} .a81{animation:xa81 4.8s infinite alternate}
@keyframes xa82{to{transform:translate3d(0,-46px,-40px)}} .a82{animation:xa82 4.9s infinite alternate}
@keyframes xa83{to{transform:translate3d(0,-48px,-41px)}} .a83{animation:xa83 5.0s infinite alternate}
@keyframes xa84{to{transform:translate3d(0,-50px,-42px)}} .a84{animation:xa84 5.1s infinite alternate}
@keyframes xa85{to{transform:translate3d(0,10px,43px)}} .a85{animation:xa85 3.1s infinite alternate}
@keyframes xa86{to{transform:translate3d(0,12px,44px)}} .a86{animation:xa86 3.2s infinite alternate}
@keyframes xa87{to{transform:translate3d(0,14px,45px)}} .a87{animation:xa87 3.3s infinite alternate}
@keyframes xa88{to{transform:translate3d(0,16px,46px)}} .a88{animation:xa88 3.4s infinite alternate}
@keyframes xa89{to{transform:translate3d(0,18px,47px)}} .a89{animation:xa89 3.5s infinite alternate}
@keyframes xa90{to{transform:translate3d(0,20px,48px)}} .a90{animation:xa90 3.6s infinite alternate}
@keyframes xa91{to{transform:translate3d(0,22px,49px)}} .a91{animation:xa91 3.7s infinite alternate}
@keyframes xa92{to{transform:translate3d(0,24px,50px)}} .a92{animation:xa92 3.8s infinite alternate}
@keyframes xa93{to{transform:translate3d(0,26px,51px)}} .a93{animation:xa93 3.9s infinite alternate}
@keyframes xa94{to{transform:translate3d(0,28px,52px)}} .a94{animation:xa94 4.0s infinite alternate}
@keyframes xa95{to{transform:translate3d(0,30px,53px)}} .a95{animation:xa95 4.1s infinite alternate}
@keyframes xa96{to{transform:translate3d(0,32px,54px)}} .a96{animation:xa96 4.2s infinite alternate}
@keyframes xa97{to{transform:translate3d(0,34px,55px)}} .a97{animation:xa97 4.3s infinite alternate}
@keyframes xa98{to{transform:translate3d(0,36px,56px)}} .a98{animation:xa98 4.4s infinite alternate}
@keyframes xa99{to{transform:translate3d(0,38px,57px)}} .a99{animation:xa99 4.5s infinite alternate}
@keyframes xa100{to{transform:translate3d(0,40px,58px)}} .a100{animation:xa100 4.6s infinite alternate}
@keyframes xa101{to{transform:translate3d(0,42px,59px)}} .a101{animation:xa101 4.7s infinite alternate}
@keyframes xa102{to{transform:translate3d(0,44px,60px)}} .a102{animation:xa102 4.8s infinite alternate}
@keyframes xa103{to{transform:translate3d(0,46px,61px)}} .a103{animation:xa103 4.9s infinite alternate}
@keyframes xa104{to{transform:translate3d(0,48px,62px)}} .a104{animation:xa104 5.0s infinite alternate}
@keyframes xa105{to{transform:translate3d(0,50px,63px)}} .a105{animation:xa105 5.1s infinite alternate}
@keyframes xa106{to{transform:translate3d(0,-10px,64px)}} .a106{animation:xa106 3.1s infinite alternate}
@keyframes xa107{to{transform:translate3d(0,-12px,65px)}} .a107{animation:xa107 3.2s infinite alternate}
@keyframes xa108{to{transform:translate3d(0,-14px,66px)}} .a108{animation:xa108 3.3s infinite alternate}
@keyframes xa109{to{transform:translate3d(0,-16px,67px)}} .a109{animation:xa109 3.4s infinite alternate}
@keyframes xa110{to{transform:translate3d(0,-18px,68px)}} .a110{animation:xa110 3.5s infinite alternate}
@keyframes xa111{to{transform:translate3d(0,-20px,69px)}} .a111{animation:xa111 3.6s infinite alternate}
@keyframes xa112{to{transform:translate3d(0,-22px,70px)}} .a112{animation:xa112 3.7s infinite alternate}
@keyframes xa113{to{transform:translate3d(0,-24px,71px)}} .a113{animation:xa113 3.8s infinite alternate}
@keyframes xa114{to{transform:translate3d(0,-26px,72px)}} .a114{animation:xa114 3.9s infinite alternate}
@keyframes xa115{to{transform:translate3d(0,-28px,73px)}} .a115{animation:xa115 4.0s infinite alternate}
@keyframes xa116{to{transform:translate3d(0,-30px,74px)}} .a116{animation:xa116 4.1s infinite alternate}
@keyframes xa117{to{transform:translate3d(0,-32px,75px)}} .a117{animation:xa117 4.2s infinite alternate}
@keyframes xa118{to{transform:translate3d(0,-34px,76px)}} .a118{animation:xa118 4.3s infinite alternate}
@keyframes xa119{to{transform:translate3d(0,-36px,77px)}} .a119{animation:xa119 4.4s infinite alternate}
@keyframes xa120{to{transform:translate3d(0,-38px,78px)}} .a120{animation:xa120 4.5s infinite alternate}
@keyframes xa121{to{transform:translate3d(0,-40px,79px)}} .a121{animation:xa121 4.6s infinite alternate}
@keyframes xa122{to{transform:translate3d(0,-42px,80px)}} .a122{animation:xa122 4.7s infinite alternate}
@keyframes xa123{to{transform:translate3d(0,-44px,81px)}} .a123{animation:xa123 4.8s infinite alternate}
@keyframes xa124{to{transform:translate3d(0,-46px,82px)}} .a124{animation:xa124 4.9s infinite alternate}
@keyframes xa125{to{transform:translate3d(0,-48px,83px)}} .a125{animation:xa125 5.0s infinite alternate}
@keyframes xa126{to{transform:translate3d(0,-50px,84px)}} .a126{animation:xa126 5.1s infinite alternate}
@keyframes xa127{to{transform:translate3d(0,10px,-43px)}} .a127{animation:xa127 3.1s infinite alternate}
@keyframes xa128{to{transform:translate3d(0,12px,-44px)}} .a128{animation:xa128 3.2s infinite alternate}
@keyframes xa129{to{transform:translate3d(0,14px,-45px)}} .a129{animation:xa129 3.3s infinite alternate}
@keyframes xa130{to{transform:translate3d(0,16px,-46px)}} .a130{animation:xa130 3.4s infinite alternate}
@keyframes xa131{to{transform:translate3d(0,18px,-47px)}} .a131{animation:xa131 3.5s infinite alternate}
@keyframes xa132{to{transform:translate3d(0,20px,-48px)}} .a132{animation:xa132 3.6s infinite alternate}
@keyframes xa133{to{transform:translate3d(0,22px,-49px)}} .a133{animation:xa133 3.7s infinite alternate}
@keyframes xa134{to{transform:translate3d(0,24px,-50px)}} .a134{animation:xa134 3.8s infinite alternate}
@keyframes xa135{to{transform:translate3d(0,26px,-51px)}} .a135{animation:xa135 3.9s infinite alternate}
@keyframes xa136{to{transform:translate3d(0,28px,-52px)}} .a136{animation:xa136 4.0s infinite alternate}
@keyframes xa137{to{transform:translate3d(0,30px,-53px)}} .a137{animation:xa137 4.1s infinite alternate}
@keyframes xa138{to{transform:translate3d(0,32px,-54px)}} .a138{animation:xa138 4.2s infinite alternate}
@keyframes xa139{to{transform:translate3d(0,34px,-55px)}} .a139{animation:xa139 4.3s infinite alternate}
@keyframes xa140{to{transform:translate3d(0,36px,-56px)}} .a140{animation:xa140 4.4s infinite alternate}
@keyframes xa141{to{transform:translate3d(0,38px,-57px)}} .a141{animation:xa141 4.5s infinite alternate}
@keyframes xa142{to{transform:translate3d(0,40px,-58px)}} .a142{animation:xa142 4.6s infinite alternate}
@keyframes xa143{to{transform:translate3d(0,42px,-59px)}} .a143{animation:xa143 4.7s infinite alternate}
@keyframes xa144{to{transform:translate3d(0,44px,-60px)}} .a144{animation:xa144 4.8s infinite alternate}
@keyframes xa145{to{transform:translate3d(0,46px,-61px)}} .a145{animation:xa145 4.9s infinite alternate}
@keyframes xa146{to{transform:translate3d(0,48px,-62px)}} .a146{animation:xa146 5.0s infinite alternate}
@keyframes xa147{to{transform:translate3d(0,50px,-63px)}} .a147{animation:xa147 5.1s infinite alternate}
@keyframes xa148{to{transform:translate3d(0,-10px,-64px)}} .a148{animation:xa148 3.1s infinite alternate}
@keyframes xa149{to{transform:translate3d(0,-12px,-65px)}} .a149{animation:xa149 3.2s infinite alternate}
@keyframes xa150{to{transform:translate3d(0,-14px,-66px)}} .a150{animation:xa150 3.3s infinite alternate}
@keyframes xa151{to{transform:scale3d(1,1.01,1)}} .a151{animation:xa151 3.1s infinite alternate}
@keyframes xa152{to{transform:scale3d(1,1.02,1)}} .a152{animation:xa152 3.2s infinite alternate}
@keyframes xa153{to{transform:scale3d(1,1.03,1)}} .a153{animation:xa153 3.3s infinite alternate}
@keyframes xa154{to{transform:scale3d(1,1.04,1)}} .a154{animation:xa154 3.4s infinite alternate}
@keyframes xa155{to{transform:scale3d(1,1.05,1)}} .a155{animation:xa155 3.5s infinite alternate}
@keyframes xa156{to{transform:scale3d(1,1.06,1)}} .a156{animation:xa156 3.6s infinite alternate}
@keyframes xa157{to{transform:scale3d(1,1.07,1)}} .a157{animation:xa157 3.7s infinite alternate}
@keyframes xa158{to{transform:scale3d(1,1.08,1)}} .a158{animation:xa158 3.8s infinite alternate}
@keyframes xa159{to{transform:scale3d(1,1.09,1)}} .a159{animation:xa159 3.9s infinite alternate}
@keyframes xa160{to{transform:scale3d(1,1.10,1)}} .a160{animation:xa160 4.0s infinite alternate}
@keyframes xa161{to{transform:scale3d(1,1.11,1)}} .a161{animation:xa161 4.1s infinite alternate}
@keyframes xa162{to{transform:scale3d(1,1.12,1)}} .a162{animation:xa162 4.2s infinite alternate}
@keyframes xa163{to{transform:scale3d(1,1.13,1)}} .a163{animation:xa163 4.3s infinite alternate}
@keyframes xa164{to{transform:scale3d(1,1.14,1)}} .a164{animation:xa164 4.4s infinite alternate}
@keyframes xa165{to{transform:scale3d(1,1.15,1)}} .a165{animation:xa165 4.5s infinite alternate}
@keyframes xa166{to{transform:scale3d(1,1.16,1)}} .a166{animation:xa166 4.6s infinite alternate}
@keyframes xa167{to{transform:scale3d(1,1.17,1)}} .a167{animation:xa167 4.7s infinite alternate}
@keyframes xa168{to{transform:scale3d(1,1.18,1)}} .a168{animation:xa168 4.8s infinite alternate}
@keyframes xa169{to{transform:scale3d(1,1.19,1)}} .a169{animation:xa169 4.9s infinite alternate}
@keyframes xa170{to{transform:scale3d(1,1.20,1)}} .a170{animation:xa170 5.0s infinite alternate}
@keyframes xa171{to{transform:scale3d(1,1.21,1)}} .a171{animation:xa171 5.1s infinite alternate}
@keyframes xa172{to{transform:scale3d(1,0.99,1)}} .a172{animation:xa172 3.1s infinite alternate}
@keyframes xa173{to{transform:scale3d(1,0.98,1)}} .a173{animation:xa173 3.2s infinite alternate}
@keyframes xa174{to{transform:scale3d(1,0.97,1)}} .a174{animation:xa174 3.3s infinite alternate}
@keyframes xa175{to{transform:scale3d(1,0.96,1)}} .a175{animation:xa175 3.4s infinite alternate}
@keyframes xa176{to{transform:scale3d(1,0.95,1)}} .a176{animation:xa176 3.5s infinite alternate}
@keyframes xa177{to{transform:scale3d(1,0.94,1)}} .a177{animation:xa177 3.6s infinite alternate}
@keyframes xa178{to{transform:scale3d(1,0.93,1)}} .a178{animation:xa178 3.7s infinite alternate}
@keyframes xa179{to{transform:scale3d(1,0.92,1)}} .a179{animation:xa179 3.8s infinite alternate}
@keyframes xa180{to{transform:scale3d(1,0.91,1)}} .a180{animation:xa180 3.9s infinite alternate}
@keyframes xa181{to{transform:scale3d(1,0.90,1)}} .a181{animation:xa181 4.0s infinite alternate}
@keyframes xa182{to{transform:scale3d(1,0.89,1)}} .a182{animation:xa182 4.1s infinite alternate}
@keyframes xa183{to{transform:scale3d(1,0.88,1)}} .a183{animation:xa183 4.2s infinite alternate}
@keyframes xa184{to{transform:scale3d(1,0.87,1)}} .a184{animation:xa184 4.3s infinite alternate}
@keyframes xa185{to{transform:scale3d(1,0.86,1)}} .a185{animation:xa185 4.4s infinite alternate}
@keyframes xa186{to{transform:scale3d(1,0.85,1)}} .a186{animation:xa186 4.5s infinite alternate}
@keyframes xa187{to{transform:scale3d(1,0.84,1)}} .a187{animation:xa187 4.6s infinite alternate}
@keyframes xa188{to{transform:scale3d(1,0.83,1)}} .a188{animation:xa188 4.7s infinite alternate}
@keyframes xa189{to{transform:scale3d(1,0.82,1)}} .a189{animation:xa189 4.8s infinite alternate}
@keyframes xa190{to{transform:scale3d(1,0.81,1)}} .a190{animation:xa190 4.9s infinite alternate}
@keyframes xa191{to{transform:scale3d(1,0.80,1)}} .a191{animation:xa191 5.0s infinite alternate}
@keyframes xa192{to{transform:scale3d(1,0.79,1)}} .a192{animation:xa192 5.1s infinite alternate}
@keyframes xa193{to{transform:translate3d(0,10px,21px) scale3d(1,1.01,1)}} .a193{animation:xa193 3.1s infinite alternate}
@keyframes xa194{to{transform:translate3d(0,12px,22px) scale3d(1,1.02,1)}} .a194{animation:xa194 3.2s infinite alternate}
@keyframes xa195{to{transform:translate3d(0,14px,23px) scale3d(1,1.03,1)}} .a195{animation:xa195 3.3s infinite alternate}
@keyframes xa196{to{transform:translate3d(0,16px,24px) scale3d(1,1.04,1)}} .a196{animation:xa196 3.4s infinite alternate}
@keyframes xa197{to{transform:translate3d(0,18px,25px) scale3d(1,1.05,1)}} .a197{animation:xa197 3.5s infinite alternate}
@keyframes xa198{to{transform:translate3d(0,20px,26px) scale3d(1,1.06,1)}} .a198{animation:xa198 3.6s infinite alternate}
@keyframes xa199{to{transform:translate3d(0,22px,27px) scale3d(1,1.07,1)}} .a199{animation:xa199 3.7s infinite alternate}
@keyframes xa200{to{transform:translate3d(0,24px,28px) scale3d(1,1.08,1)}} .a200{animation:xa200 3.8s infinite alternate}
@keyframes xa201{to{transform:translate3d(0,26px,29px) scale3d(1,1.09,1)}} .a201{animation:xa201 3.9s infinite alternate}
@keyframes xa202{to{transform:translate3d(0,28px,30px) scale3d(1,1.10,1)}} .a202{animation:xa202 4.0s infinite alternate}
@keyframes xa203{to{transform:translate3d(0,30px,31px) scale3d(1,1.11,1)}} .a203{animation:xa203 4.1s infinite alternate}
@keyframes xa204{to{transform:translate3d(0,32px,32px) scale3d(1,1.12,1)}} .a204{animation:xa204 4.2s infinite alternate}
@keyframes xa205{to{transform:translate3d(0,34px,33px) scale3d(1,1.13,1)}} .a205{animation:xa205 4.3s infinite alternate}
@keyframes xa206{to{transform:translate3d(0,36px,34px) scale3d(1,1.14,1)}} .a206{animation:xa206 4.4s infinite alternate}
@keyframes xa207{to{transform:translate3d(0,38px,35px) scale3d(1,1.15,1)}} .a207{animation:xa207 4.5s infinite alternate}
@keyframes xa208{to{transform:translate3d(0,40px,36px) scale3d(1,1.16,1)}} .a208{animation:xa208 4.6s infinite alternate}
@keyframes xa209{to{transform:translate3d(0,42px,37px) scale3d(1,1.17,1)}} .a209{animation:xa209 4.7s infinite alternate}
@keyframes xa210{to{transform:translate3d(0,44px,38px) scale3d(1,1.18,1)}} .a210{animation:xa210 4.8s infinite alternate}
@keyframes xa211{to{transform:translate3d(0,46px,39px) scale3d(1,1.19,1)}} .a211{animation:xa211 4.9s infinite alternate}
@keyframes xa212{to{transform:translate3d(0,48px,40px) scale3d(1,1.20,1)}} .a212{animation:xa212 5.0s infinite alternate}
@keyframes xa213{to{transform:translate3d(0,50px,41px) scale3d(1,1.21,1)}} .a213{animation:xa213 5.1s infinite alternate}
@keyframes xa214{to{transform:translate3d(0,-10px,42px) scale3d(1,0.99,1)}} .a214{animation:xa214 3.1s infinite alternate}
@keyframes xa215{to{transform:translate3d(0,-12px,43px) scale3d(1,0.98,1)}} .a215{animation:xa215 3.2s infinite alternate}
@keyframes xa216{to{transform:translate3d(0,-14px,44px) scale3d(1,0.97,1)}} .a216{animation:xa216 3.3s infinite alternate}
@keyframes xa217{to{transform:translate3d(0,-16px,45px) scale3d(1,0.96,1)}} .a217{animation:xa217 3.4s infinite alternate}
@keyframes xa218{to{transform:translate3d(0,-18px,46px) scale3d(1,0.95,1)}} .a218{animation:xa218 3.5s infinite alternate}
@keyframes xa219{to{transform:translate3d(0,-20px,47px) scale3d(1,0.94,1)}} .a219{animation:xa219 3.6s infinite alternate}
@keyframes xa220{to{transform:translate3d(0,-22px,48px) scale3d(1,0.93,1)}} .a220{animation:xa220 3.7s infinite alternate}
@keyframes xa221{to{transform:translate3d(0,-24px,49px) scale3d(1,0.92,1)}} .a221{animation:xa221 3.8s infinite alternate}
@keyframes xa222{to{transform:translate3d(0,-26px,50px) scale3d(1,0.91,1)}} .a222{animation:xa222 3.9s infinite alternate}
@keyframes xa223{to{transform:translate3d(0,-28px,51px) scale3d(1,0.90,1)}} .a223{animation:xa223 4.0s infinite alternate}
@keyframes xa224{to{transform:translate3d(0,-30px,52px) scale3d(1,0.89,1)}} .a224{animation:xa224 4.1s infinite alternate}
@keyframes xa225{to{transform:translate3d(0,-32px,53px) scale3d(1,0.88,1)}} .a225{animation:xa225 4.2s infinite alternate}
@keyframes xa226{to{transform:translate3d(0,-34px,54px) scale3d(1,0.87,1)}} .a226{animation:xa226 4.3s infinite alternate}
@keyframes xa227{to{transform:translate3d(0,-36px,55px) scale3d(1,0.86,1)}} .a227{animation:xa227 4.4s infinite alternate}
@keyframes xa228{to{transform:translate3d(0,-38px,56px) scale3d(1,0.85,1)}} .a228{animation:xa228 4.5s infinite alternate}
@keyframes xa229{to{transform:translate3d(0,-40px,57px) scale3d(1,0.84,1)}} .a229{animation:xa229 4.6s infinite alternate}
@keyframes xa230{to{transform:translate3d(0,-42px,58px) scale3d(1,0.83,1)}} .a230{animation:xa230 4.7s infinite alternate}
@keyframes xa231{to{transform:translate3d(0,-44px,59px) scale3d(1,0.82,1)}} .a231{animation:xa231 4.8s infinite alternate}
@keyframes xa232{to{transform:translate3d(0,-46px,60px) scale3d(1,0.81,1)}} .a232{animation:xa232 4.9s infinite alternate}
@keyframes xa233{to{transform:translate3d(0,-48px,61px) scale3d(1,0.80,1)}} .a233{animation:xa233 5.0s infinite alternate}
@keyframes xa234{to{transform:translate3d(0,-50px,62px) scale3d(1,0.79,1)}} .a234{animation:xa234 5.1s infinite alternate}
@keyframes xa235{to{transform:translate3d(0,10px,-21px) scale3d(1,1.01,1)}} .a235{animation:xa235 3.1s infinite alternate}
@keyframes xa236{to{transform:translate3d(0,12px,-22px) scale3d(1,1.02,1)}} .a236{animation:xa236 3.2s infinite alternate}
@keyframes xa237{to{transform:translate3d(0,14px,-23px) scale3d(1,1.03,1)}} .a237{animation:xa237 3.3s infinite alternate}
@keyframes xa238{to{transform:translate3d(0,16px,-24px) scale3d(1,1.04,1)}} .a238{animation:xa238 3.4s infinite alternate}
@keyframes xa239{to{transform:translate3d(0,18px,-25px) scale3d(1,1.05,1)}} .a239{animation:xa239 3.5s infinite alternate}
@keyframes xa240{to{transform:translate3d(0,20px,-26px) scale3d(1,1.06,1)}} .a240{animation:xa240 3.6s infinite alternate}
@keyframes xa241{to{transform:translate3d(0,22px,-27px) scale3d(1,1.07,1)}} .a241{animation:xa241 3.7s infinite alternate}
@keyframes xa242{to{transform:translate3d(0,24px,-28px) scale3d(1,1.08,1)}} .a242{animation:xa242 3.8s infinite alternate}
@keyframes xa243{to{transform:translate3d(0,26px,-29px) scale3d(1,1.09,1)}} .a243{animation:xa243 3.9s infinite alternate}
@keyframes xa244{to{transform:translate3d(0,28px,-30px) scale3d(1,1.10,1)}} .a244{animation:xa244 4.0s infinite alternate}
@keyframes xa245{to{transform:translate3d(0,30px,-31px) scale3d(1,1.11,1)}} .a245{animation:xa245 4.1s infinite alternate}
@keyframes xa246{to{transform:translate3d(0,32px,-32px) scale3d(1,1.12,1)}} .a246{animation:xa246 4.2s infinite alternate}
@keyframes xa247{to{transform:translate3d(0,34px,-33px) scale3d(1,1.13,1)}} .a247{animation:xa247 4.3s infinite alternate}
@keyframes xa248{to{transform:translate3d(0,36px,-34px) scale3d(1,1.14,1)}} .a248{animation:xa248 4.4s infinite alternate}
@keyframes xa249{to{transform:translate3d(0,38px,-35px) scale3d(1,1.15,1)}} .a249{animation:xa249 4.5s infinite alternate}
@keyframes xa250{to{transform:translate3d(0,40px,-36px) scale3d(1,1.16,1)}} .a250{animation:xa250 4.6s infinite alternate}
@keyframes xa251{to{transform:translate3d(0,42px,-37px) scale3d(1,1.17,1)}} .a251{animation:xa251 4.7s infinite alternate}
@keyframes xa252{to{transform:translate3d(0,44px,-38px) scale3d(1,1.18,1)}} .a252{animation:xa252 4.8s infinite alternate}
@keyframes xa253{to{transform:translate3d(0,46px,-39px) scale3d(1,1.19,1)}} .a253{animation:xa253 4.9s infinite alternate}
@keyframes xa254{to{transform:translate3d(0,48px,-40px) scale3d(1,1.20,1)}} .a254{animation:xa254 5.0s infinite alternate}
@keyframes xa255{to{transform:translate3d(0,50px,-41px) scale3d(1,1.21,1)}} .a255{animation:xa255 5.1s infinite alternate}
@keyframes xa256{to{transform:translate3d(0,-10px,-42px) scale3d(1,0.99,1)}} .a256{animation:xa256 3.1s infinite alternate}
@keyframes xa257{to{transform:translate3d(0,-12px,-43px) scale3d(1,0.98,1)}} .a257{animation:xa257 3.2s infinite alternate}
@keyframes xa258{to{transform:translate3d(0,-14px,-44px) scale3d(1,0.97,1)}} .a258{animation:xa258 3.3s infinite alternate}
@keyframes xa259{to{transform:translate3d(0,-16px,-45px) scale3d(1,0.96,1)}} .a259{animation:xa259 3.4s infinite alternate}
@keyframes xa260{to{transform:translate3d(0,-18px,-46px) scale3d(1,0.95,1)}} .a260{animation:xa260 3.5s infinite alternate}
@keyframes xa261{to{transform:translate3d(0,-20px,-47px) scale3d(1,0.94,1)}} .a261{animation:xa261 3.6s infinite alternate}
@keyframes xa262{to{transform:translate3d(0,-22px,-48px) scale3d(1,0.93,1)}} .a262{animation:xa262 3.7s infinite alternate}
@keyframes xa263{to{transform:translate3d(0,-24px,-49px) scale3d(1,0.92,1)}} .a263{animation:xa263 3.8s infinite alternate}
@keyframes xa264{to{transform:translate3d(0,-26px,-50px) scale3d(1,0.91,1)}} .a264{animation:xa264 3.9s infinite alternate}
@keyframes xa265{to{transform:translate3d(0,-28px,-51px) scale3d(1,0.90,1)}} .a265{animation:xa265 4.0s infinite alternate}
@keyframes xa266{to{transform:translate3d(0,-30px,-52px) scale3d(1,0.89,1)}} .a266{animation:xa266 4.1s infinite alternate}
@keyframes xa267{to{transform:translate3d(0,-32px,-53px) scale3d(1,0.88,1)}} .a267{animation:xa267 4.2s infinite alternate}
@keyframes xa268{to{transform:translate3d(0,-34px,-54px) scale3d(1,0.87,1)}} .a268{animation:xa268 4.3s infinite alternate}
@keyframes xa269{to{transform:translate3d(0,-36px,-55px) scale3d(1,0.86,1)}} .a269{animation:xa269 4.4s infinite alternate}
@keyframes xa270{to{transform:translate3d(0,-38px,-56px) scale3d(1,0.85,1)}} .a270{animation:xa270 4.5s infinite alternate}
@keyframes xa271{to{transform:translate3d(0,-40px,-57px) scale3d(1,0.84,1)}} .a271{animation:xa271 4.6s infinite alternate}
@keyframes xa272{to{transform:translate3d(0,-42px,-58px) scale3d(1,0.83,1)}} .a272{animation:xa272 4.7s infinite alternate}
@keyframes xa273{to{transform:translate3d(0,-44px,-59px) scale3d(1,0.82,1)}} .a273{animation:xa273 4.8s infinite alternate}
@keyframes xa274{to{transform:translate3d(0,-46px,-60px) scale3d(1,0.81,1)}} .a274{animation:xa274 4.9s infinite alternate}
@keyframes xa275{to{transform:translate3d(0,-48px,-61px) scale3d(1,0.80,1)}} .a275{animation:xa275 5.0s infinite alternate}
@keyframes xa276{to{transform:translate3d(0,-50px,-62px) scale3d(1,0.79,1)}} .a276{animation:xa276 5.1s infinite alternate}
@keyframes xa277{to{transform:translate3d(0,10px,63px) scale3d(1,1.01,1)}} .a277{animation:xa277 3.1s infinite alternate}
@keyframes xa278{to{transform:translate3d(0,12px,64px) scale3d(1,1.02,1)}} .a278{animation:xa278 3.2s infinite alternate}
@keyframes xa279{to{transform:translate3d(0,14px,65px) scale3d(1,1.03,1)}} .a279{animation:xa279 3.3s infinite alternate}
@keyframes xa280{to{transform:translate3d(0,16px,66px) scale3d(1,1.04,1)}} .a280{animation:xa280 3.4s infinite alternate}
@keyframes xa281{to{transform:translate3d(0,18px,67px) scale3d(1,1.05,1)}} .a281{animation:xa281 3.5s infinite alternate}
@keyframes xa282{to{transform:translate3d(0,20px,68px) scale3d(1,1.06,1)}} .a282{animation:xa282 3.6s infinite alternate}
@keyframes xa283{to{transform:translate3d(0,22px,69px) scale3d(1,1.07,1)}} .a283{animation:xa283 3.7s infinite alternate}
@keyframes xa284{to{transform:translate3d(0,24px,70px) scale3d(1,1.08,1)}} .a284{animation:xa284 3.8s infinite alternate}
@keyframes xa285{to{transform:translate3d(0,26px,71px) scale3d(1,1.09,1)}} .a285{animation:xa285 3.9s infinite alternate}
@keyframes xa286{to{transform:translate3d(0,28px,72px) scale3d(1,1.10,1)}} .a286{animation:xa286 4.0s infinite alternate}
@keyframes xa287{to{transform:translate3d(0,30px,73px) scale3d(1,1.11,1)}} .a287{animation:xa287 4.1s infinite alternate}
@keyframes xa288{to{transform:translate3d(0,32px,74px) scale3d(1,1.12,1)}} .a288{animation:xa288 4.2s infinite alternate}
@keyframes xa289{to{transform:translate3d(0,34px,75px) scale3d(1,1.13,1)}} .a289{animation:xa289 4.3s infinite alternate}
@keyframes xa290{to{transform:translate3d(0,36px,76px) scale3d(1,1.14,1)}} .a290{animation:xa290 4.4s infinite alternate}
@keyframes xa291{to{transform:translate3d(0,38px,77px) scale3d(1,1.15,1)}} .a291{animation:xa291 4.5s infinite alternate}
@keyframes xa292{to{transform:translate3d(0,40px,78px) scale3d(1,1.16,1)}} .a292{animation:xa292 4.6s infinite alternate}
@keyframes xa293{to{transform:translate3d(0,42px,79px) scale3d(1,1.17,1)}} .a293{animation:xa293 4.7s infinite alternate}
@keyframes xa294{to{transform:translate3d(0,44px,80px) scale3d(1,1.18,1)}} .a294{animation:xa294 4.8s infinite alternate}
@keyframes xa295{to{transform:translate3d(0,46px,81px) scale3d(1,1.19,1)}} .a295{animation:xa295 4.9s infinite alternate}
@keyframes xa296{to{transform:translate3d(0,48px,82px) scale3d(1,1.20,1)}} .a296{animation:xa296 5.0s infinite alternate}
@keyframes xa297{to{transform:translate3d(0,-10px,83px) scale3d(1,0.99,1)}} .a297{animation:xa297 3.1s infinite alternate}
@keyframes xa298{to{transform:translate3d(0,-12px,84px) scale3d(1,0.98,1)}} .a298{animation:xa298 3.2s infinite alternate}
@keyframes xa299{to{transform:translate3d(0,-14px,85px) scale3d(1,0.97,1)}} .a299{animation:xa299 3.3s infinite alternate}
@keyframes xa300{to{transform:translate3d(0,-16px,86px) scale3d(1,0.96,1)}} .a300{animation:xa300 3.4s infinite alternate}

/* The login heading inherits --text-primary (#d1cfcb), a warm grey; the mark reads
   as white, matching the launcher header. */
.login-branding h1 { color: #fff; }

/* ==========================================================================
   Scrollbars

   Nothing styled these, so the content pages, the live feed, the messages
   drawer, the dialogs and the wide tables all drew the browser default -
   a light grey bar against a near-black interface.

   Both syntaxes are present on purpose: scrollbar-color/-width is the
   standard one (Firefox, Chromium 121+), and ::-webkit-scrollbar is what
   the WebView the launcher ships in actually honours.
   ========================================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--tarkov-gold-dim) var(--tarkov-bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }

::-webkit-scrollbar-track {
    background: var(--tarkov-bg);
    border-left: 1px solid var(--panel-border);
}

/* Square, like every other edge in the launcher. The border is the track colour
   rather than transparent, which reads as an inset rail instead of a floating bar. */
::-webkit-scrollbar-thumb {
    background: var(--tarkov-gold-dim);
    border: 2px solid var(--tarkov-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--tarkov-gold); }

/* Where a horizontal and a vertical bar meet, e.g. on a wide stats table. */
::-webkit-scrollbar-corner { background: var(--tarkov-bg); }

/* ==========================================================================
   Form validation messages

   The browser's native bubble - the white callout with the orange icon - has no
   CSS hook in any engine, so assets/validation.js suppresses it and draws this
   instead. Validation itself is unchanged; only the presentation is.
   ========================================================================== */
.oasis-validation-bubble {
    position: fixed;
    z-index: 9999;
    max-width: 280px;
    padding: 8px 12px;
    background: #0c0c0c;
    border: 1px solid var(--status-warning);
    color: var(--status-warning);
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 1.5;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

/* The arrow tracks the FIELD, not the centre of the bubble, so it still points at the
   input when the bubble has been nudged inwards from a screen edge. */
.oasis-validation-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: var(--arrow-x, 50%);
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: var(--status-warning);
}
/* Flipped when there was no room above the field. */
.oasis-validation-bubble.is-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: var(--status-warning);
}

/* The field itself, while its message is showing. */
.is-invalid {
    border-color: var(--status-warning) !important;
    box-shadow: 0 0 10px rgba(184, 70, 61, 0.3) !important;
}

/* ...except a password box, which stays gold throughout.
   The wipe dialog sits its password field directly under a red-bordered warning panel, so
   a red field plus a red bubble read as one undifferentiated block of red. The bubble is
   the error; the field is gold so the bubble has something to stand against. Higher
   specificity than .is-invalid above, so it wins despite both being !important. */
input[type="password"].is-invalid {
    border-color: var(--tarkov-gold) !important;
    box-shadow: 0 0 10px rgba(180, 160, 114, 0.35) !important;
}

/* ==========================================================================
   OASIS LAUNCHER wordmark - login page

   Same mark and same shine as the launcher header and the admin bar, sized
   for the login screen where it is the largest thing on the page.

   .login-branding h1 above forces #fff, which would paint straight over the
   gradient .text-shine clips into the text - so the colour is released here.
   That rule is why this needs to be more specific than a bare class.
   ========================================================================== */
.login-branding h1.oasis-wordmark,
.oasis-wordmark {
    /* 25% larger than .login-title, which is 18px - so the mark leads the panel heading
       without dominating the screen. Tracking is kept at the heading's own 5px rather than
       scaled up with the size, so the two read as one family rather than two decisions. */
    font-size: 22.5px;
    letter-spacing: 5px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    line-height: 1.1;
    color: transparent;
}