/* screens.css — intro & heat-distribution layout */

/* ---------------- INTRO ---------------- */
.intro { background: radial-gradient(120% 80% at 50% 116%, #2a201c 0%, var(--char-900) 40%, var(--char-950) 100%); }
.intro-glow {
  position: absolute; left: 50%; bottom: -12%; width: 130%; height: 55%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(245,149,99,0.4), rgba(228,106,85,0.08) 55%, rgba(0,0,0,0) 75%);
  filter: blur(6px); pointer-events: none;
  animation: amberBreath 6s ease-in-out infinite;
}
.intro-body {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 96px 26px 30px; position: relative; z-index: 2;
}
.intro-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 14px; }
.intro-center .h-display, .intro-center .eyebrow { text-align: center; }

.flame-wrap { position: relative; width: 96px; height: 116px; display: grid; place-items: center; }
.flame-wrap img { height: 104px; position: relative; z-index: 2; filter: drop-shadow(0 6px 18px rgba(228,106,85,0.5)); }
.flame-halo {
  position: absolute; left: 50%; top: 54%; width: 150%; height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(245,149,99,0.5), rgba(228,106,85,0) 70%);
  filter: blur(8px); animation: haloBreath 4s ease-in-out infinite; z-index: 1;
}
@keyframes haloBreath {
  0%,100% { opacity: .6; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
}
.flame-flicker { transform-origin: 50% 90%; animation: flicker 2.6s ease-in-out infinite; }
@keyframes flicker {
  0%,100% { transform: scale(1) rotate(0deg); opacity: 1; }
  25%     { transform: scale(1.04, 0.99) rotate(-1.2deg); opacity: .94; }
  50%     { transform: scale(0.98, 1.03) rotate(1deg); opacity: 1; }
  75%     { transform: scale(1.03, 1.0) rotate(0.6deg); opacity: .97; }
}
.intro-logo { width: 246px; max-width: 78%; margin-top: 26px; }

.intro-actions { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.intro-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .03em;
  color: rgba(196,190,188,0.6);
}
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(196,190,188,0.45); }

/* ---------------- CHAPTER SHELL ---------------- */
.chapter-body { padding: 92px 22px 8px; display: flex; flex-direction: column; }
.chapter-head { text-align: left; }
.kicker-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.kicker-row .eyebrow { letter-spacing: 0.2em; }

.grill-stage {
  display: grid; place-items: center;
  margin: 18px 0 6px; padding: 6px 0;
  cursor: grab;
}
.grill-stage:active { cursor: grabbing; }

.grate-row { display: flex; justify-content: center; margin: 6px 0 18px; }

.heat-info {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px; padding: 14px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.layout-copy { max-width: 330px; }

.heat-control { margin-top: 18px; padding-bottom: 6px; }
.control-label {
  font-family: var(--font-head); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(196,190,188,0.55); margin-bottom: 11px;
}

/* screen swap — content reveal handled by .fade-up + data-ready */
.screen-enter { position: absolute; inset: 0; }