/* ArezzoMT2 v80 - full page live background, not confined to panels/stage */

body.az-v22-body{
  background:#080914 !important;
}
body.az-v22-body .az74-page{
  position:relative !important;
  min-height:100vh !important;
  isolation:isolate !important;
  overflow-x:hidden !important;
  background:linear-gradient(180deg, rgba(6,7,13,.18), rgba(6,7,13,.62) 60%, rgba(6,7,13,.92) 100%) !important;
}

/* Full screen animated scene across the entire page */
body.az-v22-body .az80-live-bg{
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg, rgba(7,8,14,.45), rgba(7,8,14,.72)),
    url('../images/az79-stage-bg.jpg') center center / cover no-repeat !important;
}
body.az-v22-body .az80-live-bg::before,
body.az-v22-body .az80-live-bg::after{
  content:"";
  position:absolute;
  inset:-6%;
  pointer-events:none;
}
body.az-v22-body .az80-live-bg::before{
  background:url('../images/az79-stage-bg.jpg') center center / cover no-repeat;
  opacity:.42;
  filter:blur(5px) saturate(1.08);
  animation:az80WholeSceneBreath 19s ease-in-out infinite alternate;
}
body.az-v22-body .az80-live-bg::after{
  background:
    radial-gradient(circle at 19% 33%, rgba(255,80,48,.18), transparent 20%),
    radial-gradient(circle at 79% 30%, rgba(255,126,62,.16), transparent 19%),
    radial-gradient(circle at 50% 73%, rgba(106,92,255,.12), transparent 24%),
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 34%, transparent 66%, rgba(0,0,0,.55));
  opacity:.86;
  mix-blend-mode:screen;
  animation:az80GlowPulse 10s ease-in-out infinite alternate;
}
@keyframes az80WholeSceneBreath{
  0%{transform:scale(1.04) translate3d(-10px,-7px,0)}
  35%{transform:scale(1.075) translate3d(8px,-12px,0)}
  70%{transform:scale(1.055) translate3d(12px,5px,0)}
  100%{transform:scale(1.09) translate3d(-7px,9px,0)}
}
@keyframes az80GlowPulse{
  0%{opacity:.55; transform:scale(1)}
  50%{opacity:.95; transform:scale(1.035)}
  100%{opacity:.70; transform:scale(1.07)}
}

/* Put real content above the animated wallpaper */
body.az-v22-body .az74-topbar,
body.az-v22-body .az74-stage,
body.az-v22-body .az74-footer,
body.az-v22-body .az74-news-list-wrap{
  position:relative !important;
  z-index:3 !important;
}
body.az-v22-body .az74-stage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}
body.az-v22-body .az74-page::before,
body.az-v22-body .az74-page::after,
body.az-v22-body .az74-stage::before,
body.az-v22-body .az74-stage::after,
body.az-v22-body .az79-scene{
  display:none !important;
}

/* Full page characters, independent of panels */
body.az-v22-body .az80-char{
  position:absolute;
  bottom:-2vh;
  height:min(92vh, 900px);
  width:min(34vw, 540px);
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.32));
  transform-style:preserve-3d;
}
body.az-v22-body .az80-char-left{
  left:-2.4vw;
  animation:az80LeftIdle 5.8s ease-in-out infinite alternate;
}
body.az-v22-body .az80-char-right{
  right:-2.2vw;
  animation:az80RightIdle 5.4s ease-in-out infinite alternate;
}
body.az-v22-body .az80-char .az80-body,
body.az-v22-body .az80-char .az80-cloth{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:bottom center;
}
body.az-v22-body .az80-char-left .az80-body,
body.az-v22-body .az80-char-left .az80-cloth{background-image:url('../images/az79-char-left.png')}
body.az-v22-body .az80-char-right .az80-body,
body.az-v22-body .az80-char-right .az80-cloth{background-image:url('../images/az79-char-right.png')}
body.az-v22-body .az80-char .az80-body{
  animation:az80BodyBreath 4.4s ease-in-out infinite alternate;
}
body.az-v22-body .az80-char-left .az80-cloth{
  clip-path:polygon(0 0, 54% 0, 83% 18%, 100% 38%, 100% 74%, 70% 100%, 0 100%);
  opacity:.93;
  transform-origin:18% 34%;
  animation:az80LeftCloth 2.7s ease-in-out infinite alternate;
}
body.az-v22-body .az80-char-right .az80-cloth{
  clip-path:polygon(20% 0, 100% 0, 100% 100%, 34% 100%, 54% 62%, 24% 24%);
  opacity:.93;
  transform-origin:78% 34%;
  animation:az80RightCloth 2.6s ease-in-out infinite alternate;
}
@keyframes az80LeftIdle{
  0%{transform:translate3d(0,0,0) rotate(-.7deg) scale(1)}
  50%{transform:translate3d(5px,-10px,0) rotate(.2deg) scale(1.006)}
  100%{transform:translate3d(-3px,-3px,0) rotate(-.2deg) scale(1.01)}
}
@keyframes az80RightIdle{
  0%{transform:translate3d(0,0,0) rotate(.7deg) scale(1)}
  50%{transform:translate3d(-5px,-11px,0) rotate(-.2deg) scale(1.006)}
  100%{transform:translate3d(3px,-3px,0) rotate(.2deg) scale(1.01)}
}
@keyframes az80BodyBreath{
  0%{transform:translateY(0) scale(1)}
  100%{transform:translateY(-4px) scale(1.006)}
}
@keyframes az80LeftCloth{
  0%{transform:translate3d(0,0,0) rotate(-1deg) skewX(0deg)}
  50%{transform:translate3d(-8px,2px,0) rotate(1.6deg) skewX(-2.4deg)}
  100%{transform:translate3d(-14px,4px,0) rotate(3deg) skewX(-4deg)}
}
@keyframes az80RightCloth{
  0%{transform:translate3d(0,0,0) rotate(1deg) skewX(0deg)}
  50%{transform:translate3d(8px,2px,0) rotate(-1.6deg) skewX(2.4deg)}
  100%{transform:translate3d(14px,4px,0) rotate(-3deg) skewX(4deg)}
}

/* Atmosphere over the full page */
body.az-v22-body .az80-sparks,
body.az-v22-body .az80-sparks::before,
body.az-v22-body .az80-sparks::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
body.az-v22-body .az80-sparks{
  opacity:.68;
  background:
    radial-gradient(circle at 12% 92%, rgba(255,135,71,.95) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 26% 86%, rgba(255,84,32,.72) 0 1px, transparent 1.1px),
    radial-gradient(circle at 42% 91%, rgba(255,169,76,.72) 0 1.3px, transparent 1.4px),
    radial-gradient(circle at 58% 88%, rgba(255,88,54,.68) 0 1.1px, transparent 1.2px),
    radial-gradient(circle at 74% 93%, rgba(255,152,66,.72) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 87% 87%, rgba(255,94,54,.78) 0 1px, transparent 1.1px);
  animation:az80SparkRise 10s linear infinite;
}
body.az-v22-body .az80-sparks::before{
  opacity:.44;
  background:
    radial-gradient(circle at 18% 98%, rgba(255,140,72,.9) 0 1px, transparent 1.1px),
    radial-gradient(circle at 34% 96%, rgba(255,103,50,.8) 0 1px, transparent 1.1px),
    radial-gradient(circle at 63% 99%, rgba(255,172,88,.75) 0 1.2px, transparent 1.3px),
    radial-gradient(circle at 82% 95%, rgba(255,110,60,.9) 0 1.1px, transparent 1.2px);
  animation:az80SparkRise 16s linear infinite reverse;
}
body.az-v22-body .az80-sparks::after{
  background:linear-gradient(180deg, transparent 0%, rgba(255,95,55,.04) 60%, rgba(255,95,55,.08) 100%);
  animation:az80Heat 5.6s ease-in-out infinite alternate;
}
@keyframes az80SparkRise{0%{transform:translateY(0)}100%{transform:translateY(-44px)}}
@keyframes az80Heat{0%{opacity:.28; filter:blur(0)}100%{opacity:.62; filter:blur(3px)}}
body.az-v22-body .az80-ambient{
  position:absolute;
  width:38vw;
  height:38vw;
  z-index:0;
  border-radius:999px;
  filter:blur(56px);
  opacity:.36;
  background:radial-gradient(circle, rgba(255,82,48,.40), rgba(255,82,48,.08) 58%, transparent 73%);
}
body.az-v22-body .az80-ambient-left{left:-12vw; bottom:8vh; animation:az80Ambient 7s ease-in-out infinite alternate}
body.az-v22-body .az80-ambient-right{right:-12vw; bottom:10vh; animation:az80Ambient 6.5s ease-in-out infinite alternate-reverse}
@keyframes az80Ambient{0%{transform:scale(.95); opacity:.24}100%{transform:scale(1.12); opacity:.50}}

/* make panels lighter so full-page animation is visible around and through them */
body.az-v22-body .az74-card{
  background:linear-gradient(180deg, rgba(31,36,67,.26), rgba(17,20,40,.42)) !important;
  border-color:rgba(255,191,141,.12) !important;
  backdrop-filter:blur(6px) !important;
}
body.az-v22-body .az74-news-card,
body.az-v22-body .az74-subpage-card{background:linear-gradient(180deg, rgba(28,32,58,.34), rgba(14,17,32,.52)) !important}
body.az-v22-body .az74-rank-card,
body.az-v22-body .az74-login-card,
body.az-v22-body .az74-guild-card,
body.az-v22-body .az74-community-card{background:linear-gradient(180deg, rgba(32,38,72,.30), rgba(17,20,40,.48)) !important}
body.az-v22-body .az74-footer{background:linear-gradient(180deg, rgba(49,42,69,.30), rgba(25,22,46,.42)) !important}

@media(max-width:1500px){
  body.az-v22-body .az80-char{height:min(88vh, 800px); width:min(32vw, 480px)}
  body.az-v22-body .az80-char-left{left:-4vw}
  body.az-v22-body .az80-char-right{right:-4vw}
}
@media(max-width:1180px){
  body.az-v22-body .az80-char{opacity:.70; height:min(82vh, 720px); width:min(30vw, 390px)}
}
@media(max-width:900px){
  body.az-v22-body .az80-char{display:none}
}
@media (prefers-reduced-motion: reduce){
  body.az-v22-body .az80-live-bg::before,
  body.az-v22-body .az80-live-bg::after,
  body.az-v22-body .az80-char,
  body.az-v22-body .az80-char .az80-body,
  body.az-v22-body .az80-char .az80-cloth,
  body.az-v22-body .az80-sparks,
  body.az-v22-body .az80-sparks::before,
  body.az-v22-body .az80-sparks::after,
  body.az-v22-body .az80-ambient{animation:none !important}
}