/* ==========================================================
   GHOSTMU FULL EFFECT STACK
   Enabled:
   1. Two-side ambient red/black texture
   2. Inner side moving fire
   3. Side-only rising sparks
   4. Main-page ember particles
   5. Hero warrior aura
   6. Logo breathing glow
   7. Main edge fire
   8. Drifting smoke
   9. Panel breathing glow
   10. CTA lava sweep
   11. Vignette / depth
   Geometry is preserved from the supplied composition.
   ========================================================== */

:root{--fire:#ff5b14;--hot:#ffb45e;}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020202;overflow-x:hidden}
body{font-family:Arial,Helvetica,sans-serif;position:relative}

/* ===== AMBIENT TWO-SIDE BACKGROUND ===== */
.side-ambient{
  position:fixed;top:0;bottom:0;width:calc((100vw - min(100vw,1280px))/2 + 42px);
  min-width:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse at 55% 25%,rgba(255,76,8,.13),transparent 34%),
    radial-gradient(ellipse at 50% 72%,rgba(255,48,0,.10),transparent 38%),
    linear-gradient(to bottom,#050201 0%,#080301 45%,#020101 100%);
}
.side-ambient.left{left:0}
.side-ambient.right{right:0;transform:scaleX(-1)}

.side-ambient::before{
  content:"";position:absolute;inset:-10% -35%;
  background-image:url("../images/hero-bg.webp");
  background-size:auto 105%;
  background-repeat:no-repeat;
  background-position:left center;
  filter:blur(22px) brightness(.22) saturate(1.55);
  opacity:.52;
  transform:scale(1.08);
}
.side-ambient::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right,rgba(0,0,0,.88),rgba(40,8,1,.36) 62%,rgba(255,73,8,.06) 100%),
    repeating-linear-gradient(165deg,
      transparent 0 34px,
      rgba(255,72,8,.035) 35px,
      transparent 37px 72px);
  animation:sideBreath 5.6s ease-in-out infinite;
}
@keyframes sideBreath{
  0%,100%{opacity:.70}
  50%{opacity:1}
}

/* molten glow hugging the inner side edges */
.side-flame{
  position:fixed;top:-3%;bottom:-3%;width:72px;z-index:1;pointer-events:none;
  opacity:.38;filter:blur(10px) saturate(1.5);mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 50% 10%,rgba(255,175,52,.52) 0 8%,transparent 11%),
    radial-gradient(ellipse at 48% 30%,rgba(255,70,4,.48) 0 11%,transparent 14%),
    radial-gradient(ellipse at 52% 56%,rgba(255,125,24,.44) 0 9%,transparent 12%),
    radial-gradient(ellipse at 48% 82%,rgba(255,55,0,.44) 0 12%,transparent 15%);
  background-size:100% 29%,100% 35%,100% 33%,100% 38%;
  animation:sideFire 5.7s linear infinite;
}
.side-flame.left{left:calc((100vw - min(100vw,1280px))/2 - 26px)}
.side-flame.right{right:calc((100vw - min(100vw,1280px))/2 - 26px);transform:scaleX(-1);animation-duration:6.3s}
@keyframes sideFire{
  from{background-position:0 0,0 18%,0 44%,0 72%}
  to{background-position:0 -29%,0 -11%,0 11%,0 34%}
}

/* subtle side sparks */
.side-sparks{
  position:fixed;inset:0;z-index:1;pointer-events:none;
}
.spark{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:#ff7b22;box-shadow:0 0 8px #ff4b08,0 0 16px rgba(255,70,0,.45);
  opacity:.0;animation:sparkRise linear infinite;
}
@keyframes sparkRise{
  0%{transform:translateY(16vh) scale(.5);opacity:0}
  12%{opacity:.65}
  80%{opacity:.22}
  100%{transform:translateY(-105vh) scale(1.1);opacity:0}
}

/* ===== ORIGINAL CENTER LAYOUT ===== */
.wrap{position:relative;z-index:2;display:flex;justify-content:center}
.page{
  position:relative;width:min(100vw,1280px);aspect-ratio:1024/1448;
  overflow:hidden;background:#030303;box-shadow:0 0 42px rgba(255,50,0,.10);
}
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;filter:contrast(1.02) saturate(1.05)}

.hero-aura{
  position:absolute;left:47%;top:3.5%;width:47%;height:26%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 55% 50%,rgba(255,125,30,.20),transparent 32%),
             radial-gradient(circle at 58% 52%,rgba(255,35,0,.13),transparent 57%);
  filter:blur(22px);mix-blend-mode:screen;animation:aura 4.2s ease-in-out infinite;
}
@keyframes aura{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:.95;transform:scale(1.03)}}

.logo-glow{
  position:absolute;left:1.2%;top:.8%;width:20%;height:7%;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,90,15,.36),transparent 66%);
  filter:blur(13px);mix-blend-mode:screen;animation:logo 2.7s ease-in-out infinite;
}
@keyframes logo{50%{opacity:.48;transform:scale(1.05)}}

.edge-fire{
  position:absolute;top:-2%;bottom:-2%;width:6.5%;z-index:3;pointer-events:none;
  opacity:.34;filter:blur(9px) saturate(1.45);mix-blend-mode:screen;
  background:
    radial-gradient(ellipse at 48% 12%,rgba(255,165,45,.50) 0 7%,transparent 10%),
    radial-gradient(ellipse at 55% 34%,rgba(255,80,5,.50) 0 10%,transparent 13%),
    radial-gradient(ellipse at 42% 58%,rgba(255,125,25,.45) 0 9%,transparent 12%),
    radial-gradient(ellipse at 56% 82%,rgba(255,55,0,.45) 0 12%,transparent 15%);
  background-size:100% 30%,100% 36%,100% 34%,100% 38%;
  animation:fireFlow 5.4s linear infinite;
}
.edge-fire.left{left:-2.2%}
.edge-fire.right{right:-2.2%;transform:scaleX(-1);animation-duration:6.1s}
@keyframes fireFlow{
  from{background-position:0 0,0 18%,0 44%,0 72%}
  to{background-position:0 -30%,0 -12%,0 10%,0 35%}
}

.panel{
  position:absolute;z-index:4;pointer-events:none;border:1px solid rgba(255,95,20,.12);
  opacity:.58;
  box-shadow:0 0 12px rgba(255,70,0,.18),inset 0 0 10px rgba(255,95,15,.05);
}
.countdown{left:8.4%;top:27.2%;width:83.2%;height:8.6%;border-radius:10px}
.ranking{left:8.4%;top:36.8%;width:83.2%;height:15.4%;border-radius:10px;animation-delay:.5s}
.download{left:8.5%;top:53.0%;width:50.2%;height:12.7%;border-radius:9px;animation-delay:1s}
.community{left:59.0%;top:53.0%;width:32.4%;height:12.7%;border-radius:9px;animation-delay:1.4s}
.register{left:8.4%;top:66.5%;width:83.2%;height:16.0%;border-radius:10px;animation-delay:1.8s}
.security{left:8.4%;top:83.5%;width:83.2%;height:7.5%;border-radius:10px;animation-delay:2.1s}
.cta{
  position:absolute;left:6.1%;top:22.05%;width:18.4%;height:3.3%;z-index:5;pointer-events:none;
  border-radius:5px;overflow:hidden;box-shadow:0 0 18px rgba(255,70,0,.26);
}
.cta::before{
  content:"";position:absolute;inset:-170%;
  background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,150,40,.10) 74%,rgba(255,235,130,.95) 79%,rgba(255,65,0,.95) 83%,transparent 89% 100%);
  animation:spin 3.1s linear infinite;
}
.cta::after{content:"";position:absolute;inset:2px;border-radius:4px;background:rgba(0,0,0,.015)}
@keyframes spin{to{transform:rotate(360deg)}}

.smoke{
  position:absolute;inset:-8%;z-index:2;pointer-events:none;opacity:.16;filter:blur(35px);
  background:radial-gradient(circle at 72% 18%,rgba(120,55,25,.24),transparent 18%),
             radial-gradient(circle at 28% 45%,rgba(90,40,20,.16),transparent 20%),
             radial-gradient(circle at 66% 72%,rgba(95,35,20,.15),transparent 22%);
  animation:smoke 14s ease-in-out infinite alternate;
}
@keyframes smoke{from{transform:translate(-16px,8px) scale(1)}to{transform:translate(22px,-12px) scale(1.04)}}

#embers{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;mix-blend-mode:screen}
.vignette{position:absolute;inset:0;z-index:7;pointer-events:none;background:radial-gradient(circle at 50% 42%,transparent 62%,rgba(0,0,0,.20) 100%)}

@media(max-width:1280px){
  .side-ambient,.side-flame,.side-sparks{display:none}
}