/* Homepage scenery: keep the quiet centre clear for the existing logo and copy. */
.hero {
  background:
    linear-gradient(180deg, rgba(11, 9, 11, .12) 0%, rgba(11, 9, 11, .08) 48%, #0b090b 100%),
    url("assets/barrage-wilderness-v1.png") center center / cover no-repeat;
}
.hero-glow {
  background: radial-gradient(ellipse at 50% 40%, rgba(11, 9, 11, .5), transparent 65%);
}
.hero-copy, .availability, .scroll-link, .launch {
  text-shadow: 0 2px 12px #000;
}
.hero-copy { color: #c4b8bb; }
.hero-atmosphere { position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.hero-mist { position:absolute; left:-20%; bottom:-8%; width:140%; height:38%; opacity:.23; background:radial-gradient(ellipse at 20% 60%,#aea1ac35,transparent 45%),radial-gradient(ellipse at 72% 70%,#c0aeb02b,transparent 42%); animation:mist-drift 28s ease-in-out infinite alternate; }
.mist-two { bottom:5%; height:25%; opacity:.16; animation-duration:36s; animation-direction:alternate-reverse; }
.hero-embers { position:absolute; inset:0; }
.hero-embers i { position:absolute; bottom:8%; left:7%; width:3px; height:3px; border-radius:50%; background:#ee8363; box-shadow:0 0 7px 2px #e53c3c55; opacity:0; animation:ember-rise 13s linear infinite; }
.hero-embers i:nth-child(2) { left:13%; animation-delay:-7s; animation-duration:17s; }
.hero-embers i:nth-child(3) { left:20%; animation-delay:-3s; animation-duration:15s; width:2px; height:2px; }
.hero-embers i:nth-child(4) { left:27%; animation-delay:-11s; animation-duration:19s; }
.hero-embers i:nth-child(5) { left:4%; animation-delay:-5s; animation-duration:16s; }
.hero-embers i:nth-child(6) { left:34%; animation-delay:-12s; animation-duration:21s; width:2px; height:2px; }
.hero-embers i:nth-child(7) { left:72%; animation-delay:-8s; animation-duration:17s; }
.hero-embers i:nth-child(8) { left:80%; animation-delay:-2s; animation-duration:14s; }
.hero-embers i:nth-child(9) { left:88%; animation-delay:-10s; animation-duration:20s; width:2px; height:2px; }
.hero-embers i:nth-child(10) { left:95%; animation-delay:-6s; animation-duration:16s; }
.hero-embers i:nth-child(11) { left:84%; animation-delay:-14s; animation-duration:23s; }
.hero-embers i:nth-child(12) { left:66%; animation-delay:-4s; animation-duration:18s; width:2px; height:2px; }
@keyframes ember-rise { 0% { transform:translate3d(0,0,0); opacity:0; } 12% { opacity:.65; } 65% { opacity:.4; } 100% { transform:translate3d(45px,-500px,0); opacity:0; } }
@keyframes mist-drift { from { transform:translate3d(-4%,0,0); } to { transform:translate3d(4%,-12px,0); } }
@media(max-width:720px) { .hero-embers i:nth-child(even) { display:none; } .hero-mist { opacity:.14; } }
@media(prefers-reduced-motion:reduce) { .hero-embers { display:none; } .hero-mist { animation:none; } }
.availability { color: #b7a6ad; }
.raid-panorama {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:none;
  min-height:560px;
  display:grid;
  place-items:center;
  padding:105px 30px;
  border:0;
  background:#0b090b;
}
.raid-scenery { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.raid-scene { position:absolute; top:0; height:100%; width:46%; object-fit:cover; }
.scene-tombs { left:0; object-position:48% center; mask-image:linear-gradient(90deg,#000 55%,transparent 100%); }
.scene-theatre { left:27%; object-position:40% center; mask-image:linear-gradient(90deg,transparent,#000 23%,#000 77%,transparent); }
.scene-xeric { right:0; object-position:55% center; mask-image:linear-gradient(90deg,transparent,#000 45%); }
.raid-panorama::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,#0b090b 0%,#0b090b30 28%,#0b090b30 72%,#0b090b 100%),
    radial-gradient(ellipse at center,#0b090be0 0%,#0b090b99 36%,#0b090b18 85%);
}
.raid-panorama .section-heading { max-width:800px; text-shadow:0 2px 16px #000; }
.raid-panorama .section-heading h2 { font-size:clamp(32px,3.8vw,50px); margin-bottom:24px; }
.chapter-rule { width:110px; height:1px; margin:0 auto 25px; background:linear-gradient(90deg,transparent,#e9676d,transparent); }
.raid-panorama .section-heading>p:last-child { color:#d2c5c9; margin:0; }
@media(max-width:720px) {
  .raid-panorama { min-height:540px; padding:95px 24px; }
  .raid-scene { width:70%; }
  .scene-tombs { left:-20%; }
  .scene-theatre { left:15%; }
  .scene-xeric { right:-20%; }
  .raid-panorama .section-heading>p:last-child { font-size:15px; }
}
.community {
  display:block;
  max-width:none;
  min-height:510px;
  padding:105px 30px;
  border-bottom:1px solid #ffffff12;
  background:
    linear-gradient(180deg, #0b090b 0%, transparent 24%, transparent 76%, #0b090b 100%),
    linear-gradient(90deg, #0b090bf5 0%, #0b090be0 30%, #0b090b65 65%, #0b090b30),
    url("assets/community-tombs-art.jpg") center 42% / cover no-repeat;
}
.community-content { max-width:1120px; margin:auto; }
.community-content h2 { max-width:620px; text-shadow:0 3px 20px #0008; }
.community-content p:not(.eyebrow) { color:#c9bcc0; }
.community-content .button { background:#21171ded; }
@media(max-width:720px) {
  .community { min-height:510px; padding:90px 24px; background-position:center, center, 62% center; }
  .community-content h2 { font-size:clamp(27px,6vw,39px); }
  .community-content p:not(.eyebrow) { max-width:310px; }
}
.final-cta {
  background:
    linear-gradient(180deg, #0b090b, #0b090b9e 45%, #0b090be8),
    url("assets/barrage-wilderness-v1.png") center 65% / cover no-repeat;
}
@media (max-width: 720px) {
  .hero {
    background-position: center, 62% center;
    background-size: auto, auto 100%;
  }
  .hero-glow {
    background: linear-gradient(90deg, #0b090b55, #0b090b88 45%, #0b090b33);
  }
}