/* ========== HEARTH CONTAINER ========== */
.hearth {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 150px 0 40px 0;
}

/* Ambient fire glow */
.hearth-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background:
    radial-gradient(ellipse at 50% 50%,
      rgba(255, 140, 70, 0.18),
      rgba(255, 90, 60, 0.12),
      transparent 55%);
  filter: blur(80px);
  animation: glowBreath 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes glowBreath {

  0%,
  100% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(0.95);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* ========== CHIMNEY STRUCTURE ========== */
.chimney {
  position: relative;
  width: 560px;
  height: 440px;
  background:
    linear-gradient(135deg, #3a2520 0%, #2d1d18 50%, #221510 100%);
  border-radius: 8px 8px 0 0;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.8),
    inset 0 0 60px rgba(0, 0, 0, 0.4),
    inset -3px 0 8px rgba(0, 0, 0, 0.3),
    inset 3px 0 8px rgba(0, 0, 0, 0.3);
}

/* Brick texture overlay */
.brick-texture {
  position: absolute;
  inset: 0;
  border-radius: 8px 8px 0 0;
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 32px,
      rgba(0, 0, 0, 0.15) 32px,
      rgba(0, 0, 0, 0.15) 34px),
    repeating-linear-gradient(90deg,
      transparent,
      transparent 80px,
      rgba(0, 0, 0, 0.12) 80px,
      rgba(0, 0, 0, 0.12) 82px);
  opacity: 0.6;
  pointer-events: none;
}

/* ========== MANTLE ========== */
.mantle {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(180deg, #4a3228 0%, #3d2a20 50%, #2f1f16 100%);
  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.6),
    inset 0 2px 4px rgba(255, 200, 150, 0.05),
    inset 0 -2px 8px rgba(0, 0, 0, 0.4);
  z-index: 10;
}

.mantle-edge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.3));
  border-radius: 0 0 4px 4px;
}

/* ========== FIREBOX ========== */
.firebox {
  position: absolute;
  top: 130px;
  left: 50%;
  transform: translateX(-50%);
  width: 440px;
  height: 280px;
  background: radial-gradient(ellipse at 50% 80%, #1a0d08, #0d0604);
  border-radius: 8px 8px 0 0;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.9),
    inset 0 20px 40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.firebox-shadow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, transparent 30%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

/* Back wall with texture */
.back-wall {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #241410 0%, #1a0e0a 50%, #0f0806 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}

.back-wall::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg,
      transparent,
      transparent 28px,
      rgba(0, 0, 0, 0.2) 28px,
      rgba(0, 0, 0, 0.2) 30px);
  opacity: 0.4;
}

/* ========== FIRE ========== */
.fire {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 230px;
  z-index: 5;
}

/* Fire background glow */
.fire-glow {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 200px;
  background: radial-gradient(ellipse at 50% 70%,
      rgba(255, 200, 100, 0.4),
      rgba(255, 120, 60, 0.25),
      transparent 70%);
  filter: blur(30px);
  animation: glowPulse 2.8s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.8;
    transform: translateX(-50%) scale(0.95);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}

/* ========== PIXEL FIRE CANVAS ========== */
#pixelFire {
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  height: 230px;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  z-index: 7;
  filter: drop-shadow(0 0 20px rgba(255, 140, 60, 0.6)) drop-shadow(0 0 40px rgba(255, 100, 40, 0.4));
}

/* ========== LOGS ========== */
.logs {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;
  height: 90px;
  z-index: 4;
}

.log {
  position: absolute;
  height: 48px;
  border-radius: 30px;
  background: linear-gradient(165deg,
      #1a0f0a 0%,
      #2d1810 25%,
      #3a1f14 50%,
      #2a1610 75%,
      #1f0e08 100%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.7),
    inset -4px -4px 8px rgba(0, 0, 0, 0.6),
    inset 4px 4px 8px rgba(80, 40, 20, 0.15);
}

/* Log texture rings */
.log-rings {
  position: absolute;
  top: 50%;
  left: -8px;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 45% 45%,
      #3d2418 0%,
      #2d1810 30%,
      #1f100a 50%,
      #2d1810 70%,
      #3d2418 100%);
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
}

.log-rings::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(80, 40, 20, 0.3);
  box-shadow: 0 0 0 3px rgba(80, 40, 20, 0.15);
}

/* Log positioning */
.l1 {
  bottom: 36px;
  left: 36px;
  width: 200px;
  transform: rotate(-8deg);
  z-index: 3;
}

.l2 {
  bottom: 25px;
  right: 40px;
  width: 175px;
  height: 40px;
  transform: rotate(10deg);
  z-index: 2;
}

.l3 {
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 240px;
  height: 46px;
  z-index: 4;
}

.l4 {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 170px;
  height: 36px;
  z-index: 1;
}

/* ========== ASH BED ========== */
.ash-bed {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 36px;
  background: linear-gradient(180deg,
      rgba(60, 50, 45, 0.4),
      rgba(40, 35, 32, 0.6),
      rgba(25, 20, 18, 0.8));
  border-radius: 50%;
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.8),
    0 -2px 15px rgba(255, 120, 60, 0.15);
  z-index: 2;
}

/* ========== HEARTH FLOOR ========== */
.hearth-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, #2d1f18, #1f1510);
  box-shadow:
    inset 0 4px 12px rgba(0, 0, 0, 0.5),
    0 -2px 8px rgba(255, 140, 80, 0.1);
  border-radius: 0 0 4px 4px;
}

/* ========== FIREPLACE RESPONSIVE ========== */
@media (max-width: 768px) {
  .chimney {
    width: 90vw;
    max-width: 400px;
    height: 340px;
  }

  .firebox {
    width: 90%;
    height: 220px;
  }

  .fire {
    height: 180px;
  }

  #pixelFire {
    width: 160px;
    height: 160px;
    bottom: 55px;
  }

  .logs {
    width: 90%;
  }

  .log {
    height: 32px;
  }

  .l3 {
    width: 150px;
  }

  .hearth-panel {
    max-width: 90%;
  }
}