/* ================= HeroWoW CUSTOM 3D Homepage Upgrade ================= */

:root{
  --hw-purple:#8a2cff;
  --hw-blue:#28c7ff;
  --hw-orange:#ff8a1f;
  --hw-dark:#05050c;
}

html, body{
  min-height:100%;
}

body{
  background:
    linear-gradient(180deg, rgba(2,2,8,.62), rgba(2,2,10,.92)),
    url('../img/herowow_custom_3d_bg.png') center top / cover fixed no-repeat !important;
  color:#fff;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 25%, rgba(40,199,255,.22), transparent 28%),
    radial-gradient(circle at 78% 38%, rgba(255,138,31,.22), transparent 30%),
    radial-gradient(circle at center, rgba(138,44,255,.26), transparent 48%);
  animation: herowowAura 9s ease-in-out infinite alternate;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.32) 1px, transparent 1.6px);
  background-size:90px 90px;
  opacity:.13;
  animation: herowowParticles 18s linear infinite;
  pointer-events:none;
}

@keyframes herowowAura{
  from{filter:hue-rotate(0deg) brightness(1);}
  to{filter:hue-rotate(18deg) brightness(1.15);}
}

@keyframes herowowParticles{
  from{transform:translateY(0);}
  to{transform:translateY(-90px);}
}

.hero, .home, .main, .banner, .intro, header, section:first-of-type{
  position:relative;
}

.hero{
  min-height:100vh !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(90deg, rgba(2,2,10,.84), rgba(8,5,24,.34), rgba(2,2,10,.82)),
    url('../img/herowow_custom_3d_bg.png') center center / cover no-repeat !important;
  border-bottom:1px solid rgba(138,44,255,.35);
  box-shadow:inset 0 -80px 120px rgba(0,0,0,.85);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%, rgba(138,44,255,.28), transparent 32%),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.68) 100%);
  pointer-events:none;
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:210px;
  background:linear-gradient(0deg, rgba(5,5,12,1), transparent);
  pointer-events:none;
}

.logo, .navbar-brand{
  transform:scale(.86);
  transform-origin:left center;
}

.logo a, .navbar-brand, .brand, .site-logo{
  font-weight:900 !important;
  letter-spacing:2px !important;
  color:#fff !important;
  text-transform:uppercase;
  text-shadow:
    0 0 9px rgba(255,255,255,.65),
    0 0 24px rgba(138,44,255,.95),
    0 0 48px rgba(40,199,255,.55);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.85));
}

.hero-content, .content, .landing-content{
  position:relative;
  z-index:2;
  padding:36px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(5,5,14,.36), rgba(20,10,40,.22));
  backdrop-filter:blur(4px);
}

.hero-content h1, h1{
  font-weight:950 !important;
  letter-spacing:3px;
  text-transform:uppercase;
  background:linear-gradient(180deg,#fff 0%,#aee8ff 38%,#8a2cff 70%,#ff8a1f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  text-shadow:none !important;
  filter:drop-shadow(0 0 18px rgba(138,44,255,.85)) drop-shadow(0 0 38px rgba(255,138,31,.38));
}

.hero-content p, .subtitle, .lead{
  color:#e9ddff !important;
  text-shadow:0 0 18px rgba(0,0,0,.9);
}

.topbar, .navbar, nav, .header{
  background:rgba(5,5,14,.68)!important;
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(138,44,255,.38);
  box-shadow:0 10px 35px rgba(0,0,0,.45);
}

.card, .box, .panel, .news-item, .server-card{
  background:linear-gradient(145deg, rgba(11,12,30,.88), rgba(31,13,62,.78)) !important;
  border:1px solid rgba(138,44,255,.36) !important;
  border-radius:22px !important;
  box-shadow:
    0 20px 45px rgba(0,0,0,.45),
    inset 0 0 30px rgba(138,44,255,.08),
    0 0 22px rgba(40,199,255,.08);
}

.card:hover, .box:hover, .panel:hover, .news-item:hover{
  transform:translateY(-4px);
  box-shadow:
    0 28px 60px rgba(0,0,0,.55),
    0 0 35px rgba(138,44,255,.22);
  transition:.25s ease;
}

.btn, button, input[type="submit"], .button{
  border-radius:14px !important;
  border:1px solid rgba(255,255,255,.20) !important;
  background:linear-gradient(135deg, var(--hw-purple), #2b7cff 55%, var(--hw-orange)) !important;
  color:#fff !important;
  font-weight:800 !important;
  letter-spacing:.8px;
  box-shadow:0 0 24px rgba(138,44,255,.35);
}

.btn:hover, button:hover, input[type="submit"]:hover, .button:hover{
  filter:brightness(1.16);
  transform:translateY(-2px);
  box-shadow:0 0 34px rgba(255,138,31,.38);
}

a{
  color:#9fe7ff;
}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#070711;}
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--hw-purple), var(--hw-orange));
  border-radius:20px;
}



/* =======================================================
   HERO WOW CUSTOM BACKGROUND FIX - LOAD LAST
   ======================================================= */

html,
body {
    min-height: 100% !important;
    background: #03060d url("../HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
    color: #f4e7c2 !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(2,5,12,.25), rgba(2,5,12,.90)),
        url("../HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
}

/* common wrappers */
.wrapper, .main, .content, .page, .container, #wrapper, #main, #content, .site {
    background-color: transparent !important;
}

/* panels */
.panel, .box, .card, .news, .widget, .module, .realm-status, .ranking, .server-status, table {
    background: rgba(5, 9, 18, 0.86) !important;
    border: 1px solid rgba(255, 211, 102, 0.28) !important;
    box-shadow: 0 0 35px rgba(0,0,0,.55) !important;
    border-radius: 14px !important;
}

/* header / menu */
.header, .top, .topbar, .navbar, nav, .menu, #header, #menu {
    background: rgba(3, 6, 13, 0.88) !important;
    border-bottom: 1px solid rgba(255, 211, 102, 0.25) !important;
}

h1, h2, h3, .title, .logo {
    color: #ffd66b !important;
    text-shadow: 0 0 22px rgba(255,199,74,.35), 0 4px 12px #000 !important;
}

a {
    color: #ffd66b !important;
}

.btn, .button, button, input[type="submit"], .play, .download, .register {
    background: linear-gradient(135deg, #7b1118, #c58a18, #ffd66b) !important;
    color: #160c03 !important;
    border: 1px solid rgba(255,226,139,.65) !important;
    box-shadow: 0 0 24px rgba(255,181,49,.35) !important;
    border-radius: 10px !important;
    font-weight: bold !important;
}

.btn:hover, .button:hover, button:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-1px) !important;
}

/* Try to override old image backgrounds */
[class*="bg"], [class*="background"], [id*="bg"], [id*="background"] {
    background-image:
        linear-gradient(rgba(2,5,12,.30), rgba(2,5,12,.86)),
        url("../HeroWoW_Custom/herowow-bg.svg") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}



/* =======================================================
   HERO WOW CUSTOM BACKGROUND FIX - LOAD LAST
   ======================================================= */

html,
body {
    min-height: 100% !important;
    background: #03060d url("/HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
    color: #f4e7c2 !important;
}

body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    background:
        linear-gradient(rgba(2,5,12,.25), rgba(2,5,12,.90)),
        url("/HeroWoW_Custom/herowow-bg.svg") center top / cover fixed no-repeat !important;
}

/* common wrappers */
.wrapper, .main, .content, .page, .container, #wrapper, #main, #content, .site {
    background-color: transparent !important;
}

/* panels */
.panel, .box, .card, .news, .widget, .module, .realm-status, .ranking, .server-status, table {
    background: rgba(5, 9, 18, 0.86) !important;
    border: 1px solid rgba(255, 211, 102, 0.28) !important;
    box-shadow: 0 0 35px rgba(0,0,0,.55) !important;
    border-radius: 14px !important;
}

/* header / menu */
.header, .top, .topbar, .navbar, nav, .menu, #header, #menu {
    background: rgba(3, 6, 13, 0.88) !important;
    border-bottom: 1px solid rgba(255, 211, 102, 0.25) !important;
}

h1, h2, h3, .title, .logo {
    color: #ffd66b !important;
    text-shadow: 0 0 22px rgba(255,199,74,.35), 0 4px 12px #000 !important;
}

a {
    color: #ffd66b !important;
}

.btn, .button, button, input[type="submit"], .play, .download, .register {
    background: linear-gradient(135deg, #7b1118, #c58a18, #ffd66b) !important;
    color: #160c03 !important;
    border: 1px solid rgba(255,226,139,.65) !important;
    box-shadow: 0 0 24px rgba(255,181,49,.35) !important;
    border-radius: 10px !important;
    font-weight: bold !important;
}

.btn:hover, .button:hover, button:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-1px) !important;
}

/* Try to override old image backgrounds */
[class*="bg"], [class*="background"], [id*="bg"], [id*="background"] {
    background-image:
        linear-gradient(rgba(2,5,12,.30), rgba(2,5,12,.86)),
        url("/HeroWoW_Custom/herowow-bg.svg") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
}