/* Sanctuary of Exile — Darker Theme
   Inspired by uploaded styles.css (see referenced file)
   Stronger blacks, muted gold accents, flatter panels, heavier shadows
*/

@font-face {
  font-family: "ExocetBlizzardMixedCaps";
  src: url("ExocetBlizzardMixedCaps-Medium-CeveHi9Z.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

:root {
  --bg: #050608;
  --bg2: #0b0b0c;
  --panel: rgba(0,0,0,0.65);
  --panelSoft: rgba(0,0,0,0.45);

  --gold: #caa14a;
  --goldDark: #6b4b16;
  --text: #d9d3c7;
  --muted: #9a948a;

  --border: rgba(255,255,255,0.08);
  --shadow: 0 14px 30px rgba(0,0,0,0.6);

  --bgCut1: 105vh;  /* bg1 → bg2 */
  --bgCut2: 220vh;  /* bg2 → bg3 */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "ExocetBlizzardMixedCaps", serif;
  color: var(--text);
  background: #050608;
  letter-spacing: 0.3px;
}

html, body{
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

.container {
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
}

h1, h2, h3 {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.section {
  padding: 70px 0;
}

.section__head h2 {
  font-size: 32px;
  margin-bottom: 12px;
}

.section__head p {
  color: var(--muted);
}

.hero {
  padding: 90px 0 40px;
}

.hero h1 {
  font-size: clamp(42px, 5vw, 64px);
  margin: 0 0 20px;
}

.lead {
  color: rgba(217,211,199,0.85);
  line-height: 1.6;
  font-size: 20px;
  text-align: center;
}

.lead--title {
  text-align: center;
}

.frame,
.card,
.panelCard,
.bossCard {
  background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.55));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px;
}

.btn--large {
  font-family: "ExocetBlizzardMixedCaps";
  font-size: 20px;
  padding: 22px 48px;
  min-width: 260px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(
  180deg,
  rgba(202,161,74,0.8),
  rgba(107,75,22,0.8)
  );
  border: 1px solid rgba(202,161,74,0.45);
  color: #f3f3f3;
  text-decoration: none;
}

.btn--large{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  white-space: nowrap;
  line-height: 1.1;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn--ghost {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.14);
}

.stat {
  background: var(--panelSoft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.list li::before {
  color: var(--gold);
}

.accordion details {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

summary {
  padding: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

summary::after {
  content: "+";
  float: right;
  color: var(--gold);
}

details[open] summary::after {
  content: "–";
}

.footer {
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.6);
  padding: 20px 0;
  text-align: center;
  color: var(--muted);
}

@media (max-width: 980px) {
  .hero {
    padding-top: 60px;
  }
}

/* Always make the media pane tall enough on small screens */
@media (max-width: 980px){
  .featureSplit__media{
    min-height: 240px;  /* bump to 280/320 if you want bigger */
  }

  .blendVideo{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

@media (max-width: 980px){
  .featureSplit--reverse .featureSplit__media{
    min-height: 240px;
  }
}

/* -------------------------------------------------------------------------- */
/* Animated fire/ashes background (embers + grain + vignette)                  */
/* -------------------------------------------------------------------------- */

.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

.bg__vignette{
  position:absolute;
  inset:-2px;
  background: radial-gradient(1400px 900px at 50% 30%, transparent 45%, rgba(0,0,0,.82) 100%);
  opacity:.95;
}

.bg__grain{
  position:absolute;
  inset:-2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity:.18;
}

.bg__embers{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.bg__embers span{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(240,214,162,.95), rgba(202,161,74,.40) 52%, rgba(255,122,58,.25) 72%, transparent 75%);
  filter: blur(.1px);
  animation: ember 10s linear infinite;
  opacity:.7;
}

/* distribute particles */
.bg__embers span:nth-child(1){ left:8%;  top:112%; animation-duration:11s; animation-delay:-2s;  transform:scale(1.4); }
.bg__embers span:nth-child(2){ left:18%; top:130%; animation-duration:10s; animation-delay:-6s;  transform:scale(1.1); }
.bg__embers span:nth-child(3){ left:28%; top:118%; animation-duration:13s; animation-delay:-3s;  transform:scale(1.6); }
.bg__embers span:nth-child(4){ left:40%; top:126%; animation-duration:12s; animation-delay:-8s;  transform:scale(1.2); }
.bg__embers span:nth-child(5){ left:52%; top:142%; animation-duration:9s;  animation-delay:-1s;  transform:scale(1.0); }
.bg__embers span:nth-child(6){ left:64%; top:120%; animation-duration:14s; animation-delay:-4s;  transform:scale(1.5); }
.bg__embers span:nth-child(7){ left:74%; top:136%; animation-duration:10s; animation-delay:-5s;  transform:scale(1.1); }
.bg__embers span:nth-child(8){ left:86%; top:150%; animation-duration:15s; animation-delay:-7s;  transform:scale(1.8); }
.bg__embers span:nth-child(9){ left:12%; top:156%; animation-duration:12s; animation-delay:-9s;  transform:scale(1.3); }
.bg__embers span:nth-child(10){left:34%; top:160%; animation-duration:16s; animation-delay:-10s; transform:scale(1.9); }
.bg__embers span:nth-child(11){left:58%; top:152%; animation-duration:11s; animation-delay:-6s;  transform:scale(1.2); }
.bg__embers span:nth-child(12){left:92%; top:145%; animation-duration:13s; animation-delay:-11s; transform:scale(1.4); }
.bg__embers span:nth-child(13){left:22%; top:168%; animation-duration:18s; animation-delay:-12s; transform:scale(2.1); }
.bg__embers span:nth-child(14){left:48%; top:170%; animation-duration:17s; animation-delay:-13s; transform:scale(1.7); }
.bg__embers span:nth-child(15){left:70%; top:166%; animation-duration:19s; animation-delay:-14s; transform:scale(2.2); }
.bg__embers span:nth-child(16){left:96%; top:162%; animation-duration:20s; animation-delay:-15s; transform:scale(2.0); }

@keyframes ember{
  0%   { transform: translateY(0) translateX(0) scale(1); opacity:0; }
  10%  { opacity:.65; }
  60%  { opacity:.55; }
  100% { transform: translateY(-145vh) translateX(-22px) scale(2.0); opacity:0; }
}




/* -------------------------------------------------------------------------- */
/* Burning Hells background + denser embers                                   */
/* -------------------------------------------------------------------------- */

/* Base: no radial light. Keep it flat and infernal; the 'hell' layer does the texture. */
body {
  background: #050608;
}

.bg__hell{
  position:absolute;
  inset:-2px;
  /* 'Burning Hells' vibe: soot + lava glow near bottom + cracked/ashy texture */
  background:
    /* lava glow bands */
    linear-gradient(180deg,
      rgba(0,0,0,0.92) 0%,
      rgba(0,0,0,0.78) 40%,
      rgba(18,6,4,0.92) 62%,
      rgba(52,16,8,0.96) 78%,
      rgba(10,4,4,0.98) 100%
    ),
    /* faint heat pockets (subtle, not "radial light") */
    linear-gradient(90deg,
      rgba(182,58,47,0.05),
      rgba(255,122,58,0.03),
      rgba(202,161,74,0.03),
      rgba(182,58,47,0.05)
    ),
    /* crack-like streaks */
    repeating-linear-gradient(115deg,
      rgba(255,122,58,0.06) 0px,
      rgba(255,122,58,0.00) 18px,
      rgba(0,0,0,0.00) 44px
    ),
    repeating-linear-gradient(65deg,
      rgba(202,161,74,0.04) 0px,
      rgba(202,161,74,0.00) 14px,
      rgba(0,0,0,0.00) 40px
    ),
    /* gritty soot noise */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  background-blend-mode: normal, screen, overlay, overlay, overlay;
  opacity: 1;
}

/* Slow moving smoke/heat haze */
.bg__smoke{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 520px at 25% 25%, rgba(182,58,47,0.10), transparent 60%),
    radial-gradient(900px 520px at 75% 35%, rgba(255,122,58,0.08), transparent 62%),
    radial-gradient(1100px 700px at 50% 90%, rgba(202,161,74,0.06), transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='520' height='520' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
  opacity: .35;
  filter: blur(18px);
  animation: smokeDrift 14s ease-in-out infinite;
}

@keyframes smokeDrift {
  0%   { transform: translate3d(-1.5%, 1.0%, 0) scale(1.02); opacity: .28; }
  50%  { transform: translate3d(1.8%, -1.2%, 0) scale(1.06); opacity: .40; }
  100% { transform: translate3d(-1.5%, 1.0%, 0) scale(1.02); opacity: .28; }
}

/* Denser ember field:
   - keep your existing <span> embers for larger “hero” flecks
   - add two pseudo-element fields with many box-shadows for density
*/
.bg__embers::before,
.bg__embers::after {
  content:"";
  position:absolute;
  left:0; top:0;
  width:2px; height:2px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(240,214,162,.95), rgba(202,161,74,.40) 55%, rgba(255,122,58,.22) 75%, transparent 78%);
  opacity: .55;
  filter: blur(.1px);
  will-change: transform, opacity;
}

.bg__embers::before {
  box-shadow:
      calc(61.78vw) calc(137.33vh) 0.44px 0.35px,
      calc(16.57vw) calc(157.71vh) 0.46px 0.47px,
      calc(92.17vw) calc(121.53vh) 1.19px 0.12px,
      calc(65.63vw) calc(163.86vh) 0.13px 0.49px,
      calc(39.87vw) calc(104.57vh) 0.84px 0.21px,
      calc(40.36vw) calc(156.11vh) 0.96px 0.40px,
      calc(83.25vw) calc(141.61vh) 0.55px 0.57px,
      calc(79.57vw) calc(121.96vh) 0.83px 0.55px,
      calc(45.72vw) calc(118.54vh) 0.24px 0.04px,
      calc(52.54vw) calc(143.31vh) 0.69px 0.03px,
      calc(40.75vw) calc(145.70vh) 0.74px 0.41px,
      calc(63.50vw) calc(113.79vh) 0.34px 0.27px,
      calc(91.65vw) calc(155.88vh) 0.38px 0.48px,
      calc(61.08vw) calc(130.25vh) 0.95px 0.33px,
      calc(77.60vw) calc(138.88vh) 0.77px 0.51px,
      calc(21.37vw) calc(168.21vh) 0.63px 0.32px,
      calc(77.53vw) calc(103.53vh) 0.59px 0.44px,
      calc(45.52vw) calc(162.92vh) 0.97px 0.29px,
      calc(75.22vw) calc(151.02vh) 0.42px 0.34px,
      calc(56.90vw) calc(118.01vh) 0.08px 0.08px,
      calc(5.89vw) calc(111.91vh) 0.98px 0.12px,
      calc(95.27vw) calc(158.35vh) 1.05px 0.33px,
      calc(42.71vw) calc(142.45vh) 1.06px 0.56px,
      calc(42.99vw) calc(151.88vh) 0.19px 0.38px,
      calc(34.73vw) calc(104.79vh) 0.42px 0.41px,
      calc(60.10vw) calc(150.22vh) 0.23px 0.29px,
      calc(61.32vw) calc(138.70vh) 0.19px 0.43px,
      calc(84.27vw) calc(127.51vh) 0.23px 0.46px,
      calc(62.49vw) calc(129.23vh) 0.19px 0.28px,
      calc(69.77vw) calc(122.52vh) 0.04px 0.36px,
      calc(64.13vw) calc(121.49vh) 1.13px 0.33px,
      calc(78.08vw) calc(161.18vh) 0.27px 0.18px,
      calc(44.01vw) calc(126.53vh) 0.76px 0.09px,
      calc(82.03vw) calc(153.38vh) 0.28px 0.49px,
      calc(8.58vw) calc(148.58vh) 0.41px 0.50px,
      calc(27.52vw) calc(136.90vh) 0.71px 0.23px,
      calc(13.95vw) calc(160.12vh) 0.61px 0.23px,
      calc(63.95vw) calc(107.96vh) 0.29px 0.03px,
      calc(79.08vw) calc(114.87vh) 0.64px 0.56px,
      calc(58.00vw) calc(107.21vh) 1.03px 0.57px,
      calc(50.58vw) calc(141.37vh) 0.77px 0.38px,
      calc(49.63vw) calc(101.11vh) 0.18px 0.59px,
      calc(91.52vw) calc(145.45vh) 0.74px 0.56px,
      calc(73.52vw) calc(101.46vh) 0.95px 0.10px,
      calc(75.18vw) calc(145.34vh) 0.85px 0.48px,
      calc(46.10vw) calc(156.36vh) 0.81px 0.45px,
      calc(2.51vw) calc(129.84vh) 0.95px 0.06px,
      calc(16.99vw) calc(150.24vh) 1.09px 0.38px,
      calc(85.89vw) calc(110.98vh) 0.24px 0.05px,
      calc(55.00vw) calc(163.84vh) 0.69px 0.15px,
      calc(91.43vw) calc(104.12vh) 0.27px 0.47px,
      calc(32.83vw) calc(138.61vh) 0.57px 0.12px,
      calc(7.38vw) calc(159.38vh) 0.79px 0.22px,
      calc(58.03vw) calc(101.94vh) 1.12px 0.41px,
      calc(95.21vw) calc(104.14vh) 0.66px 0.07px,
      calc(65.20vw) calc(127.88vh) 0.33px 0.34px,
      calc(28.71vw) calc(148.27vh) 0.01px 0.51px,
      calc(29.94vw) calc(126.01vh) 0.92px 0.19px,
      calc(75.61vw) calc(103.96vh) 0.91px 0.03px,
      calc(76.18vw) calc(156.06vh) 0.75px 0.24px,
      calc(17.37vw) calc(134.77vh) 0.81px 0.11px,
      calc(7.35vw) calc(113.24vh) 1.16px 0.38px,
      calc(78.45vw) calc(111.06vh) 0.27px 0.36px,
      calc(8.04vw) calc(115.65vh) 0.22px 0.01px,
      calc(95.98vw) calc(136.61vh) 0.91px 0.06px,
      calc(92.44vw) calc(122.50vh) 0.06px 0.43px,
      calc(49.06vw) calc(157.91vh) 0.39px 0.47px,
      calc(58.45vw) calc(123.14vh) 0.84px 0.06px,
      calc(53.85vw) calc(148.78vh) 0.07px 0.41px,
      calc(39.83vw) calc(102.69vh) 0.48px 0.59px,
      calc(4.09vw) calc(143.02vh) 0.52px 0.27px,
      calc(99.20vw) calc(141.80vh) 0.74px 0.34px,
      calc(95.64vw) calc(106.27vh) 1.18px 0.40px,
      calc(77.18vw) calc(152.18vh) 0.04px 0.09px,
      calc(22.81vw) calc(143.46vh) 0.20px 0.12px,
      calc(82.29vw) calc(127.05vh) 0.41px 0.22px,
      calc(21.59vw) calc(157.70vh) 1.05px 0.16px,
      calc(54.10vw) calc(106.00vh) 1.11px 0.29px,
      calc(15.13vw) calc(107.60vh) 0.25px 0.54px,
      calc(70.45vw) calc(111.42vh) 0.05px 0.00px,
      calc(23.73vw) calc(124.62vh) 0.37px 0.39px,
      calc(73.07vw) calc(129.56vh) 0.63px 0.55px,
      calc(73.05vw) calc(128.26vh) 0.24px 0.11px,
      calc(83.25vw) calc(149.93vh) 1.13px 0.32px,
      calc(66.19vw) calc(103.98vh) 1.10px 0.06px,
      calc(55.59vw) calc(120.05vh) 1.05px 0.55px,
      calc(25.46vw) calc(122.44vh) 0.83px 0.39px,
      calc(54.10vw) calc(141.22vh) 0.64px 0.02px,
      calc(32.26vw) calc(158.30vh) 1.12px 0.26px,
      calc(88.66vw) calc(145.04vh) 0.68px 0.10px;
  animation: emberFieldA 9.5s linear infinite;
}

.bg__embers::after {
  width: 3px; height: 3px;
  opacity: .40;
  filter: blur(.2px);
  box-shadow:
      calc(37.56vw) calc(151.39vh) 0.03px 0.04px,
      calc(18.96vw) calc(165.58vh) 0.46px 0.19px,
      calc(79.42vw) calc(149.16vh) 0.74px 0.24px,
      calc(45.29vw) calc(167.28vh) 0.15px 0.23px,
      calc(38.81vw) calc(116.10vh) 0.40px 0.15px,
      calc(56.78vw) calc(166.98vh) 0.30px 0.06px,
      calc(18.57vw) calc(137.84vh) 0.50px 0.31px,
      calc(65.50vw) calc(150.34vh) 0.84px 0.56px,
      calc(66.89vw) calc(154.09vh) 0.93px 0.18px,
      calc(38.51vw) calc(141.05vh) 0.62px 0.46px,
      calc(10.23vw) calc(184.79vh) 0.28px 0.09px,
      calc(70.03vw) calc(166.67vh) 0.88px 0.57px,
      calc(5.54vw) calc(159.71vh) 0.05px 0.57px,
      calc(61.54vw) calc(155.79vh) 1.05px 0.46px,
      calc(61.68vw) calc(137.47vh) 0.36px 0.43px,
      calc(93.77vw) calc(183.39vh) 1.16px 0.24px,
      calc(76.12vw) calc(167.15vh) 0.04px 0.37px,
      calc(86.69vw) calc(182.83vh) 0.52px 0.24px,
      calc(44.72vw) calc(160.64vh) 0.28px 0.42px,
      calc(51.77vw) calc(142.22vh) 0.90px 0.35px,
      calc(25.60vw) calc(124.15vh) 0.00px 0.38px,
      calc(31.36vw) calc(112.20vh) 0.34px 0.13px,
      calc(47.74vw) calc(118.83vh) 0.06px 0.01px,
      calc(23.24vw) calc(159.45vh) 0.70px 0.17px,
      calc(43.85vw) calc(151.71vh) 0.03px 0.40px,
      calc(31.43vw) calc(146.90vh) 0.72px 0.35px,
      calc(83.61vw) calc(160.14vh) 0.97px 0.56px,
      calc(63.66vw) calc(153.43vh) 0.58px 0.44px,
      calc(27.61vw) calc(156.07vh) 1.06px 0.32px,
      calc(30.81vw) calc(141.70vh) 0.56px 0.60px,
      calc(52.72vw) calc(144.78vh) 0.17px 0.41px,
      calc(99.11vw) calc(159.32vh) 0.41px 0.51px,
      calc(77.31vw) calc(184.88vh) 0.27px 0.16px,
      calc(62.77vw) calc(182.84vh) 1.02px 0.06px,
      calc(31.17vw) calc(160.35vh) 0.67px 0.07px,
      calc(69.04vw) calc(182.12vh) 0.23px 0.47px,
      calc(58.38vw) calc(142.93vh) 1.20px 0.52px,
      calc(87.16vw) calc(185.97vh) 0.04px 0.01px,
      calc(67.98vw) calc(155.52vh) 0.01px 0.34px,
      calc(84.04vw) calc(151.76vh) 0.06px 0.04px,
      calc(51.67vw) calc(176.58vh) 0.16px 0.60px,
      calc(53.81vw) calc(188.16vh) 0.33px 0.32px,
      calc(98.19vw) calc(130.52vh) 0.13px 0.17px,
      calc(94.99vw) calc(112.58vh) 0.24px 0.45px,
      calc(28.06vw) calc(132.14vh) 1.05px 0.08px,
      calc(14.94vw) calc(180.67vh) 0.12px 0.08px,
      calc(72.12vw) calc(131.41vh) 0.09px 0.38px,
      calc(96.45vw) calc(142.71vh) 0.52px 0.26px,
      calc(89.38vw) calc(179.68vh) 0.33px 0.18px,
      calc(87.16vw) calc(131.16vh) 1.09px 0.23px,
      calc(62.09vw) calc(179.47vh) 0.63px 0.52px,
      calc(18.23vw) calc(150.50vh) 0.40px 0.60px,
      calc(85.14vw) calc(189.02vh) 0.55px 0.26px,
      calc(28.07vw) calc(164.04vh) 1.13px 0.08px,
      calc(28.69vw) calc(172.96vh) 0.77px 0.37px,
      calc(48.52vw) calc(116.17vh) 0.66px 0.09px,
      calc(31.00vw) calc(133.80vh) 1.13px 0.10px,
      calc(79.80vw) calc(140.31vh) 0.67px 0.11px,
      calc(63.23vw) calc(129.35vh) 1.03px 0.32px,
      calc(1.54vw) calc(139.71vh) 1.05px 0.52px,
      calc(64.05vw) calc(136.73vh) 0.75px 0.35px,
      calc(23.14vw) calc(169.46vh) 1.16px 0.15px,
      calc(20.45vw) calc(164.37vh) 0.81px 0.52px,
      calc(66.28vw) calc(162.69vh) 0.06px 0.38px,
      calc(67.63vw) calc(112.04vh) 0.62px 0.46px,
      calc(88.70vw) calc(167.32vh) 0.75px 0.05px,
      calc(92.55vw) calc(150.65vh) 1.17px 0.30px,
      calc(71.50vw) calc(183.55vh) 0.67px 0.25px,
      calc(23.25vw) calc(129.66vh) 1.13px 0.32px,
      calc(98.75vw) calc(124.95vh) 0.59px 0.53px;
  animation: emberFieldB 12.5s linear infinite;
}

@keyframes emberFieldA {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: .55; }
  100% { transform: translate3d(-18px, -155vh, 0); opacity: 0; }
}

@keyframes emberFieldB {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .40; }
  100% { transform: translate3d(14px, -165vh, 0); opacity: 0; }
}

/* Make the existing span embers a touch larger/brighter for “foreground” ash */
.bg__embers span {
  width: 3.5px;
  height: 3.5px;
  opacity: .82;
  background: radial-gradient(circle, rgba(240,214,162,.95), rgba(202,161,74,.45) 55%, rgba(255,122,58,.28) 78%, transparent 82%);
}

@media (prefers-reduced-motion: reduce){
  .bg__embers span,
  .bg__embers::before,
  .bg__embers::after,
  .bg__smoke {
    animation: none !important;
  }
}



/* -------------------------------------------------------------------------- */
/* Background switched to provided image (scrolling)                           */
/* Fire layers removed, embers preserved                                       */
/* -------------------------------------------------------------------------- */

/* Use provided image as main background */
body{
  background: url("promobg.webp") no-repeat center top;
  background-size: cover;
  background-attachment: scroll;
}

/* Make background container scroll with page instead of fixed */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
/* Disable hell + flame + smoke layers */
.bg__hell,
.bg__flames,
.bg__smoke{
  display: none !important;
}

/* Keep embers visible above background */
.bg__embers{
  position: absolute;
  inset: 0;
  pointer-events: none;
}



/* -------------------------------------------------------------------------- */
/* FINAL OVERRIDES: scrolling background image + transparent section bands     */
/* -------------------------------------------------------------------------- */

/* Background image scrolls with the page content */
html, body { min-height: 100%; }
body{
  background-color: #050608 !important;
  background-image: url("promobg.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

/* Let the background show through sections */
.section{ background: transparent !important; }

/* Replace any opaque/gray band fills with translucent soot */
.section--band{
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.48)) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Ensure footer doesn't create a flat block */
.footer{
  background: rgba(0,0,0,.62) !important;
}

/* Keep vignette + grain subtle */
.bg__vignette{ opacity: .88 !important; }
.bg__grain{ opacity: .14 !important; }

/* Embers stay visible on top */
.bg__embers{ z-index: 2; }



/* -------------------------------------------------------------------------- */
/* v5: Two-stage scrolling background reveal                                   */
/* Top uses promobg.png; after 100vh, promobg2.jpg is revealed underneath      */
/* Embers remain as fixed overlay                                              */
/* -------------------------------------------------------------------------- */

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

/* No image on body; use bgStack for true “unveil” */
body{
  position: relative;
  background: #050608 !important;
}

/* Background stack scrolls with the document (not fixed) */
.bgStack{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -3;
  pointer-events: none;
}

/* Each layer is absolute within the document */
.bgStack__layer{
  position: absolute;
  left: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.bgStack__layer--one  { top: 0; height: var(--bgCut1); background-image:url(promobg.webp); }
.bgStack__layer--two  { top: var(--bgCut1); height: calc(var(--bgCut2) - var(--bgCut1)); background-image:url(promobg2.png); }
.bgStack__layer--three{ top: var(--bgCut2); height: calc(100% - var(--bgCut2)); min-height: 100vh; background-image:url(promobg3.jpg); }

/* A subtle universal darkening so UI remains readable on both images */
.bgStack__shade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.45) 40%, rgba(0,0,0,.62));
  opacity: 1;
}

/* Keep ember overlay fixed above the images */
.bg{
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
}

/* Ensure sections don’t paint opaque blocks that hide the background */
.section{ background: transparent !important; }

.section--band{
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.48)) !important;
}

/* Footer stays translucent */
.footer{ background: rgba(0,0,0,.62) !important; }

/* If any fire/hell layers exist, keep them off */
.bg__hell, .bg__flames, .bg__smoke{ display: none !important; }



/* -------------------------------------------------------------------------- */
/* Sticky footer (v6 behavior)                                                 */
/* -------------------------------------------------------------------------- */
html, body { height: 100%; }
body{
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}
main{ flex: 1 0 auto !important; }
.footer{ margin-top: auto !important; }

/* -------------------------------------------------------------------------- */
/* Video / media embeds (WebM)                                                */
/* -------------------------------------------------------------------------- */
.media{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.40);
  box-shadow: 0 14px 30px rgba(0,0,0,0.55);
}

.media__video{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* Optional: “cinematic” crop variant */
.media__video--crop{
  height: 320px;
  object-fit: cover;
}

.media__caption{
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(217,211,199,0.72);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.media__caption code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: rgba(217,211,199,0.92);
}

@media (max-width: 520px){
  .media__video--crop{ height: 220px; }
}

/* -------------------------------------------------------------------------- */
/* Blended right-side video (no UI, looping)                                   */
/* Inspired by PoE keepers-style right media pane                              */
/* -------------------------------------------------------------------------- */

.card--split{
  padding: 0; /* the split handles padding */
  overflow: visible;
}

.featureSplit{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  align-items: stretch;
  min-height: 320px;
}

.featureSplit__text{
  padding: 20px;
  position: relative;
  z-index: 1;
}

.featureSplit__text h3{
  margin-top: 0;
}

.featureSplit__media{
  position: relative;
  overflow: hidden;
  background: #000;
  border-left: 1px solid rgba(255,255,255,0.08);
}

/* The video itself fills the right side */
.blendVideo{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* “blend in” edge: fade into darkness toward the left side */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.65) 18%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.65) 18%, #000 42%);

  /* subtle cinematic tone */
    filter: saturate(1.1) contrast(1.05) brightness(1.12);
}

/* Veil adds vignette + soft smoke-like darkening */
.blendVideo__veil{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 70% 30%, rgba(0,0,0,0.25), rgba(0,0,0,0.62) 70%),
    linear-gradient(90deg, rgba(0,0,0,0.72), rgba(0,0,0,0.10) 55%, rgba(0,0,0,0.55));
  pointer-events: none;
  opacity: 0.45;
}

/* Prevent any interaction “UI feel” */
.featureSplit__media,
.blendVideo{
  pointer-events: none;
  user-select: none;
}

.mediaHint{
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(217,211,199,0.68);
}

.mediaHint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 11px;
  color: rgba(217,211,199,0.92);
}

/* Mobile: stack with video on top, still blended */
@media (max-width: 980px){
  .featureSplit{
    grid-template-columns: 1fr;
  }
  .featureSplit__media{
    min-height: 220px;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .blendVideo{
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  }
}

/* -------------------------------------------------------------------------- */
/* Item tooltip (Diablo-style)                                                 */
/* -------------------------------------------------------------------------- */

.itemGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.item{
  position: relative;
  display: inline-block;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}

.item--small{ padding: 12px; }

.item__img{
  height: auto;
  display: block;
  image-rendering: auto;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.65));
}

.item:focus-visible{
  box-shadow: 0 0 0 2px rgba(202,161,74,0.35), 0 14px 30px rgba(0,0,0,0.55);
}

/* Tooltip positioning */
.tooltip{
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translateY(-50%);
  width: min(360px, 72vw);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
  z-index: 50;
}

.tooltip--left{
  left: auto;
  right: calc(100% + 14px);
}

.item:hover .tooltip,
.item:focus .tooltip,
.item:focus-within .tooltip{
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* Diablo-ish panel */
.tooltip__inner{
  border-radius: 16px;
  border: 2px solid rgba(202,161,74,0.55);
  background:
    linear-gradient(180deg, rgba(0,0,0,1), rgba(0,0,0,1));
  box-shadow: 0 26px 70px rgba(0,0,0,0.75);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}

/* subtle inner edge + texture */
.tooltip__inner::before{
  content:"";
  position:absolute;
  inset: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events:none;
  display: none;
}
.tooltip__inner::after{
  content:"";
  position:absolute;
  inset:-2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 1;
  pointer-events:none;
}

/* Title block */
.ttTitle{
  text-align: center;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(240,214,162,0.95);
  margin-bottom: 4px;
}

.ttTitleHellforged{
  text-align: center;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
  color: rgba(172, 0, 0, 0.95);
  margin-bottom: 4px;
}

.ttTitleCurrency {
  text-align: center;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 4px;
  color: orange;
}

.ttTitleSkill {
  text-align: center;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 4px;
  color: white;
}

.ttSub{
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(217,211,199,0.70);
  margin-bottom: 10px;
}

.ttDivider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(202,161,74,0.55), transparent);
  margin: 12px 0;
}

.ttHeader{
  text-align: center;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(217,211,199,0.85);
  margin-bottom: 10px;
}

.ttRow{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(217,211,199,0.80);
}
.ttKey{ color: rgba(217,211,199,0.72); }
.ttVal{ color: rgba(217,211,199,0.92); }

.ttList{
  display: grid;
  gap: 6px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(217,211,199,0.90);
}

.ttBody{
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(217,211,199,0.70);
  line-height: 1.55;
}

/* Hide tooltip on touch devices (hoverless) unless focused */
@media (hover: none){
  .item:hover .tooltip{ opacity: 0; visibility: hidden; }
}

/* Responsive */
@media (max-width: 980px){
  .itemGrid{ grid-template-columns: 1fr; }
  .tooltip{
    left: 50%;
    right: auto;
    top: calc(100% + 12px);
    transform: translateX(-50%);
    width: min(420px, 92vw);
  }
  .tooltip--left{
    left: 50%;
    right: auto;
  }
  .item:hover .tooltip,
  .item:focus .tooltip,
  .item:focus-within .tooltip{
    transform: translateX(-50%);
  }
}

.section-title {
  font-size: 28px;
}

.featureSplit--reverse {
  grid-template-columns: 0.95fr 1.05fr;
}

.featureSplit--reverse .blendVideo{
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.65) 18%, #000 42%);
  mask-image: linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.65) 18%, #000 42%);
}

.featureSplit--reverse .featureSplit__text {
  order: 2;
}

.featureSplit--reverse .featureSplit__media {
  order: 1;
}

.item-unique {
  width: 100px;
}

.center-small {
  margin-bottom: 40px;
  margin-left: 15px;
}

.buttonRow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.cta-title {
  font-size: 26px;
  text-align: center;
}

.cta-text {
  font-size: 20px;
  text-align: center;
}

.paragraph-text {
  font-size: 17px;
}

.section--band--cta{
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.48)) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding-bottom: 525px;
}

.footerDiscord{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
  color: #caa14a;
  transition: transform .2s ease, color .2s ease;
}

.discordIcon{
  width: 26px;
  height: 26px;
}

.footerDiscord:hover{
  color: #ffffff;
  transform: translateY(-2px);
}

.footer .container{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.footerDiscord:hover{
  filter: drop-shadow(0 0 6px rgba(202,161,74,0.6));
}

/* Base: two-column layout */
.featureSplit{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-areas: "text media";
  align-items: stretch;
}

.featureSplit__text{ grid-area: text; }
.featureSplit__media{ grid-area: media; }

/* Reverse: swap columns */
.featureSplit--reverse{
  grid-template-areas: "media text";
}

@media (max-width: 980px){
  .featureSplit{
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media";
  }

  .featureSplit--reverse{
    grid-template-areas:
      "text"
      "media";
  }

  /* keep video filling the pane */
  .featureSplit__media{ min-height: 240px; overflow: hidden; }
  .blendVideo{ width: 100%; height: 100%; object-fit: cover; }
}

/* Tap-open state for touch devices */
.item.is-open .tooltip{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

@media (max-width: 980px){

  .tooltip{
    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
    width: min(420px, 92vw);

    z-index: 9999;
  }

}