/* NOXER V4 — actual foreground fog, precise bright edge, screenshot-style HUD */
@property --v4-turn { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes v4-rotate { to { --v4-turn:360deg; } }
@keyframes v4-fog-flow { 0% { transform: translate3d(-16%,10%,0) scale(1.1) rotate(-7deg);opacity:.52; } 50% { transform:translate3d(21%,-9%,0) scale(1.34) rotate(8deg);opacity:.87; } 100% { transform:translate3d(0%,17%,0) scale(1.16) rotate(-3deg);opacity:.6; } }
@keyframes v4-fog-drift { 0% { transform: translate3d(18%,0,0) scale(.95) rotate(8deg); } 50% {transform:translate3d(-20%,13%,0) scale(1.3) rotate(-5deg);} 100% { transform:translate3d(8%,-15%,0) scale(1.07) rotate(10deg); } }
@keyframes v4-hud-float { 0%,100% {transform:translate3d(0,0,0);opacity:.48} 50%{transform:translate3d(8px,-13px,0);opacity:.87} }
@keyframes v4-sweep {0%{transform:translateX(-55%);opacity:0}25%{opacity:.65}75%{opacity:.9}100%{transform:translateX(225%);opacity:0}}
/* Old smoke with z-index:-1 ended up hidden behind body; disable it and use a real foreground layer. */
.site-page::before,.site-page::after,.messenger-page::before,.messenger-page::after{content:none!important}
.noxer-v4-atmosphere{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;isolation:isolate;opacity:.95}
.noxer-v4-atmosphere .v4-smoke{position:absolute;display:block;border-radius:50%;will-change:transform;mix-blend-mode:screen;filter:blur(50px);background:radial-gradient(ellipse at 46% 52%,rgba(200,208,219,.23) 0%,rgba(159,169,189,.13) 20%,rgba(91,100,120,.045) 45%,transparent 68%);}
.v4-smoke.one{top:-25vh;left:-26vw;width:85vw;height:77vh;animation:v4-fog-flow 23s ease-in-out infinite alternate}
.v4-smoke.two{top:19vh;right:-30vw;width:81vw;height:80vh;animation:v4-fog-drift 31s ease-in-out infinite alternate-reverse;opacity:.77}
.v4-smoke.three{bottom:-43vh;left:8vw;width:85vw;height:80vh;animation:v4-fog-flow 36s ease-in-out -18s infinite alternate;opacity:.62}
.site-page .site-header,.site-page main,.site-page footer{position:relative;z-index:2}
.site-page .hero{isolation:isolate}
.site-page .hero-content{z-index:3}
.messenger-page .noxer-v4-atmosphere{z-index:9;opacity:.32}
.messenger-page .app-topbar,.messenger-page .messenger-shell{position:relative;z-index:10}.messenger-page .settings-drawer,.messenger-page .profile-modal,.messenger-page .mobile-bottom-nav{z-index:20}
/* Smooth crisp border bloom, deliberately bright enough to be visible on pure black. */
.site-page .product-frame,.messenger-page .messenger-shell,.site-page .feature-card,.messenger-page .profile-dialog,.v3-gift-detail{box-shadow:0 0 0 1px rgba(255,255,255,.21),0 0 18px rgba(221,232,255,.1),0 0 44px rgba(197,210,243,.075),inset 0 1px rgba(255,255,255,.24)!important}
.product-frame::before,.messenger-shell::before,.profile-dialog::before,.feature-card::before,.v3-gift-detail::before{
 background:conic-gradient(from var(--v4-turn),rgba(255,255,255,.1),rgba(255,255,255,.15) 22%,rgba(255,255,255,.99) 31%,rgba(196,213,255,.9) 34%,rgba(255,255,255,.13) 43%,rgba(255,255,255,.1) 70%,rgba(255,255,255,.78) 90%,rgba(255,255,255,.1))!important;
 padding:2px!important;animation:v4-rotate 6s linear infinite!important;filter:drop-shadow(0 0 5px rgba(246,248,255,.55));
}
.mega-menu{outline:1px solid rgba(238,244,255,.21);outline-offset:-1px;box-shadow:0 22px 70px rgba(0,0,0,.8),0 0 23px rgba(228,237,255,.13),inset 0 1px rgba(255,255,255,.3)!important}
.mega-menu:after{content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;pointer-events:none;padding:1.5px;background:conic-gradient(from var(--v4-turn),rgba(255,255,255,.1),rgba(255,255,255,.88) 30%,transparent 44%,transparent 73%,rgba(255,255,255,.7));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:v4-rotate 5s linear infinite}
/* Screenshot-inspired ambient telemetry behind the hero — not fake game controls. */
.noxer-v4-hud{position:absolute;inset:12% 1% 2%;z-index:1;pointer-events:none;overflow:hidden;user-select:none}
.v4-hud-chip{position:absolute;display:flex;align-items:center;gap:9px;min-height:31px;padding:6px 12px;font-size:11px;color:rgba(231,235,243,.5);letter-spacing:.025em;border:1px solid rgba(228,238,255,.11);background:rgba(35,40,49,.18);border-radius:8px;backdrop-filter:blur(5px);box-shadow:0 0 25px rgba(255,255,255,.045);animation:v4-hud-float 9s ease-in-out infinite}
.v4-hud-chip b{color:rgba(243,245,250,.68);font-weight:650}.v4-hud-chip:nth-child(2){animation-delay:-4s}.v4-hud-chip:nth-child(3){animation-delay:-2s}.v4-hud-chip:nth-child(4){animation-delay:-6s}
.v4-hud-chip.p1{left:3%;top:10%}.v4-hud-chip.p2{right:5%;top:15%}.v4-hud-chip.p3{left:7%;bottom:13%}.v4-hud-chip.p4{right:9%;bottom:16%}
.v4-hud-reticle{position:absolute;width:210px;height:96px;right:14%;top:48%;border:1px solid rgba(202,209,217,.13);mask-image:linear-gradient(110deg,transparent,black 35%,black 65%,transparent);}
.v4-hud-reticle:before,.v4-hud-reticle:after{content:'';position:absolute;width:11px;height:11px;border:1px solid rgba(255,255,255,.4)}
.v4-hud-reticle:before{top:0;left:0;border-bottom:0;border-right:0}.v4-hud-reticle:after{right:0;bottom:0;border-top:0;border-left:0}
.v4-hud-help{position:absolute;right:15%;top:43%;border:1px solid rgba(255,255,255,.16);background:rgba(16,18,21,.7);border-radius:9px;padding:7px 11px;font-size:11px;color:rgba(255,255,255,.75);box-shadow:0 9px 23px rgba(0,0,0,.45);animation:v4-hud-float 9s ease-in-out -3s infinite}
.v4-hud-help kbd{border:1px solid rgba(255,255,255,.24);border-radius:5px;padding:2px 5px;margin-right:6px}
.v4-hud-lines{position:absolute;left:0;top:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 49.85%,rgba(237,237,240,.08) 50%,transparent 50.15%),linear-gradient(transparent 49.85%,rgba(237,237,240,.07) 50%,transparent 50.15%);opacity:.34}
.v4-gift-emoji{font-size:0!important}.v4-no-gift-art{font-size:11px;opacity:.65;letter-spacing:0;color:#c5c5c8;text-align:center;display:block}
.v3-gift-emoji{height:79px!important;filter:drop-shadow(0 6px 16px rgba(0,0,0,.4));animation:noxer-float 4.5s ease-in-out infinite}
.v3-gift-emoji img{height:80px!important;width:100px!important;object-fit:contain!important;image-rendering:auto}
.v3-gift-tile{min-height:155px!important;background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.015)),#0b0c0f!important;box-shadow:inset 0 1px rgba(255,255,255,.08)}
.v3-gift-symbol{font-size:0!important;height:185px!important}
.v3-gift-symbol img{max-height:190px!important;width:min(225px,80%);object-fit:contain}
/* Badge screenshots now have genuine alpha. No CSS background behind them. */
.v3-major,.v3-verified{border:0!important;box-shadow:none!important;filter:drop-shadow(0 0 5px rgba(238,238,255,.23));color:transparent!important}
.v3-major{background:transparent url('/static/major-mark.png?v=4.0.1') no-repeat center / contain!important}
.v3-verified{background:transparent url('/static/verified-mark.png?v=4.0.1') no-repeat center / contain!important}
@media(max-width:760px){.noxer-v4-hud{opacity:.35}.v4-hud-chip.p1,.v4-hud-chip.p2{display:none}.v4-hud-help{display:none}.v4-hud-chip.p3{left:1%;bottom:11%;font-size:9px}.v4-hud-chip.p4{right:1%;bottom:8%;font-size:9px}.noxer-v4-atmosphere .v4-smoke{filter:blur(25px)}.v3-gift-emoji img{width:72px!important;height:70px!important}}
@media(prefers-reduced-motion:reduce){.noxer-v4-atmosphere .v4-smoke,.v4-hud-chip,.v4-hud-help,.product-frame:before,.messenger-shell:before,.profile-dialog:before,.feature-card:before,.v3-gift-detail:before,.mega-menu:after{animation:none!important}}