@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Orbitron:wght@600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#000;
  font-family:'Cinzel',serif;
  color:#ffeccc;
  overflow-x:hidden;
  height:100%;
}

.hero{
  text-align:center;
  padding:120px 20px 60px;
  position:relative;
  z-index:2;
}
.logo{
  width:220px;
  filter:drop-shadow(0 0 60px #ff3d00);
  animation:pulse 3s infinite alternate;
}
@keyframes pulse{
  from{filter:drop-shadow(0 0 30px #ff4000)}
  to{filter:drop-shadow(0 0 90px #ffaa00)}
}
.tagline{
  color:#ff8000;
  font-size:1.3em;
  margin-bottom:25px;
}
.btn{
  background:linear-gradient(90deg,#ff3d00,#ffaa00);
  color:#000;
  border:none;
  border-radius:50px;
  padding:15px 40px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 0 30px #ff5500;
  transition:.3s;
}
.btn:hover{transform:scale(1.1);box-shadow:0 0 50px #ffaa00}

.story{
  max-width:850px;
  margin:auto;
  padding:40px 20px 100px;
  line-height:1.8;
  position:relative;
  z-index:2;
}
.story h2{
  color:#ff5500;
  font-family:'Orbitron',sans-serif;
  text-transform:uppercase;
  letter-spacing:1px;
  margin:60px 0 10px;
  text-shadow:0 0 20px #ff2200;
}
.story p{text-align:justify;font-size:1.1em;}

footer{
  text-align:center;
  padding:40px;
  background:#000;
  color:#aaa;
  font-family:'Orbitron',sans-serif;
  box-shadow:0 -2px 25px #ff3300;
  position:relative;
  z-index:2;
}

/* Fire canvas */
#fire{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.ca-box{
  margin-top:25px;
  display:inline-flex;
  align-items:center;
  background:rgba(0,0,0,0.4);
  border:1px solid #ff5500;
  border-radius:30px;
  padding:10px 20px;
  color:#fff3e0;
  font-family:monospace;
  box-shadow:0 0 12px #ff5500;
}
.copy-btn{
  margin-left:12px;
  background:linear-gradient(90deg,#ffaa00,#ff5500);
  border:none;
  border-radius:25px;
  padding:6px 14px;
  cursor:pointer;
  color:#000;
  font-weight:bold;
  transition:all .3s;
}
.copy-btn:hover{
  transform:scale(1.05);
  box-shadow:0 0 15px #ffaa00;
}
.x-link{
  color:#ff5500;
  font-weight:bold;
  text-decoration:none;
  transition:.3s;
}
.x-link:hover{color:#ffaa00;}
#barrels{
  text-align:center;
  padding:80px 10px;
  background:radial-gradient(circle at center,#140000 40%,#000 100%);
  position:relative;
  z-index:2;
  box-shadow:inset 0 0 80px #ff3300;
}
#barrels h2{
  color:#ff6600;
  font-family:'Orbitron',sans-serif;
  letter-spacing:1px;
  margin-bottom:10px;
  text-shadow:0 0 25px #ff2200;
}
#barrels .sub{
  color:#ffbb77;
  font-size:1em;
  margin-bottom:40px;
}
.barrel-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:25px;
  justify-items:center;
  max-width:900px;
  margin:0 auto;
}
.barrel{
  width:80px;height:100px;
  background:radial-gradient(circle at 30% 30%,#772000 0%,#331000 70%);
  border:2px solid #442000;
  border-radius:50%/15%;
  box-shadow:inset 0 0 10px #ff5500,0 0 20px rgba(255,90,0,0.3);
  position:relative;
  transition:all .3s;
}
.barrel::after{
  content:'';
  position:absolute;
  top:-6px;left:0;right:0;
  height:10px;
  border-radius:50%;
  background:radial-gradient(circle,#ff9933 0%,#552000 70%);
  opacity:.6;
}
.barrel:hover{
  box-shadow:inset 0 0 20px #ffaa00,0 0 40px #ff6600;
  transform:translateY(-5px);
}
@media(max-width:700px){
  .barrel-grid{grid-template-columns:repeat(4,1fr);gap:18px;}
  .barrel{width:60px;height:80px;}
}