* {
  box-sizing: border-box;
}

:root {
  --bg: #080808;
  --bg2: #130b08;
  --orange: #ff5a00;
  --red: #ff1f00;
  --yellow: #ffc400;
  --text: #f6f1ea;
  --muted: #9e958e;
}

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Montserrat", sans-serif;
}

body {
  overflow-x: hidden;
}

#embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 69%, rgba(255, 65, 0, .22), transparent 17%),
    radial-gradient(circle at 65% 78%, rgba(255, 115, 0, .11), transparent 27%),
    linear-gradient(120deg, #070707 0%, #0d0907 54%, #130805 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 80%);
  z-index: -2;
}

.noise {
  position: absolute;
  inset: 0;
  opacity: .08;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.topbar {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 5vw;
}

.brand {
  font-family: "Anton", sans-serif;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: .12em;
}

.status-dot {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #c7beb8;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em;
}

.status-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 15px var(--orange);
  animation: blink 1.2s infinite;
}

@keyframes blink {
  50% { opacity: .35; transform: scale(.8); }
}

.content {
  position: relative;
  z-index: 8;
  width: min(600px, 90vw);
  margin-left: 7vw;
  padding-top: 5vh;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
}

h1 {
  margin: 0;
  font-family: "Anton", sans-serif;
  font-size: clamp(80px, 11vw, 170px);
  line-height: .78;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-shadow: 0 12px 45px rgba(0,0,0,.45);
}

h1 em {
  font-style: normal;
  font-size: .46em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.7);
  letter-spacing: .035em;
}

.progress-wrap {
  width: min(520px, 86vw);
  margin-top: 34px;
}

.progress-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 11px;
  letter-spacing: .17em;
  color: #b6ada6;
}

.progress-copy strong {
  color: white;
}

.progress-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0,0,0,.45);
}

.progress-bar {
  height: 100%;
  width: 70%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow));
  box-shadow: 0 0 20px rgba(255,70,0,.9);
  animation: load 1.6s cubic-bezier(.2,.8,.2,1);
}

@keyframes load {
  from { width: 0; }
  to { width: 70%; }
}

.subcopy {
  margin: 18px 0 0;
  color: #a9a09a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.ticket-btn,
.erupt-btn {
  min-height: 56px;
  border: 0;
  border-radius: 3px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  cursor: pointer;
}

.ticket-btn {
  min-width: 220px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 22px;
  color: #0a0a0a;
  text-decoration: none;
  background: linear-gradient(100deg, #ff3500, #ff7a00 68%, #ffc000);
  box-shadow: 0 0 30px rgba(255,66,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}

.ticket-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 42px rgba(255,66,0,.42);
}

.ticket-btn b {
  font-size: 22px;
}

.erupt-btn {
  padding: 0 20px;
  color: #fff;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(8px);
  transition: border-color .2s ease, background .2s ease;
}

.erupt-btn:hover {
  border-color: rgba(255,85,0,.75);
  background: rgba(255,70,0,.08);
}

.volcano-stage {
  position: absolute;
  z-index: 4;
  right: -2vw;
  bottom: -1vh;
  width: min(60vw, 900px);
  height: min(73vh, 780px);
  pointer-events: none;
}

.volcano {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 78%;
  height: 58%;
  transform: translateX(-50%);
  clip-path: polygon(3% 100%, 19% 68%, 30% 48%, 40% 19%, 50% 8%, 62% 20%, 71% 46%, 83% 68%, 98% 100%);
  background:
    radial-gradient(circle at 50% 25%, rgba(255,87,0,.17), transparent 18%),
    linear-gradient(140deg, #29211e 0%, #0d0c0c 35%, #241513 65%, #090909 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.85);
  filter: drop-shadow(0 -12px 25px rgba(255,56,0,.12));
  cursor: pointer;
  pointer-events: auto;
}

.volcano::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(118deg, transparent 0 35px, rgba(255,255,255,.035) 36px 38px, transparent 39px 70px);
  opacity: .55;
}

.crater {
  position: absolute;
  left: 50%;
  top: 7%;
  width: 29%;
  height: 11%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #020202;
  box-shadow:
    0 0 0 9px #191313,
    0 0 45px rgba(255,64,0,.45);
}

.lava-pool {
  position: absolute;
  inset: 22% 9%;
  border-radius: 50%;
  background: linear-gradient(90deg, #ff1900, #ff6700, #ffd000);
  filter: blur(1px);
  box-shadow: 0 0 25px #ff4b00, 0 0 50px rgba(255,62,0,.7);
  animation: lavaPulse 1.15s infinite alternate ease-in-out;
}

@keyframes lavaPulse {
  from { transform: scale(.92); filter: brightness(.85); }
  to { transform: scale(1.08); filter: brightness(1.4); }
}

.glow {
  position: absolute;
  width: 53%;
  height: 30%;
  left: 50%;
  bottom: 35%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255,49,0,.32);
  filter: blur(70px);
  animation: glowPulse 1.6s infinite alternate;
}

@keyframes glowPulse {
  to { transform: translateX(-50%) scale(1.18); opacity: .7; }
}

.ground-glow {
  position: absolute;
  bottom: -8%;
  left: 47%;
  width: 78%;
  height: 18%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(255,49,0,.14);
  filter: blur(35px);
}

.lava-stream {
  position: absolute;
  z-index: 8;
  bottom: 7%;
  width: 10px;
  background: linear-gradient(to bottom, #ffca00, #ff5b00, #ff1800);
  border-radius: 999px;
  box-shadow: 0 0 15px #ff4200;
  opacity: .85;
  transform-origin: top;
}

.lava-stream-1 {
  left: 49%;
  height: 35%;
  transform: rotate(7deg);
}
.lava-stream-2 {
  left: 57%;
  height: 27%;
  transform: rotate(-9deg);
  opacity: .65;
}
.lava-stream-3 {
  left: 40%;
  height: 19%;
  transform: rotate(14deg);
  opacity: .5;
}

.crack {
  position: absolute;
  width: 3px;
  background: linear-gradient(#ffc400, #ff3c00);
  box-shadow: 0 0 11px #ff3b00;
  border-radius: 50%;
  opacity: .7;
}
.crack-1 { height: 27%; left: 43%; top: 31%; transform: rotate(21deg); }
.crack-2 { height: 20%; left: 61%; top: 43%; transform: rotate(-28deg); }
.crack-3 { height: 17%; left: 34%; top: 52%; transform: rotate(-18deg); }

.rock {
  position: absolute;
  width: 55px;
  height: 35px;
  border-radius: 50%;
  background: #15100e;
  filter: blur(.2px);
  opacity: .7;
}
.rock-1 { left: 25%; top: 53%; transform: rotate(16deg); }
.rock-2 { left: 66%; top: 57%; transform: rotate(-25deg); }
.rock-3 { left: 52%; top: 72%; transform: rotate(9deg); }

.smoke {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 54%;
  width: 150px;
  height: 150px;
  margin-left: -75px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(82,70,64,.30), rgba(28,24,22,.07) 60%, transparent 72%);
  filter: blur(8px);
  animation: smokeUp 5s infinite ease-in-out;
}

.smoke-2 { animation-delay: -1.6s; transform: translateX(-35px) scale(.8); }
.smoke-3 { animation-delay: -3.1s; transform: translateX(38px) scale(.72); }

@keyframes smokeUp {
  0% { opacity: 0; transform: translateY(30px) scale(.7); }
  30% { opacity: .75; }
  100% { opacity: 0; transform: translateY(-240px) scale(2); }
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: visible;
  pointer-events: none;
}

.lava-particle {
  position: absolute;
  left: 50%;
  bottom: 55%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6a5 0 12%, #ffc400 18%, #ff5000 58%, #9c1200 100%);
  box-shadow: 0 0 13px #ff4b00, 0 0 28px rgba(255,68,0,.55);
  animation: erupt var(--duration) cubic-bezier(.16,.72,.24,1) forwards;
}

@keyframes erupt {
  0% {
    transform: translate(-50%, 0) scale(.5);
    opacity: 1;
  }
  65% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)) scale(.05);
    opacity: 0;
  }
}

.volcano-stage.erupting .volcano {
  animation: shake .42s linear 2;
}

.volcano-stage.erupting .glow {
  animation: blastGlow .65s ease-out;
}

.volcano-stage.erupting .lava-pool {
  animation: blastPool .7s ease-out;
}

@keyframes shake {
  0%,100% { transform: translateX(-50%) translate(0,0); }
  25% { transform: translateX(-50%) translate(-6px,3px); }
  50% { transform: translateX(-50%) translate(7px,-2px); }
  75% { transform: translateX(-50%) translate(-4px,-1px); }
}

@keyframes blastGlow {
  0% { transform: translateX(-50%) scale(1); opacity: .5; }
  50% { transform: translateX(-50%) scale(2.2); opacity: 1; }
  100% { transform: translateX(-50%) scale(1); opacity: .5; }
}

@keyframes blastPool {
  0% { transform: scale(1); }
  45% { transform: scale(2.3); filter: brightness(2); }
  100% { transform: scale(1); }
}

.hint {
  position: absolute;
  z-index: 9;
  right: 6vw;
  bottom: 25px;
  margin: 0;
  color: #6f6660;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
}

@media (max-width: 900px) {
  .hero {
    min-height: 100svh;
  }

  .topbar {
    padding: 22px 24px;
  }

  .content {
    width: calc(100% - 48px);
    margin-left: 24px;
    padding-top: 2vh;
  }

  h1 {
    font-size: clamp(75px, 24vw, 130px);
  }

  .volcano-stage {
    width: 105vw;
    height: 48vh;
    right: -20vw;
    opacity: .98;
  }

  .actions {
    max-width: 390px;
  }

  .ticket-btn,
  .erupt-btn {
    width: 100%;
  }

  .hint {
    display: none;
  }
}

@media (max-height: 720px) and (min-width: 901px) {
  .content { padding-top: 1vh; }
  h1 { font-size: 112px; }
  .progress-wrap { margin-top: 20px; }
  .actions { margin-top: 18px; }
}


/* Infernum logo treatment */
.infernum-logo { position: relative; display: inline-flex; align-items: baseline; gap: 9px; text-shadow: 0 0 22px rgba(255,65,0,.28); }
.infernum-logo > span:nth-child(2) { background: linear-gradient(180deg,#fff 20%,#bdb5af 58%,#ff5a00 150%); -webkit-background-clip:text; color:transparent; }
.infernum-logo small { font-family:"Montserrat",sans-serif; font-size:8px; letter-spacing:.42em; color:#ff5a00; position:absolute; left:39px; bottom:-8px; }
.logo-horns { color:#ff4a00; font-size:.75em; transform:rotate(180deg); filter:drop-shadow(0 0 8px #ff3900); }

/* Hanging devil */
.devil-rig { position:absolute; z-index:14; left:49%; bottom:53%; width:145px; height:235px; transform:translateX(-50%); transform-origin:50% 100%; pointer-events:none; }
.rope { position:absolute; left:72px; top:90px; width:4px; height:150px; border-radius:99px; background:linear-gradient(#3b2720,#9c3b1d 70%,#ff5a00); box-shadow:0 0 8px rgba(255,70,0,.45); transform:rotate(8deg); transform-origin:bottom; }
.devil { position:absolute; left:30px; top:0; width:92px; height:125px; transform-origin:54% 95%; filter:drop-shadow(0 8px 12px rgba(0,0,0,.8)); animation:devilHang 2.8s ease-in-out infinite; }
.devil-head { position:absolute; left:28px; top:4px; width:42px; height:39px; border-radius:48% 48% 44% 44%; background:linear-gradient(135deg,#b3150a,#5d0805 70%); box-shadow:inset -7px -7px 12px rgba(0,0,0,.35),0 0 12px rgba(255,35,0,.22); }
.horn { position:absolute; top:-16px; width:15px; height:23px; background:linear-gradient(#e6c6a5,#6d4632); clip-path:polygon(50% 0,100% 100%,0 78%); }
.horn-l { left:-5px; transform:rotate(-25deg); } .horn-r { right:-5px; transform:rotate(25deg); }
.eye { position:absolute; top:16px; width:5px; height:3px; border-radius:50%; background:#ffd400; box-shadow:0 0 7px #ff6a00; } .eye-l{left:9px}.eye-r{right:9px}
.devil-body { position:absolute; left:30px; top:38px; width:38px; height:51px; border-radius:45% 45% 30% 30%; background:linear-gradient(100deg,#86100a,#350504); }
.devil-arm,.devil-leg { position:absolute; width:13px; border-radius:99px; background:#6f0b07; transform-origin:top; }
.devil-arm { top:45px; height:47px; } .arm-l{left:25px;transform:rotate(42deg)} .arm-r{right:18px;transform:rotate(-58deg)}
.devil-leg { top:82px; height:47px; } .leg-l{left:38px;transform:rotate(17deg)} .leg-r{left:58px;transform:rotate(-18deg)}
.devil-tail { position:absolute; left:68px; top:68px; width:46px; height:42px; border-right:5px solid #760d08; border-bottom:5px solid #760d08; border-radius:0 0 80% 0; transform:rotate(15deg); }
.devil-tail::after { content:""; position:absolute; right:-10px; bottom:-9px; width:14px; height:14px; background:#9c120b; clip-path:polygon(0 0,100% 50%,0 100%); transform:rotate(18deg); }
.devil-flame { position:absolute; left:20px; top:34px; width:70px; height:90px; opacity:0; background:radial-gradient(ellipse at 50% 90%,#fff2a2 0 7%,#ffc400 12%,#ff4a00 38%,rgba(255,20,0,.55) 58%,transparent 72%); filter:blur(1px) drop-shadow(0 0 14px #ff3500); transform:scale(.6); }
@keyframes devilHang { 0%,100%{transform:rotate(-5deg) translateY(0)} 50%{transform:rotate(6deg) translateY(5px)} }
.volcano-stage.erupting .devil { animation:devilPanic .12s linear 7; }
.volcano-stage.erupting .devil-flame { animation:devilBurn .85s ease-out; }
.volcano-stage.erupting .rope { animation:ropeWhip .15s linear 6; }
@keyframes devilPanic { 0%{transform:rotate(-14deg) translate(-5px,-4px)} 50%{transform:rotate(15deg) translate(7px,-12px) scale(.96)} 100%{transform:rotate(-8deg) translate(-3px,2px)} }
@keyframes devilBurn { 0%{opacity:0;transform:scale(.3) translateY(25px)} 20%{opacity:1} 60%{opacity:1;transform:scale(1.25) translateY(-5px)} 100%{opacity:0;transform:scale(.8) translateY(-35px)} }
@keyframes ropeWhip { 0%,100%{transform:rotate(8deg)} 50%{transform:rotate(-8deg)} }

@media (max-width:900px){ .devil-rig{left:49%;bottom:52%;transform:translateX(-50%) scale(.72);transform-origin:bottom center;} }

/* Official Infernum logo image */
.infernum-logo { width: clamp(210px, 27vw, 430px); height: 110px; display:flex; align-items:center; }
.infernum-logo img { width:100%; height:100%; object-fit:contain; object-position:left center; mix-blend-mode:screen; filter:drop-shadow(0 0 14px rgba(255,255,255,.12)) drop-shadow(0 0 18px rgba(255,65,0,.16)); }
@media (max-width: 700px){ .infernum-logo { width:220px; height:82px; } }




/* ===== HOKAGE WALL — 5 CARVED HEADLINERS ===== */
.headliner-cliff{
  position:absolute;
  z-index:2;
  top:-3vh;
  right:-1vw;
  width:72vw;
  height:61vh;
  min-height:470px;
  max-height:720px;
  pointer-events:none;
  opacity:.94;
  filter:drop-shadow(0 38px 58px rgba(0,0,0,.96));
}

/* One continuous monumental mountain wall */
.cliff-rock{
  position:absolute;
  inset:0;
  clip-path:polygon(
    0 100%,0 49%,4% 43%,8% 36%,13% 39%,17% 26%,22% 30%,
    27% 18%,32% 25%,38% 12%,44% 19%,50% 6%,56% 16%,
    62% 10%,68% 21%,74% 14%,80% 26%,86% 21%,91% 35%,
    96% 31%,100% 45%,100% 100%
  );
  background:
    radial-gradient(ellipse at 50% 88%,rgba(255,67,0,.15),transparent 34%),
    repeating-linear-gradient(116deg,transparent 0 35px,rgba(255,255,255,.035) 36px 38px,transparent 39px 72px),
    repeating-linear-gradient(69deg,transparent 0 57px,rgba(0,0,0,.42) 58px 63px,transparent 64px 105px),
    linear-gradient(155deg,#4a3b31 0%,#211914 24%,#100d0b 49%,#2a1710 73%,#090807 100%);
  box-shadow:inset 0 -145px 145px rgba(0,0,0,.98),inset 0 35px 75px rgba(255,255,255,.025);
}
.cliff-rock:before{
  content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045' numOctaves='5' seed='19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;opacity:.7
}

/* Each portrait is treated like a giant stone relief carved into the same cliff */
.headliner-face{
  position:absolute;
  z-index:4;
  width:20.5%;
  height:64%;
  overflow:hidden;
  background:transparent;
  border:0;
  box-shadow:none;
  transform-origin:50% 80%;
  -webkit-mask-image:radial-gradient(ellipse 72% 88% at 50% 44%,#000 38%,rgba(0,0,0,.98) 52%,rgba(0,0,0,.5) 67%,transparent 82%);
  mask-image:radial-gradient(ellipse 72% 88% at 50% 44%,#000 38%,rgba(0,0,0,.98) 52%,rgba(0,0,0,.5) 67%,transparent 82%);
}
.headliner-face img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.28);
  filter:grayscale(1) sepia(.32) saturate(.35) contrast(2.15) brightness(.46);
  opacity:.93;
  mix-blend-mode:luminosity;
}
.headliner-face:before{
  content:"";position:absolute;z-index:2;inset:0;
  background:
    repeating-linear-gradient(105deg,transparent 0 16px,rgba(255,255,255,.055) 17px 18px,transparent 19px 35px),
    repeating-linear-gradient(72deg,transparent 0 29px,rgba(0,0,0,.36) 30px 34px,transparent 35px 62px),
    radial-gradient(ellipse at 50% 43%,rgba(135,105,82,.12) 0 25%,transparent 40%,rgba(0,0,0,.7) 78%);
  mix-blend-mode:overlay;
}
.headliner-face:after{
  content:"";position:absolute;z-index:3;inset:-5%;
  background:
    radial-gradient(ellipse at 50% 45%,transparent 0 36%,rgba(23,17,13,.18) 48%,rgba(10,8,7,.88) 79%),
    linear-gradient(90deg,rgba(0,0,0,.34),transparent 22% 78%,rgba(0,0,0,.34));
  mix-blend-mode:multiply;
}

/* Hokage-wall composition: center portrait highest, outer portraits descend */
.hf1{left:0%;top:30%;transform:rotate(-5deg) scale(.94)}
.hf2{left:19.2%;top:20%;transform:rotate(-2.5deg) scale(1)}
.hf3{left:39.5%;top:9%;transform:scale(1.09)}
.hf4{left:60%;top:20%;transform:rotate(2.5deg) scale(1)}
.hf5{left:79%;top:30%;transform:rotate(5deg) scale(.94)}
.hf1 img{object-position:50% 22%}
.hf2 img{object-position:50% 26%}
.hf3 img{object-position:50% 20%}
.hf4 img{object-position:50% 20%}
.hf5 img{object-position:50% 20%}

/* Stone ridges between the carved heads help sell the Mount Rushmore/Hokage effect */
.headliner-cliff:before{
  content:"";position:absolute;z-index:5;inset:18% 1% 5%;
  background:
    linear-gradient(100deg,transparent 0 18%,rgba(7,6,5,.65) 19% 20%,transparent 22% 38%,rgba(7,6,5,.6) 39% 40%,transparent 42% 59%,rgba(7,6,5,.62) 60% 61%,transparent 63% 79%,rgba(7,6,5,.58) 80% 81%,transparent 83%);
  mix-blend-mode:multiply;
  clip-path:polygon(0 100%,0 48%,10% 34%,21% 26%,31% 18%,42% 12%,50% 5%,59% 12%,70% 18%,81% 27%,91% 36%,100% 49%,100% 100%);
}
.headliner-cliff:after{
  content:"";position:absolute;z-index:7;left:-3%;right:-3%;bottom:-1%;height:47%;
  background:linear-gradient(to bottom,transparent,rgba(0,0,0,.98) 88%),radial-gradient(ellipse at 50% 100%,rgba(255,65,0,.14),transparent 46%);
}
.cliff-shadow{position:absolute;z-index:8;left:-5%;right:-5%;bottom:-4%;height:35%;background:linear-gradient(transparent,#050404 88%)}

/* No DJ names */
.headliner-face span{display:none!important}

/* Transparent logo */
.infernum-logo{width:clamp(230px,28vw,450px);height:auto;min-height:80px;background:transparent!important}
.infernum-logo img{display:block;width:100%;height:auto;max-height:112px;object-fit:contain;object-position:left center;background:transparent;filter:drop-shadow(0 0 13px rgba(255,255,255,.13))}

/* Eruption illuminates the stone reliefs */
.headliner-cliff.flashing{filter:drop-shadow(0 38px 58px rgba(0,0,0,.96)) brightness(1.22) sepia(.18)}
.headliner-cliff.flashing .headliner-face{animation:hokageHeat .9s ease-out}
@keyframes hokageHeat{
  0%{filter:brightness(1)}
  35%{filter:brightness(1.55) sepia(.35) drop-shadow(0 0 25px rgba(255,68,0,.38))}
  100%{filter:brightness(1)}
}

@media(max-width:900px){
 .headliner-cliff{top:7vh;right:-27%;width:132%;height:39vh;min-height:300px;opacity:.53}
 .content{z-index:9}.infernum-logo{width:235px}
}
@media(max-width:560px){
 .headliner-cliff{top:10vh;right:-35%;width:148%;height:32vh;min-height:240px;opacity:.46}
 .headliner-face{width:21%;height:62%}
 .hf1{left:-1%;top:30%}.hf2{left:19%;top:20%}.hf3{left:39.5%;top:9%}.hf4{left:60%;top:20%}.hf5{left:80%;top:30%}
}