/* ====================================================
   CHICKENHELL.COM — STYLES
   ==================================================== */

:root {
  --hell-red: #ff2a2a;
  --hell-orange: #ff6b1a;
  --hell-yellow: #ffd23a;
  --hell-pink: #ff5b9e;
  --hell-purple: #6e1bff;
  --hell-deep: #2a0a0a;
  --hell-night: #1a0810;
  --coop-cream: #fff5e6;
  --coop-tan: #f5d8a8;
  --coop-floor: #c69a5a;
  --gold: #ffd700;
  --ink: #1a1410;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --font-display: 'Bungee', 'Impact', sans-serif;
  --font-marker: 'Permanent Marker', cursive;
  --font-body: 'Fredoka', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--hell-night);
  color: var(--ink);
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

/* ====================================================
   CURTAIN INTRO
   ==================================================== */
.curtain {
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 40%, #ff8a3a 0%, #ff2a2a 35%, #5a0a0a 100%);
  z-index: 9999;
  display: grid; place-items: center;
  transition: opacity .9s ease, visibility .9s ease;
}
.curtain.hidden { opacity: 0; visibility: hidden; }
.curtain-inner {
  position: relative;
  width: 220px; height: 220px;
  background: #fff5e6;
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(255,210,58,.6), inset 0 -20px 0 #ffe4b8;
  animation: curtainBounce 1.4s ease-in-out infinite;
}
.curtain-eye {
  position: absolute; top: 70px;
  width: 28px; height: 36px; background: #fff;
  border: 3px solid #1a1410; border-radius: 50%;
  overflow: hidden;
}
.curtain-eye::after {
  content: ''; position: absolute; top: 8px; left: 6px;
  width: 14px; height: 18px; background: #1a1410; border-radius: 50%;
  animation: eyeDart 1.4s ease-in-out infinite;
}
.curtain-eye.left { left: 60px; }
.curtain-eye.right { right: 60px; }
.curtain-beak {
  position: absolute; top: 120px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 26px solid #ffb43a;
  filter: drop-shadow(0 2px 0 #a26900);
}
.curtain-text {
  position: absolute; top: calc(100% + 20px); left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  color: #fff; font-size: 28px; text-align: center;
  letter-spacing: .1em;
  text-shadow: 0 2px 0 #5a0a0a, 0 4px 12px rgba(0,0,0,.4);
  white-space: nowrap;
}
.curtain-text span {
  display: block; margin-top: 8px;
  font-family: var(--font-marker);
  font-size: 18px;
  letter-spacing: 0;
  opacity: .85;
}
@keyframes curtainBounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}
@keyframes eyeDart {
  0%, 100% { left: 6px; }
  50% { left: 0; }
}

/* ====================================================
   FLOATING FEATHERS
   ==================================================== */
.feathers {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.feather {
  position: absolute;
  width: 18px; height: 32px;
  background: linear-gradient(180deg, #fff 0%, #fff5e6 60%, #ffd1a8 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: inset -2px 0 4px rgba(0,0,0,.1), 0 4px 6px rgba(0,0,0,.15);
  opacity: .85;
  transform: translateY(-50px) rotate(0);
  animation: featherFall linear infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.feather::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; background: rgba(0,0,0,.15);
  transform: translateX(-50%);
}
@keyframes featherFall {
  0%   { transform: translateY(-100px) translateX(0) rotate(0); opacity: 0; }
  10%  { opacity: .8; }
  100% { transform: translateY(110vh) translateX(var(--drift, 80px)) rotate(720deg); opacity: 0; }
}

/* ====================================================
   TOP BAR
   ==================================================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  z-index: 100;
  background: linear-gradient(180deg, rgba(26,8,16,.92) 0%, rgba(26,8,16,0) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  color: #fff; font-size: 18px;
  letter-spacing: .04em;
}
.brand-logo {
  font-size: 28px;
  display: inline-block;
  animation: logoBob 3s ease-in-out infinite;
}
.brand-name .dot { color: var(--hell-yellow); }
@keyframes logoBob {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg) scale(1.1); }
}
.topnav { display: flex; gap: 18px; }
.topnav a {
  color: #ffd9a8;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  position: relative;
  transition: color .2s;
}
.topnav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--hell-yellow);
  transform: scaleX(0); transform-origin: right;
  transition: transform .25s;
}
.topnav a:hover { color: #fff; }
.topnav a:hover::after { transform: scaleX(1); transform-origin: left; }

.sound-toggle {
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.3);
  width: 42px; height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: all .2s;
  color: #fff;
}
.sound-toggle:hover { background: rgba(255,255,255,.2); transform: rotate(15deg) scale(1.05); }
.sound-toggle.active { background: var(--hell-yellow); color: #1a1410; }

/* ====================================================
   GENERAL SECTIONS
   ==================================================== */
.section {
  position: relative;
  padding: 120px 20px 100px;
  overflow: hidden;
  isolation: isolate;
}

.section-tag {
  font-family: var(--font-marker);
  color: var(--hell-red);
  font-size: 16px;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 12px;
  display: block;
}
.section-tag.inverted { color: var(--hell-yellow); }
.section-tag.golden { color: var(--gold); }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(38px, 7vw, 78px);
  text-align: center;
  line-height: 1.05;
  margin-bottom: 24px;
  letter-spacing: -.01em;
  color: var(--hell-deep);
}
.section-title.light { color: #fff; text-shadow: 0 4px 0 #5a0a0a, 0 8px 30px rgba(0,0,0,.6); }
.section-title.spook { animation: spookFlicker 4s ease-in-out infinite; }
@keyframes spookFlicker {
  0%, 92%, 100% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255,200,80,.4)); }
  93%, 96% { opacity: .7; filter: drop-shadow(0 0 4px rgba(255,200,80,.2)); }
}

.section-lede {
  font-size: clamp(16px, 2.4vw, 22px);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
  line-height: 1.55;
}
.section-lede.light { color: #ffe4b8; }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-pop { opacity: 0; transform: scale(.85) translateY(30px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal-pop.in { opacity: 1; transform: scale(1) translateY(0); }

/* ====================================================
   CTA BUTTON
   ==================================================== */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 36px;
  background: linear-gradient(180deg, var(--hell-yellow) 0%, var(--hell-orange) 100%);
  color: var(--hell-deep);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: .05em;
  text-decoration: none;
  border: 4px solid var(--hell-deep);
  border-radius: 50px;
  cursor: pointer;
  position: relative;
  box-shadow: 0 6px 0 var(--hell-deep), 0 12px 30px rgba(0,0,0,.4);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.7) 50%, transparent 70%);
  transform: translateX(-150%);
  transition: transform .8s;
}
.cta:hover::before { transform: translateX(150%); }
.cta:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 8px 0 var(--hell-deep), 0 16px 40px rgba(0,0,0,.5); }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--hell-deep), 0 4px 10px rgba(0,0,0,.4); }
.cta-icon { font-size: 22px; transition: transform .25s; }
.cta:hover .cta-icon { transform: rotate(-15deg) scale(1.2); }

/* ====================================================
   SECTION 1 — HERO
   ==================================================== */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 80px;
  background:
    radial-gradient(ellipse at 50% 100%, #ff6b1a 0%, transparent 60%),
    radial-gradient(ellipse at 30% 80%, #ff2a2a 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, #6e1bff 0%, transparent 60%),
    linear-gradient(180deg, #1a0810 0%, #3a0a14 60%, #5a0a14 100%);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-sun {
  position: absolute; top: 18%; left: 50%;
  transform: translateX(-50%);
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe14d 0%, #ff8a3a 50%, transparent 75%);
  filter: blur(8px);
  animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: .8; }
  50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
}
.hero-mountain {
  position: absolute; bottom: 0;
  width: 60%; height: 240px;
  background: #2a0a14;
  clip-path: polygon(0 100%, 50% 30%, 100% 100%);
}
.hero-mountain.m1 { left: -10%; height: 320px; opacity: .7; }
.hero-mountain.m2 { left: 30%; height: 280px; background: #3a0a1a; }
.hero-mountain.m3 { right: -10%; height: 360px; opacity: .8; }

.hero-flames { position: absolute; bottom: -40px; left: 0; right: 0; height: 200px; }
.flame {
  position: absolute; bottom: 0;
  width: 60px; height: 120px;
  background: linear-gradient(180deg, transparent 0%, #ffd23a 30%, #ff6b1a 60%, #ff2a2a 100%);
  border-radius: 50% 50% 20% 20% / 60% 60% 40% 40%;
  filter: blur(2px);
  animation: flameDance 1.2s ease-in-out infinite alternate;
  transform-origin: bottom;
}
.hero-flames .flame.f1 { left: 10%; height: 140px; animation-delay: 0s; }
.hero-flames .flame.f2 { left: 30%; height: 110px; animation-delay: .3s; }
.hero-flames .flame.f3 { left: 50%; height: 160px; animation-delay: .6s; }
.hero-flames .flame.f4 { left: 70%; height: 130px; animation-delay: .9s; }
.hero-flames .flame.f5 { left: 88%; height: 120px; animation-delay: .15s; }
@keyframes flameDance {
  0%   { transform: scaleY(.95) scaleX(1) skewX(-3deg); opacity: .85; }
  100% { transform: scaleY(1.1) scaleX(.92) skewX(3deg); opacity: 1; }
}

.floating-icon {
  position: absolute;
  left: var(--x); top: var(--y);
  font-size: 28px;
  animation: floatIcon 6s ease-in-out infinite;
  animation-delay: var(--d);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
@keyframes floatIcon {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-30px) rotate(8deg); }
}

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 40px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  z-index: 2;
}

.floating-office {
  position: relative;
  width: 320px;
  margin: 0 auto;
  animation: officeFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.5));
}
@keyframes officeFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-16px) rotate(1deg); }
}
.office-roof {
  position: relative;
  height: 90px;
  background: linear-gradient(180deg, #ff2a2a 0%, #c41a1a 100%);
  clip-path: polygon(0 100%, 10% 30%, 90% 30%, 100% 100%);
  margin-bottom: -2px;
}
.office-sign {
  position: absolute; top: 38%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  color: #fff;
  font-size: 13px;
  letter-spacing: .05em;
  text-shadow: 0 1px 0 #5a0a0a;
  white-space: nowrap;
}
.office-body {
  background: linear-gradient(180deg, #ffd9a3 0%, #f5b878 100%);
  padding: 20px 16px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  border-left: 4px solid #5a3a1a;
  border-right: 4px solid #5a3a1a;
}
.office-window {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #fff5a0 0%, #ffd23a 50%, #ff8a3a 100%);
  border: 3px solid #5a3a1a;
  border-radius: 4px;
  position: relative;
  animation: windowFlicker 3s ease-in-out infinite;
}
.office-window::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(transparent 49%, #5a3a1a 49%, #5a3a1a 51%, transparent 51%),
    linear-gradient(90deg, transparent 49%, #5a3a1a 49%, #5a3a1a 51%, transparent 51%);
}
@keyframes windowFlicker {
  0%, 88%, 100% { opacity: 1; }
  90%, 95% { opacity: .6; }
}
.office-window:nth-child(2n) { animation-delay: .8s; }
.office-window:nth-child(3n) { animation-delay: 1.5s; }

.office-door {
  grid-column: 2;
  background: linear-gradient(180deg, #5a3a1a 0%, #3a2410 100%);
  border-radius: 6px 6px 0 0;
  position: relative;
  height: 80px;
  margin-top: 4px;
}
.door-knob {
  position: absolute; right: 8px; top: 50%;
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--gold);
}
.door-sign {
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  background: #ff2a2a;
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  text-align: center;
  line-height: 1.2;
  font-family: var(--font-display);
}
.office-base {
  height: 16px;
  background: linear-gradient(180deg, #5a3a1a 0%, #2a1a08 100%);
  margin-top: -4px;
  position: relative;
}
.office-base::before, .office-base::after {
  content: ''; position: absolute; top: 100%; height: 30px; width: 30px;
  background: linear-gradient(180deg, #5a3a1a, transparent);
  filter: blur(6px);
}
.office-chains {
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  display: flex; gap: 60px;
}
.chain {
  width: 4px;
  height: 80px;
  background: repeating-linear-gradient(180deg, #888 0 6px, #444 6px 12px);
  border-radius: 2px;
}

.hero-chicken {
  position: relative;
  width: 320px;
  margin: 0 auto;
  animation: bossSway 3s ease-in-out infinite;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.6));
}
@keyframes bossSway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}

.hero-text {
  text-align: left;
  z-index: 3;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(255,42,42,.2);
  color: var(--hell-yellow);
  padding: 6px 14px;
  border: 2px dashed var(--hell-yellow);
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 18px;
  animation: eyebrowFlash 2s ease-in-out infinite;
}
@keyframes eyebrowFlash {
  0%, 100% { box-shadow: 0 0 0 rgba(255,210,58,0); }
  50% { box-shadow: 0 0 20px rgba(255,210,58,.4); }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 92px);
  color: #fff;
  line-height: 1;
  letter-spacing: -.01em;
  text-shadow: 0 4px 0 #5a0a0a, 0 12px 40px rgba(0,0,0,.6);
}
.t-line { display: block; }
.t-line.t-glow {
  background: linear-gradient(180deg, #fff5a0 0%, #ffd23a 50%, #ff6b1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #5a0a0a) drop-shadow(0 0 30px rgba(255,210,58,.6));
  animation: titleGlow 3s ease-in-out infinite;
}
.t-dot { color: var(--hell-red); -webkit-text-fill-color: var(--hell-red); }
@keyframes titleGlow {
  0%, 100% { filter: drop-shadow(0 4px 0 #5a0a0a) drop-shadow(0 0 30px rgba(255,210,58,.6)); }
  50% { filter: drop-shadow(0 4px 0 #5a0a0a) drop-shadow(0 0 50px rgba(255,210,58,1)); }
}

.hero-sub {
  color: #ffe4b8;
  font-size: clamp(16px, 2.2vw, 22px);
  margin: 24px 0 32px;
  line-height: 1.5;
}
.hero-sub strong { color: #fff; }

.fineprint {
  margin-top: 18px;
  font-family: var(--font-marker);
  color: rgba(255,255,255,.7);
  font-size: 13px;
  line-height: 1.4;
  max-width: 360px;
}

.scroll-cue {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255,255,255,.7);
  font-family: var(--font-marker);
  font-size: 13px;
  letter-spacing: .1em;
  z-index: 3;
}
.cue-arrow {
  font-size: 22px;
  margin-top: 4px;
  animation: cueBounce 1.6s ease-in-out infinite;
}
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ====================================================
   SECTION 2 — COOP
   ==================================================== */
.coop {
  background:
    linear-gradient(180deg, #5a0a14 0%, #ffe4b8 12%, #fff5e6 100%);
  padding-bottom: 140px;
}
.coop-stage {
  position: relative;
  max-width: 1100px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 0 10px;
}
.office-floor {
  position: absolute;
  bottom: -80px; left: -20px; right: -20px;
  height: 80px;
  background: repeating-linear-gradient(90deg, #c69a5a 0 80px, #b08848 80px 160px);
  box-shadow: inset 0 8px 16px rgba(0,0,0,.2);
  z-index: 0;
}

.cubicle {
  background: linear-gradient(180deg, #f5f0e0 0%, #e8d8b8 100%);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  box-shadow: var(--shadow);
  min-height: 280px;
}
.cubicle::before {
  content: '';
  position: absolute; top: -6px; left: -6px; right: -6px;
  height: 14px;
  background: linear-gradient(180deg, #888 0%, #444 100%);
  border-radius: 6px 6px 0 0;
}
.cube-walls {
  position: absolute; inset: 8px;
  border: 2px dashed rgba(0,0,0,.15);
  border-radius: 8px;
}
.cube-desk {
  position: relative;
  background: #c69a5a;
  border: 2px solid var(--ink);
  border-radius: 6px;
  padding: 8px;
  margin-top: 16px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.desk-monitor {
  flex: 1;
  background: #1a1a2a;
  border: 2px solid #000;
  border-radius: 4px;
  padding: 8px 6px;
  color: #5cd1ff;
  font-family: monospace;
  font-size: 11px;
  text-align: center;
  position: relative;
  min-height: 50px;
  display: flex; flex-direction: column; justify-content: center;
}
.desk-monitor::after {
  content: ''; position: absolute; left: 4px; right: 4px; top: 4px; bottom: 4px;
  border: 1px solid rgba(92,209,255,.3);
  border-radius: 2px;
  pointer-events: none;
}
.rate-num { color: #ff6b6b; font-weight: 700; font-size: 14px; margin-top: 4px; display: block; animation: numFlick 3s steps(1) infinite; }
.desk-monitor.solitaire .rate-num { color: #5cd1ff; }
@keyframes numFlick {
  0%, 100% { color: #ff6b6b; }
  50% { color: #ffb86b; }
}
.desk-coffee, .desk-stapler { font-size: 22px; animation: jiggle 3s ease-in-out infinite; }
.desk-papers {
  width: 26px; height: 18px;
  background: #fff;
  border: 1px solid #aaa;
  position: relative;
}
.desk-papers::before, .desk-papers::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 1px; background: #ccc;
  top: 6px;
}
.desk-papers::after { top: 12px; }
.desk-papers.upside { transform: rotate(180deg); }
@keyframes jiggle {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(8deg); }
  94% { transform: rotate(-8deg); }
  96% { transform: rotate(4deg); }
}
.cube-chicken {
  position: relative;
  margin-top: 10px;
  width: 100%;
}
.cube-chicken svg { width: 100px; margin: 0 auto; }
.cube-chicken.cry svg { animation: cryShake 2s ease-in-out infinite; }
.cube-chicken.confused svg { animation: confusedTilt 4s ease-in-out infinite; }
.cube-chicken.pretend svg { animation: pretendBob 5s ease-in-out infinite; }
@keyframes cryShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}
@keyframes confusedTilt {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
@keyframes pretendBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.bubble {
  position: absolute;
  top: -8px; right: -8px;
  background: #fff;
  border: 2px solid var(--ink);
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-family: var(--font-marker);
  max-width: 130px;
  text-align: center;
  box-shadow: 0 2px 0 var(--ink);
  transform: rotate(-3deg);
}
.bubble::after {
  content: '';
  position: absolute;
  bottom: -8px; left: 30%;
  border: 6px solid transparent;
  border-top-color: var(--ink);
  border-bottom: 0;
}

.poster {
  position: absolute;
  background: var(--coop-cream);
  border: 3px solid var(--ink);
  padding: 10px 8px;
  text-align: center;
  font-family: var(--font-marker);
  font-size: 13px;
  line-height: 1.2;
  box-shadow: 4px 4px 0 var(--ink);
  width: 130px;
  z-index: 2;
}
.poster-img { font-size: 32px; margin-bottom: 4px; }
.poster.p1 { top: -50px; left: 5%; transform: rotate(-6deg); }
.poster.p2 { top: -60px; right: 5%; transform: rotate(7deg); }
.poster.p3 { bottom: -100px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.poster:hover { animation: posterShake .5s ease-in-out; }
@keyframes posterShake {
  0%, 100% { transform: rotate(var(--rot, 0deg)); }
  25% { transform: rotate(calc(var(--rot, 0deg) - 4deg)) translateY(-4px); }
  75% { transform: rotate(calc(var(--rot, 0deg) + 4deg)) translateY(2px); }
}

.ringing-phone {
  position: absolute;
  top: 30%; right: -40px;
  width: 80px;
  z-index: 3;
}
.phone-base {
  font-size: 50px;
  animation: phoneRing .5s ease-in-out infinite;
  display: block;
  text-align: center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
@keyframes phoneRing {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
.ring {
  position: absolute;
  font-family: var(--font-display);
  color: var(--hell-red);
  font-size: 12px;
  background: var(--hell-yellow);
  padding: 2px 6px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  animation: ringPop 1.5s ease-in-out infinite;
}
.ring.r1 { top: -10px; left: -30px; animation-delay: 0s; }
.ring.r2 { top: 10px; left: 70px; animation-delay: .5s; }
.ring.r3 { top: 50px; left: -20px; animation-delay: 1s; }
@keyframes ringPop {
  0%, 100% { transform: scale(0); opacity: 0; }
  20%, 60% { transform: scale(1) rotate(-10deg); opacity: 1; }
  80% { transform: scale(.9) rotate(8deg); opacity: 1; }
}

.printer {
  position: absolute;
  bottom: -90px; left: -40px;
  z-index: 3;
}
.printer-body {
  font-size: 60px;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  animation: printerJam 4s ease-in-out infinite;
}
@keyframes printerJam {
  0%, 70%, 100% { transform: translate(0, 0) rotate(0); }
  72%, 78% { transform: translate(-3px, 2px) rotate(-2deg); }
  74%, 80% { transform: translate(3px, -2px) rotate(2deg); }
}
.printer-jam {
  position: absolute;
  top: -10px; right: -10px;
  background: var(--hell-red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  padding: 2px 6px;
  border: 2px solid var(--ink);
  border-radius: 4px;
  animation: jamFlash 1s steps(1) infinite;
}
@keyframes jamFlash {
  0%, 50% { background: var(--hell-red); }
  51%, 100% { background: var(--hell-yellow); color: var(--ink); }
}
.paper-explosion {
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
}
.paper-explosion span {
  position: absolute;
  font-size: 20px;
  animation: paperShoot 3s ease-out infinite;
  opacity: 0;
}
.paper-explosion span:nth-child(1) { animation-delay: 0s; --tx: -40px; --ty: -60px; }
.paper-explosion span:nth-child(2) { animation-delay: .8s; --tx: 30px; --ty: -50px; }
.paper-explosion span:nth-child(3) { animation-delay: 1.6s; --tx: -20px; --ty: -80px; }
.paper-explosion span:nth-child(4) { animation-delay: 2.4s; --tx: 50px; --ty: -70px; }
@keyframes paperShoot {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(720deg); }
}

/* ====================================================
   SECTION 3 — BOSS
   ==================================================== */
.boss {
  background:
    radial-gradient(ellipse at 50% 0%, #ff6b1a 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #5a0a14 0%, #1a0810 100%);
  padding: 140px 20px 140px;
  min-height: 100vh;
}
.boss-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.boss-rays {
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg at 50% 30%,
      transparent 0deg, rgba(255,210,58,.15) 5deg, transparent 10deg,
      transparent 30deg, rgba(255,210,58,.15) 35deg, transparent 40deg,
      transparent 60deg, rgba(255,210,58,.15) 65deg, transparent 70deg,
      transparent 90deg, rgba(255,210,58,.15) 95deg, transparent 100deg,
      transparent 120deg, rgba(255,210,58,.15) 125deg, transparent 130deg,
      transparent 150deg, rgba(255,210,58,.15) 155deg, transparent 160deg,
      transparent 180deg, rgba(255,210,58,.15) 185deg, transparent 190deg);
  animation: raysSpin 60s linear infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes raysSpin {
  to { transform: rotate(360deg); }
}

.boss-stage {
  position: relative;
  max-width: 900px;
  margin: 40px auto 0;
  z-index: 2;
}
.boss-throne {
  position: relative;
  display: grid;
  place-items: center;
  padding: 80px 0;
}
.throne-back {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 240px; height: 280px;
  background: linear-gradient(180deg, #2a1a08 0%, #5a3a1a 50%, #2a1a08 100%);
  border-radius: 100px 100px 20px 20px;
  border: 6px solid var(--gold);
  box-shadow: 0 0 60px rgba(255,210,58,.4), inset 0 0 30px rgba(0,0,0,.5);
  z-index: 1;
}
.throne-back::before {
  content: '👑';
  position: absolute;
  top: -50px; left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.5));
  animation: crownFloat 3s ease-in-out infinite;
}
@keyframes crownFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-5deg); }
  50% { transform: translateX(-50%) translateY(-8px) rotate(5deg); }
}
.throne-flames {
  position: absolute;
  top: 100px;
  left: 0; right: 0;
  height: 200px;
  pointer-events: none;
  z-index: 0;
}
.throne-flames .flame {
  position: absolute; bottom: 0;
  width: 80px; height: 180px;
  filter: blur(4px);
}
.throne-flames .flame.f1 { left: 10%; animation-delay: 0s; }
.throne-flames .flame.f2 { left: 30%; animation-delay: .4s; height: 220px; }
.throne-flames .flame.f3 { right: 30%; animation-delay: .7s; height: 200px; }
.throne-flames .flame.f4 { right: 10%; animation-delay: 1.1s; }

.boss-chicken {
  position: relative;
  z-index: 3;
  width: 280px;
  margin-top: 20px;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.7));
  animation: bossSway 3s ease-in-out infinite;
}

.boss-desk {
  position: absolute;
  bottom: 30px; left: 50%;
  transform: translateX(-50%);
  width: 480px;
  max-width: 90%;
  height: 90px;
  background: linear-gradient(180deg, #5a3a1a 0%, #3a2410 100%);
  border-radius: 8px;
  border: 4px solid var(--ink);
  box-shadow: 0 12px 30px rgba(0,0,0,.6);
  z-index: 4;
}
.desk-papers-stack {
  position: absolute;
  left: 30px; top: -16px;
  width: 60px; height: 24px;
  background: #fff;
  border: 2px solid #aaa;
  box-shadow:
    -2px -2px 0 #ddd,
    -4px -4px 0 #aaa;
}
.desk-nameplate {
  position: absolute;
  right: 30px; top: 50%;
  transform: translateY(-50%);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 13px;
  padding: 6px 14px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  letter-spacing: .05em;
  box-shadow: 0 2px 0 var(--ink);
}
.desk-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 30%);
  pointer-events: none;
  border-radius: 6px;
}

.award {
  position: absolute;
  background: var(--coop-cream);
  border: 3px solid var(--ink);
  padding: 10px 8px;
  text-align: center;
  font-size: 10px;
  line-height: 1.25;
  font-weight: 600;
  z-index: 2;
  width: 110px;
  box-shadow: 4px 4px 0 var(--ink);
}
.award-trophy { font-size: 24px; display: block; margin-bottom: 4px; }
.award-text { color: var(--ink); }
.award.a1 { top: 10%; left: 5%; transform: rotate(-6deg); }
.award.a2 { top: 8%; right: 5%; transform: rotate(5deg); }
.award.a3 { top: 30%; left: 12%; transform: rotate(-2deg); }

.boss-quote {
  position: relative;
  margin-top: 60px;
  max-width: 540px;
  background: #fff;
  border: 4px solid var(--ink);
  padding: 24px 30px;
  border-radius: 16px;
  font-size: 18px;
  line-height: 1.55;
  text-align: center;
  box-shadow: 6px 6px 0 var(--ink), 0 20px 40px rgba(0,0,0,.4);
  z-index: 5;
}
.boss-quote::after {
  content: '';
  position: absolute;
  top: -30px; left: 50%;
  transform: translateX(-50%);
  border: 14px solid transparent;
  border-bottom-color: var(--ink);
  border-top: 0;
}
.boss-quote::before {
  content: '';
  position: absolute;
  top: -22px; left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
  z-index: 1;
}
.quote-mark {
  font-family: var(--font-display);
  color: var(--hell-red);
  font-size: 36px;
  line-height: 0;
  vertical-align: -10px;
}
.quote-attrib {
  display: block;
  margin-top: 12px;
  font-family: var(--font-marker);
  color: var(--hell-red);
  font-size: 14px;
}

/* ====================================================
   SECTION 3.5 — HATCHING
   ==================================================== */
.hatch {
  background: linear-gradient(180deg, #1a0810 0%, #ffe4b8 25%, #fff5e6 100%);
  padding: 140px 20px 120px;
}
.hatch-stage {
  position: relative;
  max-width: 900px;
  margin: 40px auto 0;
  display: grid;
  grid-template-areas:
    "parent parent"
    "egg    egg"
    "look1  look2";
  grid-template-columns: 1fr 1fr;
  align-items: end;
  justify-items: center;
  gap: 30px;
  min-height: 600px;
  background: linear-gradient(180deg, transparent 60%, #f5d8a8 60%, #d4a96a 100%);
  border: 4px solid var(--ink);
  border-radius: 24px;
  padding: 30px 20px 40px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.hatch-stage::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 40%;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 4px, transparent 4px 8px);
  pointer-events: none;
}

.parent-chicken {
  grid-area: parent;
  width: 240px;
  position: relative;
  animation: parentStrain 1.6s ease-in-out infinite;
}
.parent-chicken-svg .strain {
  fill: var(--hell-red);
  font-family: var(--font-display);
  animation: strainPulse 1s ease-in-out infinite;
  transform-origin: center;
}
.parent-chicken-svg .strain.s2 { animation-delay: .3s; }
.parent-chicken-svg .strain.s3 { animation-delay: .6s; }
@keyframes strainPulse {
  0%, 100% { opacity: 0; transform: scale(0); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes parentStrain {
  0%, 100% { transform: translateY(0) scale(1); }
  20% { transform: translateY(-3px) scale(1.02, .98); }
  40% { transform: translateY(2px) scale(.98, 1.04); }
  60% { transform: translateY(-2px) scale(1.04, .96); }
  80% { transform: translateY(2px) scale(.99, 1.01); }
}
.strain-label {
  position: absolute; bottom: -10px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-marker);
  color: var(--hell-red);
  font-size: 14px;
  white-space: nowrap;
  background: #fff;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 2px 0 var(--ink);
}

.egg-pod {
  grid-area: egg;
  position: relative;
  width: 200px;
  height: 240px;
}
.egg {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 120px;
  height: 160px;
}
.egg-shape {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #fff5e6 0%, #f0d6a8 100%);
  border: 3px solid #5a3a1a;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  box-shadow: inset -8px -10px 12px rgba(0,0,0,.1), 0 12px 20px rgba(0,0,0,.3);
  transform-origin: bottom center;
  transition: opacity .3s;
}
.egg-shape::after {
  content: '';
  position: absolute; top: 20%; left: 25%;
  width: 25%; height: 30%;
  background: radial-gradient(ellipse, rgba(255,255,255,.7) 0%, transparent 70%);
  border-radius: 50%;
}
.egg-crack {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(110deg, transparent 48%, #5a3a1a 48%, #5a3a1a 49%, transparent 49%),
    linear-gradient(70deg, transparent 48%, #5a3a1a 48%, #5a3a1a 49%, transparent 49%),
    linear-gradient(135deg, transparent 38%, #5a3a1a 38%, #5a3a1a 39%, transparent 39%);
  opacity: 0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transition: opacity .3s;
}
.egg.cracking .egg-crack { opacity: 1; }
.egg.cracking .egg-shape { animation: eggShake .3s ease-in-out infinite; }
@keyframes eggShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-3px) rotate(-2deg); }
  75% { transform: translateX(3px) rotate(2deg); }
}
.egg.dropping .egg-shape { animation: eggDrop 1.4s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes eggDrop {
  0%   { transform: translateY(-100px); }
  60%  { transform: translateY(0); }
  70%  { transform: translateY(-30px) scaleY(.95); }
  80%  { transform: translateY(0); }
  85%  { transform: translateY(-15px); }
  92%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}
.egg.hatched .egg-shape { opacity: 0; }
.egg-half {
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, #fff5e6 0%, #f0d6a8 100%);
  border: 3px solid #5a3a1a;
  opacity: 0;
  transform-origin: center;
}
.egg-half.top {
  top: 0;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom: 3px solid #5a3a1a;
}
.egg-half.bottom {
  bottom: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  border-top: 3px solid #5a3a1a;
}
.egg.hatched .egg-half.top {
  opacity: 1;
  animation: eggTopFly 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
.egg.hatched .egg-half.bottom {
  opacity: 1;
  animation: eggBottomFall 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes eggTopFly {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translate(-80px, -200px) rotate(-180deg); opacity: 0; }
}
@keyframes eggBottomFall {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translate(60px, 50px) rotate(45deg); opacity: 0; }
}
.egg-shards {
  position: absolute; inset: 0;
  pointer-events: none;
}
.egg-shards span {
  position: absolute;
  width: 16px; height: 20px;
  background: linear-gradient(180deg, #fff5e6 0%, #f0d6a8 100%);
  border: 2px solid #5a3a1a;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  left: 50%; top: 50%;
  opacity: 0;
}
.egg.hatched .egg-shards span {
  animation: shardFly 1.4s cubic-bezier(.2,.8,.2,1) forwards;
}
.egg.hatched .egg-shards span:nth-child(1) { --tx: -120px; --ty: -150px; --r: 380deg; animation-delay: 0s; }
.egg.hatched .egg-shards span:nth-child(2) { --tx: 100px;  --ty: -180px; --r: -360deg; animation-delay: .05s; }
.egg.hatched .egg-shards span:nth-child(3) { --tx: -150px; --ty: -50px;  --r: 540deg; animation-delay: .1s; }
.egg.hatched .egg-shards span:nth-child(4) { --tx: 140px;  --ty: -80px;  --r: -480deg; animation-delay: .15s; }
.egg.hatched .egg-shards span:nth-child(5) { --tx: -80px;  --ty: 80px;   --r: 240deg; animation-delay: .2s; }
.egg.hatched .egg-shards span:nth-child(6) { --tx: 90px;   --ty: 100px;  --r: -300deg; animation-delay: .25s; }
@keyframes shardFly {
  0% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--r)); }
}

.baby-chicken {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 60px) scale(0);
  width: 140px;
  opacity: 0;
  transition: opacity .4s;
  z-index: 5;
}
.egg.hatched ~ .baby-chicken,
.baby-chicken.born {
  opacity: 1;
  animation: babyEmerge 1s cubic-bezier(.2,1.6,.4,1) forwards;
  animation-delay: .8s;
}
@keyframes babyEmerge {
  0%   { opacity: 0; transform: translate(-50%, 30px) scale(.2) rotate(-10deg); }
  60%  { opacity: 1; transform: translate(-50%, -20px) scale(1.15) rotate(8deg); }
  80%  { transform: translate(-50%, 0) scale(.95) rotate(-3deg); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
}
.baby-chicken.born + .baby-label,
.baby-chicken .baby-label { display: block; }
.baby-label {
  position: absolute;
  bottom: -50px; left: 50%;
  transform: translateX(-50%);
  background: var(--hell-yellow);
  border: 3px solid var(--ink);
  padding: 6px 14px;
  border-radius: 20px;
  font-family: var(--font-display);
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--ink);
  display: none;
  animation: labelPop .5s ease-out forwards;
  animation-delay: 1.4s;
  opacity: 0;
}
.baby-chicken.born .baby-label { display: block; }
@keyframes labelPop {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.hatch-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hatch-sparkles span {
  position: absolute;
  font-size: 24px;
  opacity: 0;
}
.baby-chicken.born .hatch-sparkles span {
  animation: sparkle 1.6s ease-out forwards infinite;
}
.baby-chicken.born .hatch-sparkles span:nth-child(1) { top: 0; left: 0; animation-delay: .9s; }
.baby-chicken.born .hatch-sparkles span:nth-child(2) { top: 20%; right: -10px; animation-delay: 1.2s; }
.baby-chicken.born .hatch-sparkles span:nth-child(3) { bottom: 30%; left: -15px; animation-delay: 1.5s; }
.baby-chicken.born .hatch-sparkles span:nth-child(4) { top: -10px; left: 50%; animation-delay: 1.8s; }
@keyframes sparkle {
  0% { opacity: 0; transform: scale(0) rotate(0); }
  50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
  100% { opacity: 0; transform: scale(.5) rotate(360deg); }
}

.onlookers {
  display: contents;
}
.onlooker {
  position: relative;
  text-align: center;
  align-self: end;
}
.onlooker:nth-child(1) { grid-area: look1; }
.onlooker:nth-child(2) { grid-area: look2; }
.onlooker svg { width: 80px; margin: 0 auto; }
.onlooker-line {
  background: #fff;
  border: 2px solid var(--ink);
  padding: 4px 10px;
  border-radius: 12px;
  font-family: var(--font-marker);
  font-size: 12px;
  display: inline-block;
  margin-top: 6px;
  box-shadow: 0 2px 0 var(--ink);
}

.hatch-caption {
  text-align: center;
  margin-top: 30px;
  font-size: 16px;
  font-style: italic;
  color: #5a3a1a;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ====================================================
   SECTION 4 — CREW
   ==================================================== */
.crew {
  background: linear-gradient(180deg, #fff5e6 0%, #ffd9a3 100%);
  padding: 120px 20px 140px;
}
.crew-grid {
  max-width: 1200px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  padding: 0 10px;
}
.crew-card {
  position: relative;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 24px 18px;
  text-align: center;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: default;
  overflow: hidden;
}
.crew-card:hover {
  transform: translate(-2px, -4px) rotate(-1deg);
  box-shadow: 8px 10px 0 var(--ink);
}
.crew-card:nth-child(2n):hover { transform: translate(2px, -4px) rotate(1deg); }

.card-glow {
  position: absolute;
  inset: -4px;
  background: linear-gradient(45deg, var(--hell-yellow), var(--hell-orange), var(--hell-red), var(--hell-pink));
  border-radius: 22px;
  opacity: 0;
  z-index: -1;
  transition: opacity .3s;
}
.crew-card:hover .card-glow { opacity: .6; }

.card-portrait {
  width: 140px;
  height: 140px;
  margin: 0 auto 14px;
  background: radial-gradient(circle, #fff5e6 0%, #ffd9a3 100%);
  border: 3px solid var(--ink);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: inset 0 4px 12px rgba(0,0,0,.1);
  position: relative;
}
.card-portrait svg { width: 100%; height: 100%; }
.card-portrait::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px dashed rgba(0,0,0,.2);
  border-radius: 50%;
  pointer-events: none;
  animation: portraitSpin 30s linear infinite;
}
@keyframes portraitSpin { to { transform: rotate(360deg); } }

.card-name {
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.card-title {
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--hell-red);
  font-weight: 600;
  margin-bottom: 12px;
}
.card-bio {
  font-size: 14px;
  font-style: italic;
  color: #5a3a1a;
  margin-bottom: 16px;
  min-height: 60px;
}
.card-stat {
  background: var(--coop-cream);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.stat-label { font-weight: 600; opacity: .7; }
.stat-value {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .05em;
}
.stat-value.danger { color: var(--hell-red); animation: dangerPulse 1.4s ease-in-out infinite; }
.stat-value.warning { color: var(--hell-orange); }
.stat-value.pending { color: #b08800; }
@keyframes dangerPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.shaky { animation: shaky 1.6s ease-in-out infinite; }
@keyframes shaky {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 0); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 1px); }
}

/* ====================================================
   SECTION 5 — PERFORMANCE
   ==================================================== */
.perf {
  background:
    radial-gradient(ellipse at 50% 0%, #ff6b1a 0%, transparent 50%),
    linear-gradient(180deg, #2a0a14 0%, #5a0a14 100%);
  padding: 140px 20px;
  color: #fff;
  min-height: 100vh;
}
.perf-stage {
  max-width: 1100px;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: center;
}

.perf-screen {
  position: relative;
}
.screen-frame {
  background: #1a1a2a;
  border: 6px solid #444;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,.7), inset 0 0 30px rgba(0,0,0,.5);
  position: relative;
  overflow: hidden;
}
.screen-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #333;
  margin-bottom: 12px;
}
.screen-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
}
.screen-dot.r { background: #ff5b5b; }
.screen-dot.y { background: #ffd23a; }
.screen-dot.g { background: #5bff8a; }
.screen-title {
  margin-left: 8px;
  font-family: monospace;
  font-size: 12px;
  color: #888;
}
.screen-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.metric {
  background: rgba(255,42,42,.1);
  border: 2px solid rgba(255,42,42,.4);
  border-radius: 8px;
  padding: 12px;
  position: relative;
}
.metric-label {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ffd9a3;
  margin-bottom: 6px;
}
.metric-value {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--hell-yellow);
  display: inline-block;
}
.metric-value.danger-text {
  color: var(--hell-red);
  font-size: 26px;
  animation: dangerFlash .5s steps(1) infinite;
}
.metric-value.sauce {
  color: var(--hell-pink);
  font-size: 22px;
}
@keyframes dangerFlash {
  0%, 50% { color: var(--hell-red); }
  51%, 100% { color: var(--hell-yellow); }
}
.metric-value[data-shake="low"] { animation: shakeLow 4s ease-in-out infinite; }
.metric-value[data-shake="high"] { animation: shakeHigh 1s ease-in-out infinite; }
.metric-value[data-shake="extreme"] { animation: dangerFlash .4s steps(1) infinite, shakeHigh .3s ease-in-out infinite; }
@keyframes shakeLow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes shakeHigh {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
}
.metric-bar {
  height: 8px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.metric-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--hell-yellow), var(--hell-orange));
  border-radius: 4px;
  animation: barFill 2s ease-out;
}
.metric-bar.danger span {
  background: linear-gradient(90deg, var(--hell-orange), var(--hell-red));
  animation: barFill 2s ease-out, barPulse 1s ease-in-out infinite alternate;
}
@keyframes barFill {
  from { width: 0 !important; }
}
@keyframes barPulse {
  to { filter: brightness(1.4); }
}

.fryer-meter {
  height: 16px;
  margin-top: 8px;
  background: linear-gradient(90deg, #5bff8a 0%, #ffd23a 50%, #ff2a2a 100%);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.fryer-meter-fill {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.3);
  width: 0;
  animation: meterFill 3s ease-out forwards;
  right: 0; left: auto;
}
@keyframes meterFill {
  to { width: 8%; }
}
.fryer-meter-needle {
  position: absolute; top: -4px; bottom: -4px;
  left: 92%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.6);
  animation: needleJitter .15s ease-in-out infinite alternate;
}
@keyframes needleJitter {
  from { left: 89%; }
  to { left: 95%; }
}

.sauce-bottle {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 24px;
  animation: jiggle 2s ease-in-out infinite;
}

.screen-glare {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 30%);
  pointer-events: none;
  border-radius: 12px;
}

.boss-pointer {
  position: relative;
}
.boss-pointer svg {
  width: 200px;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.5));
}
.boss-line {
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--ink);
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  margin-top: 14px;
  position: relative;
  box-shadow: 4px 4px 0 var(--ink);
}
.boss-line::before {
  content: '';
  position: absolute;
  top: -12px; left: 30px;
  border: 8px solid transparent;
  border-bottom-color: #fff;
  border-top: 0;
  filter: drop-shadow(0 -2px 0 var(--ink));
}

.perf-audience {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}
.tiny-chair {
  display: flex; flex-direction: column; align-items: center;
  animation: tinyShake 1s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.2s);
}
@keyframes tinyShake {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
.tiny-chicken { width: 60px; }
.chair-base {
  width: 70px; height: 8px;
  background: #444;
  border-radius: 0 0 8px 8px;
  margin-top: -4px;
  box-shadow: 0 4px 8px rgba(0,0,0,.4);
}
.chair-base::before {
  content: '';
  display: block;
  width: 4px; height: 30px;
  background: #444;
  margin: 8px auto 0;
}

/* ====================================================
   SECTION 6 — FRYER ROOM
   ==================================================== */
.fryer {
  background:
    radial-gradient(ellipse at 50% 100%, #ff2a2a 0%, transparent 50%),
    radial-gradient(ellipse at 30% 50%, rgba(255,107,26,.4) 0%, transparent 50%),
    linear-gradient(180deg, #1a0810 0%, #3a0a14 50%, #5a0a14 100%);
  padding: 140px 20px;
  color: #fff;
  min-height: 100vh;
  position: relative;
}
.smoke-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.smoke {
  position: absolute;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 60%);
  border-radius: 50%;
  filter: blur(20px);
  animation: smokeFloat 20s linear infinite;
}
.smoke.s1 { top: 10%; left: -10%; animation-delay: 0s; }
.smoke.s2 { top: 40%; right: -10%; animation-delay: 5s; }
.smoke.s3 { bottom: 10%; left: 30%; animation-delay: 10s; }
.smoke.s4 { top: 60%; left: 50%; animation-delay: 15s; }
@keyframes smokeFloat {
  0% { transform: translateY(100px) scale(.8); opacity: 0; }
  20% { opacity: .5; }
  80% { opacity: .3; }
  100% { transform: translateY(-100px) scale(1.4); opacity: 0; }
}

.fryer-stage {
  position: relative;
  max-width: 1000px;
  margin: 60px auto 0;
  z-index: 2;
}

.fryer-pipes {
  position: absolute;
  top: -80px; left: 0; right: 0;
  height: 80px;
  display: flex;
  justify-content: space-around;
  pointer-events: none;
}
.pipe {
  width: 24px;
  height: 100%;
  background: linear-gradient(90deg, #555 0%, #888 30%, #555 100%);
  border-radius: 0 0 12px 12px;
  position: relative;
}
.pipe::before {
  content: '';
  position: absolute; bottom: -8px; left: -6px; right: -6px;
  height: 12px;
  background: #444;
  border-radius: 6px;
}

.fryer-machine {
  position: relative;
  width: 320px;
  margin: 0 auto;
  filter: drop-shadow(0 30px 40px rgba(255,42,42,.5));
}
.fryer-glow {
  position: absolute; inset: -40px;
  background: radial-gradient(circle, rgba(255,107,26,.4) 0%, transparent 60%);
  border-radius: 50%;
  z-index: -1;
  animation: fryerPulse 2s ease-in-out infinite;
}
@keyframes fryerPulse {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

.fryer-top {
  height: 50px;
  background: linear-gradient(180deg, #888 0%, #555 100%);
  border: 4px solid var(--ink);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.fryer-handle {
  width: 80px; height: 6px;
  background: #ddd;
  border: 2px solid var(--ink);
  border-radius: 3px;
}
.fryer-temp {
  background: #1a1a2a;
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 2px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.temp-num {
  font-family: var(--font-display);
  color: var(--hell-red);
  font-size: 14px;
  animation: tempFlash .5s steps(1) infinite;
}
.temp-label {
  font-family: monospace;
  font-size: 8px;
  color: #888;
}
@keyframes tempFlash {
  0%, 50% { color: var(--hell-red); }
  51%, 100% { color: var(--hell-yellow); }
}

.fryer-body {
  height: 200px;
  background: linear-gradient(180deg, #555 0%, #222 100%);
  border: 4px solid var(--ink);
  border-radius: 0 0 16px 16px;
  position: relative;
  overflow: hidden;
}
.fryer-oil {
  position: absolute;
  top: 30%; left: 12%; right: 12%; bottom: 20%;
  background: linear-gradient(180deg, var(--gold) 0%, #ff8a3a 100%);
  border-radius: 8px;
  border: 3px solid #5a3a00;
  overflow: hidden;
  box-shadow: inset 0 4px 12px rgba(255,255,255,.3), inset 0 -8px 20px rgba(0,0,0,.4);
}
.fryer-oil::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, transparent 100%);
}
.oil-bubble {
  position: absolute;
  background: radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(255,255,255,.1) 70%);
  border-radius: 50%;
  animation: bubbleRise 2s ease-in infinite;
}
.oil-bubble.b1 { width: 12px; height: 12px; left: 20%; bottom: 0; animation-delay: 0s; }
.oil-bubble.b2 { width: 8px;  height: 8px;  left: 40%; bottom: 0; animation-delay: .5s; }
.oil-bubble.b3 { width: 14px; height: 14px; left: 60%; bottom: 0; animation-delay: 1s; }
.oil-bubble.b4 { width: 10px; height: 10px; left: 75%; bottom: 0; animation-delay: 1.4s; }
.oil-bubble.b5 { width: 6px;  height: 6px;  left: 30%; bottom: 0; animation-delay: 1.8s; }
@keyframes bubbleRise {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

.fryer-flames {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%;
}
.fryer-flames .flame {
  width: 30%;
  height: 100%;
  position: absolute; bottom: 0;
}
.fryer-flames .flame.f1 { left: 5%; animation-delay: 0s; }
.fryer-flames .flame.f2 { left: 35%; animation-delay: .3s; }
.fryer-flames .flame.f3 { left: 65%; animation-delay: .6s; }

.fryer-feet {
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  margin-top: -2px;
}
.foot {
  width: 20px; height: 20px;
  background: #222;
  border-radius: 0 0 50% 50%;
}

.signs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  max-width: 800px;
  margin: 60px auto 0;
}
.warning-sign {
  background: var(--hell-yellow);
  color: var(--ink);
  border: 4px solid var(--ink);
  padding: 14px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  text-align: center;
  letter-spacing: .04em;
  transform: rotate(var(--rot, 0));
  box-shadow: 4px 4px 0 var(--ink);
  position: relative;
  transition: transform .2s;
}
.warning-sign:hover { transform: rotate(0) scale(1.05); }
.warning-sign::before, .warning-sign::after {
  content: '';
  position: absolute;
  top: 4px;
  width: 6px; height: 6px;
  background: var(--ink);
  border-radius: 50%;
}
.warning-sign::before { left: 4px; }
.warning-sign::after { right: 4px; }

.fryer-line {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 50px;
}
.line-chicken {
  width: 80px;
  animation: lineHop 1.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .15s);
}
@keyframes lineHop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ====================================================
   SECTION 7 — REDEMPTION
   ==================================================== */
.redemption {
  background:
    radial-gradient(ellipse at 50% 0%, var(--gold) 0%, transparent 60%),
    linear-gradient(180deg, #5a0a14 0%, #ffd9a3 30%, #fff5e6 100%);
  padding: 140px 20px;
}
.redemption-rays {
  position: absolute;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  width: 800px; height: 800px;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,210,58,.3) 10deg, transparent 20deg,
      transparent 60deg, rgba(255,210,58,.3) 70deg, transparent 80deg,
      transparent 120deg, rgba(255,210,58,.3) 130deg, transparent 140deg,
      transparent 180deg, rgba(255,210,58,.3) 190deg, transparent 200deg,
      transparent 240deg, rgba(255,210,58,.3) 250deg, transparent 260deg,
      transparent 300deg, rgba(255,210,58,.3) 310deg, transparent 320deg);
  border-radius: 50%;
  animation: raysSpin 80s linear infinite;
  z-index: 0;
  pointer-events: none;
  opacity: .8;
}
.redemption-stage {
  position: relative;
  max-width: 900px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  z-index: 2;
}
.hero-mountain-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.glow-disc {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(255,210,58,.4) 0%, transparent 60%);
  border-radius: 50%;
  z-index: -1;
  animation: discPulse 3s ease-in-out infinite;
}
@keyframes discPulse {
  0%, 100% { transform: scale(1); opacity: .6; }
  50% { transform: scale(1.1); opacity: 1; }
}
.folder-pile {
  position: relative;
  width: 280px;
  height: 200px;
}
.folder {
  position: absolute;
  width: 100px;
  height: 26px;
  background: linear-gradient(180deg, #ffce5b 0%, #f5a01c 100%);
  border: 2px solid #5a3a00;
  border-radius: 4px 4px 2px 2px;
  box-shadow: 0 2px 0 #5a3a00;
}
.folder::before {
  content: '';
  position: absolute;
  top: -6px; left: 8px;
  width: 30px; height: 8px;
  background: linear-gradient(180deg, #ffce5b 0%, #f5a01c 100%);
  border: 2px solid #5a3a00;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.folder.f1 { bottom: 0; left: 60px; transform: rotate(-2deg); }
.folder.f2 { bottom: 22px; left: 50px; transform: rotate(3deg); }
.folder.f3 { bottom: 44px; left: 70px; transform: rotate(-1deg); }
.folder.f4 { bottom: 66px; left: 80px; transform: rotate(2deg); }
.folder.f5 { bottom: 88px; left: 60px; transform: rotate(-3deg); }
.folder.f6 { bottom: 110px; left: 90px; transform: rotate(1deg); }
.folder.f7 { bottom: 132px; left: 80px; transform: rotate(-2deg); }
.hero-redemption {
  width: 220px;
  position: relative;
  margin-top: -40px;
  z-index: 2;
  animation: heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.redemption-quote {
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 16px;
  padding: 30px 28px;
  font-family: var(--font-marker);
  font-size: 22px;
  text-align: center;
  line-height: 1.4;
  box-shadow: 6px 6px 0 var(--ink);
  position: relative;
}
.big-quote {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 60px;
  line-height: 0;
  vertical-align: -20px;
  filter: drop-shadow(0 2px 0 #5a3a00);
}
.redemption-quote cite {
  display: block;
  margin-top: 14px;
  font-style: normal;
  font-size: 13px;
  color: #5a3a1a;
  font-family: var(--font-body);
}

.redemption-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: 800px;
  margin: 60px auto 0;
}
.perk {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .2s;
}
.perk:hover { transform: translateY(-4px) rotate(-2deg); }
.perk-icon { font-size: 22px; }
.perk-text { font-size: 14px; font-weight: 600; }

/* ====================================================
   SECTION 8 — FINALE
   ==================================================== */
.finale {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,210,58,.3) 0%, transparent 60%),
    linear-gradient(180deg, #fff5e6 0%, #ffd9a3 100%);
  padding: 140px 20px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.confetti-layer {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.finale-title {
  font-size: clamp(36px, 6vw, 68px);
  background: linear-gradient(180deg, var(--hell-red) 0%, var(--hell-orange) 50%, var(--hell-yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #5a3a1a);
  margin-bottom: 30px;
  animation: titleGlow 3s ease-in-out infinite;
}
.finale-lede {
  font-size: clamp(15px, 2vw, 19px);
  max-width: 680px;
  margin: 0 auto 50px;
  line-height: 1.55;
  color: #5a3a1a;
}

.prize-card {
  background: #fff;
  border: 5px solid var(--ink);
  border-radius: 24px;
  padding: 40px 32px;
  max-width: 540px;
  margin: 0 auto;
  box-shadow: 8px 12px 0 var(--ink), 0 30px 60px rgba(0,0,0,.2);
  position: relative;
  overflow: hidden;
}
.prize-card-glow {
  position: absolute;
  top: -100px; left: 50%;
  width: 400px; height: 400px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,210,58,.3) 0%, transparent 60%);
  z-index: 0;
  animation: discPulse 3s ease-in-out infinite;
}
.prize-title, .prize-sub, .prize-form {
  position: relative;
  z-index: 1;
}
.prize-title {
  font-family: var(--font-display);
  font-size: 28px;
  margin-bottom: 8px;
}
.prize-sub {
  font-size: 14px;
  color: #5a3a1a;
  margin-bottom: 30px;
  line-height: 1.5;
}
.aster {
  font-size: 11px;
  font-style: italic;
  opacity: .7;
}

.prize-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field span {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hell-red);
}
.field input,
.field select {
  padding: 14px 16px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  background: #fff5e6;
  outline: none;
  transition: all .2s;
  width: 100%;
}
.field input:focus,
.field select:focus {
  border-color: var(--hell-orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255,107,26,.2);
  transform: translateY(-1px);
}
.field input::placeholder {
  color: #aa8866;
  font-style: italic;
}

.cta-prize {
  margin-top: 12px;
  align-self: center;
  font-size: 20px;
  padding: 20px 40px;
}

.finale-footnote {
  margin-top: 30px;
  font-size: 13px;
  color: #5a3a1a;
  font-style: italic;
  opacity: .8;
  line-height: 1.5;
}

/* ====================================================
   MODAL
   ==================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,8,16,.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  padding: 20px;
}
.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  background: linear-gradient(180deg, #fff5e6 0%, #ffd9a3 100%);
  border: 5px solid var(--ink);
  border-radius: 24px;
  padding: 50px 36px 36px;
  max-width: 520px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 10px 14px 0 var(--ink), 0 40px 80px rgba(0,0,0,.5);
  transform: scale(.7) rotate(-5deg);
  transition: transform .5s cubic-bezier(.2, 1.6, .4, 1);
}
.modal-overlay.show .modal {
  transform: scale(1) rotate(0);
}
.modal-confetti {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: visible;
}
.modal-confetti span {
  position: absolute;
  top: 50%; left: 50%;
  font-size: 24px;
  opacity: 0;
}
.modal-overlay.show .modal-confetti span {
  animation: modalConfetti 1.6s ease-out forwards;
}
.modal-overlay.show .modal-confetti span:nth-child(1)  { --tx: -160px; --ty: -180px; --r: 360deg; animation-delay: 0s; }
.modal-overlay.show .modal-confetti span:nth-child(2)  { --tx: 160px;  --ty: -160px; --r: -360deg; animation-delay: .05s; }
.modal-overlay.show .modal-confetti span:nth-child(3)  { --tx: -200px; --ty: 60px;   --r: 240deg; animation-delay: .1s; }
.modal-overlay.show .modal-confetti span:nth-child(4)  { --tx: 220px;  --ty: 80px;   --r: -300deg; animation-delay: .15s; }
.modal-overlay.show .modal-confetti span:nth-child(5)  { --tx: -100px; --ty: -240px; --r: 540deg; animation-delay: .2s; }
.modal-overlay.show .modal-confetti span:nth-child(6)  { --tx: 100px;  --ty: -250px; --r: -480deg; animation-delay: .25s; }
.modal-overlay.show .modal-confetti span:nth-child(7)  { --tx: -240px; --ty: -50px;  --r: 600deg; animation-delay: .3s; }
.modal-overlay.show .modal-confetti span:nth-child(8)  { --tx: 250px;  --ty: -30px;  --r: -540deg; animation-delay: .35s; }
.modal-overlay.show .modal-confetti span:nth-child(9)  { --tx: -50px;  --ty: 200px;  --r: 180deg; animation-delay: .4s; }
.modal-overlay.show .modal-confetti span:nth-child(10) { --tx: 60px;   --ty: 220px;  --r: -180deg; animation-delay: .45s; }
.modal-overlay.show .modal-confetti span:nth-child(11) { --tx: -180px; --ty: 180px;  --r: 720deg; animation-delay: .5s; }
.modal-overlay.show .modal-confetti span:nth-child(12) { --tx: 200px;  --ty: 200px;  --r: -720deg; animation-delay: .55s; }
.modal-overlay.show .modal-confetti span:nth-child(13) { --tx: -260px; --ty: 30px;   --r: 360deg; animation-delay: .6s; }
.modal-overlay.show .modal-confetti span:nth-child(14) { --tx: 280px;  --ty: -100px; --r: -420deg; animation-delay: .65s; }
.modal-overlay.show .modal-confetti span:nth-child(15) { --tx: 0;      --ty: -280px; --r: 360deg; animation-delay: .7s; }
@keyframes modalConfetti {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(.5); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.3) rotate(var(--r)); }
}

.modal-trophy {
  font-size: 80px;
  display: inline-block;
  animation: trophyBounce 2s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.3));
}
@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}
.modal-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 4vw, 32px);
  margin: 16px 0 16px;
  color: var(--hell-deep);
}
.modal-text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 28px;
}
.cta-escape { font-size: 17px; }

/* ====================================================
   FAREWELL TOAST
   ==================================================== */
.farewell {
  position: fixed;
  top: 80px; left: 50%;
  transform: translate(-50%, -200%);
  z-index: 150;
  transition: transform .6s cubic-bezier(.2,1.6,.4,1);
}
.farewell.show {
  transform: translate(-50%, 0);
}
.farewell-card {
  background: var(--hell-yellow);
  border: 4px solid var(--ink);
  border-radius: 16px;
  padding: 16px 24px;
  text-align: center;
  font-family: var(--font-marker);
  font-size: 16px;
  line-height: 1.4;
  box-shadow: 6px 6px 0 var(--ink), 0 20px 40px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  gap: 14px;
}
.farewell-icon {
  font-size: 36px;
  animation: wave 1s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { transform: rotate(-15deg); }
  50% { transform: rotate(20deg); }
}

/* ====================================================
   FOOTER
   ==================================================== */
.footer {
  background: #1a0810;
  color: #ffd9a3;
  padding: 30px 20px;
  text-align: center;
  font-size: 13px;
}
.footer-row { margin-bottom: 6px; }
.footer-row.small { font-size: 11px; opacity: .6; font-style: italic; }
.dot-sep { margin: 0 8px; opacity: .5; }

/* ====================================================
   RESPONSIVE
   ==================================================== */
@media (max-width: 900px) {
  .hero-stage { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .hero-text { text-align: center; }
  .hero-text .fineprint { margin-left: auto; margin-right: auto; }
  .floating-office, .hero-chicken { width: 240px; }

  .coop-stage { grid-template-columns: 1fr 1fr; }
  .coop-stage > .cubicle:nth-child(3) { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  .ringing-phone, .printer { display: none; }

  .perf-stage { grid-template-columns: 1fr; }
  .screen-body { grid-template-columns: 1fr; }

  .redemption-stage { grid-template-columns: 1fr; }

  .topnav { display: none; }

  .award.a3 { display: none; }
  .award.a1 { left: 2%; top: 2%; }
  .award.a2 { right: 2%; top: 2%; }
}

@media (max-width: 600px) {
  .section { padding: 100px 16px 80px; }

  .topbar { padding: 10px 14px; }
  .brand-name { font-size: 14px; }

  .coop-stage { grid-template-columns: 1fr; }
  .coop-stage > .cubicle:nth-child(3) { max-width: none; }
  .poster.p1 { left: 0; }
  .poster.p2 { right: 0; }
  .poster.p3 { display: none; }

  .crew-grid { grid-template-columns: 1fr; }

  .hatch-stage { grid-template-areas: "parent parent" "egg egg" "look1 look2"; }

  .perf-audience { flex-wrap: wrap; }

  .signs-grid { grid-template-columns: 1fr; }

  .modal { padding: 40px 20px 24px; }
  .modal-title { font-size: 22px; }

  .floating-office .office-body { grid-template-columns: 1fr 1fr; }
  .floating-office .office-window:nth-child(7) { display: none; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ====================================================
   ★★★  PRO MAX UPGRADE LAYER  ★★★
   Angry Birds Toons-style polish:
   - Spring physics easings
   - Idle breathing on all chickens
   - Layered painterly backgrounds
   - Gradient text effects
   - Rich drop shadows + glow
   ==================================================== */

:root {
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --ease-overshoot: cubic-bezier(.18, .89, .32, 1.28);
  --ease-snap: cubic-bezier(.2, .9, .2, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --shadow-cartoon: 0 6px 0 #1a1410, 0 12px 30px rgba(0,0,0,.4);
  --shadow-cartoon-lg: 0 8px 0 #1a1410, 0 20px 50px rgba(0,0,0,.5);
  --shadow-pop: 0 12px 0 #1a1410, 0 30px 60px rgba(0,0,0,.5);
}

/* ---------- Master character class ---------- */
.ab-character {
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.35));
  transform-origin: 50% 90%;
  will-change: transform;
}

.ab-chicken {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Idle breathing on every Angry Birds chicken */
@keyframes ab-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.02, 0.98) translateY(-2px); }
}
.ab-chicken {
  animation: ab-breathe 3.5s var(--ease-soft) infinite;
}

/* Eye pupils slowly drift to feel alive */
@keyframes pupil-drift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  50% { transform: translate(1.5px, -1px); }
  75% { transform: translate(0, 1.5px); }
}
.ab-chicken .pupil {
  transform-origin: center;
  animation: pupil-drift 6s var(--ease-soft) infinite;
}

/* ---------- Stronger character drop shadow ---------- */
.hero-chicken,
.boss-chicken,
.parent-chicken,
.baby-chicken,
.boss-pointer,
.hero-redemption {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
}

/* ---------- HERO: layered painterly background ---------- */
.hero {
  background:
    radial-gradient(ellipse at 50% 30%, #ffb43a 0%, transparent 40%),
    radial-gradient(ellipse at 30% 70%, #ff5b1a 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, #c41030 0%, transparent 55%),
    linear-gradient(180deg, #1a0410 0%, #4a0a18 35%, #8a1828 60%, #ff6b1a 95%);
}

.hero::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 320px;
  background:
    /* Foreground hill silhouette */
    radial-gradient(ellipse at 20% 100%, #1a0410 0%, transparent 35%),
    radial-gradient(ellipse at 80% 100%, #1a0410 0%, transparent 35%),
    radial-gradient(ellipse at 50% 100%, #2a0810 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: '';
  position: absolute;
  top: 12%; left: 0; right: 0;
  height: 280px;
  background:
    /* Distant atmospheric mountains */
    radial-gradient(ellipse at 15% 100%, #3a1a30 0%, transparent 18%),
    radial-gradient(ellipse at 38% 100%, #5a1a30 0%, transparent 22%),
    radial-gradient(ellipse at 65% 100%, #4a0a20 0%, transparent 25%),
    radial-gradient(ellipse at 90% 100%, #3a1428 0%, transparent 20%);
  filter: blur(0.5px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}

/* Painted clouds (orange/yellow embers) */
.hero .hero-bg::before {
  content: '';
  position: absolute;
  top: 8%; left: -5%;
  width: 220px; height: 70px;
  background:
    radial-gradient(ellipse 80px 30px at 30% 50%, rgba(255,210,58,.5) 0%, transparent 70%),
    radial-gradient(ellipse 60px 25px at 70% 50%, rgba(255,138,58,.5) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(2px);
  animation: cloud-drift 40s linear infinite;
}
.hero .hero-bg::after {
  content: '';
  position: absolute;
  top: 14%; right: -10%;
  width: 280px; height: 80px;
  background:
    radial-gradient(ellipse 100px 40px at 30% 50%, rgba(255,180,58,.45) 0%, transparent 70%),
    radial-gradient(ellipse 80px 30px at 70% 50%, rgba(255,90,58,.45) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(2px);
  animation: cloud-drift-rev 55s linear infinite;
}
@keyframes cloud-drift {
  0% { transform: translateX(-50px); }
  100% { transform: translateX(calc(100vw + 50px)); }
}
@keyframes cloud-drift-rev {
  0% { transform: translateX(50px); }
  100% { transform: translateX(calc(-100vw - 50px)); }
}

/* Hero title — glossy gradient text with stronger glow */
.hero-title {
  filter: drop-shadow(0 8px 0 #5a0a0a) drop-shadow(0 16px 30px rgba(255,107,26,.6));
}
.t-line.t-glow {
  background: linear-gradient(180deg, #fff5b0 0%, #ffd23a 35%, #ff8a3a 65%, #ff2a2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #5a0a0a) drop-shadow(0 0 40px rgba(255,210,58,.85));
}

/* CTA button with thicker outline + bouncy hover */
.cta {
  border-width: 5px;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
  transition: transform .25s var(--ease-bounce), box-shadow .25s var(--ease-bounce);
}
.cta:hover {
  transform: translateY(-4px) scale(1.05) rotate(-2deg);
  box-shadow: 0 12px 0 var(--hell-deep), 0 24px 50px rgba(0,0,0,.55);
}
.cta:active {
  transform: translateY(2px) scale(.98);
}

/* ---------- COOP painterly upgrade ---------- */
.coop {
  background:
    radial-gradient(ellipse at 50% 0%, #ff8a3a 0%, transparent 30%),
    linear-gradient(180deg, #5a0a14 0%, #ffd2a3 18%, #fff0d5 100%);
}
.coop::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background:
    /* Wood floor planks */
    repeating-linear-gradient(90deg,
      #c69a5a 0 100px, #b08848 100px 102px, #c69a5a 102px 200px, #a07838 200px 202px),
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 100%);
  z-index: 0;
  pointer-events: none;
}

.cubicle {
  border-width: 4px;
  border-radius: 16px;
  box-shadow: var(--shadow-cartoon);
  transition: transform .3s var(--ease-bounce);
}
.cubicle:hover { transform: translateY(-6px) rotate(-1deg); }
.cubicle:nth-child(2):hover { transform: translateY(-6px) rotate(1deg); }

/* Cubicle chicken sized properly */
.cube-chicken { display: flex; justify-content: center; }
.cube-chicken .ab-chicken { width: 110px; max-width: 100%; }

/* ---------- BOSS section: dark cathedral ---------- */
.boss {
  background:
    radial-gradient(ellipse at 50% 0%, #ffb43a 0%, transparent 30%),
    radial-gradient(ellipse at 50% 50%, #ff4a1a 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, #c41020 0%, transparent 50%),
    linear-gradient(180deg, #1a0410 0%, #2a0510 50%, #4a0810 100%);
}
.boss::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50%;
  background:
    /* Stone columns */
    radial-gradient(ellipse at 10% 100%, #3a1018 0%, transparent 18%),
    radial-gradient(ellipse at 30% 100%, #4a1820 0%, transparent 22%),
    radial-gradient(ellipse at 70% 100%, #4a1820 0%, transparent 22%),
    radial-gradient(ellipse at 90% 100%, #3a1018 0%, transparent 18%);
  pointer-events: none;
  z-index: 0;
}
.boss::after {
  content: '';
  position: absolute;
  top: 20%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255,210,58,.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: ab-breathe 4s ease-in-out infinite;
}

.boss-quote {
  border-width: 5px;
  box-shadow: var(--shadow-pop);
  background: linear-gradient(180deg, #fff 0%, #fff5e6 100%);
  border-radius: 20px;
  font-size: 19px;
}

/* Throne enhancement */
.throne-back {
  border-width: 8px;
  box-shadow: 0 0 80px rgba(255,210,58,.6), inset 0 0 40px rgba(0,0,0,.7);
  background:
    radial-gradient(ellipse at 50% 30%, #5a3a1a 0%, transparent 50%),
    linear-gradient(180deg, #2a1a08 0%, #5a3a1a 50%, #2a1a08 100%);
}

.award {
  border-width: 4px;
  box-shadow: 6px 6px 0 var(--ink), 0 0 20px rgba(255,210,58,.3);
  border-radius: 8px;
  transition: transform .3s var(--ease-bounce);
}
.award:hover { transform: rotate(0) scale(1.1) !important; }

/* ---------- HATCH section ---------- */
.hatch {
  background:
    radial-gradient(ellipse at 50% 0%, #ff5b1a 0%, transparent 25%),
    linear-gradient(180deg, #1a0410 0%, #ffd2a3 22%, #fff5e6 100%);
}
.hatch-stage {
  background:
    /* Sky behind, hatching room foreground */
    linear-gradient(180deg,
      #5cb8e6 0%, #a8d8f0 35%,
      #fff0c8 45%, #d4a96a 65%, #a07838 100%);
  border-width: 5px;
  border-radius: 28px;
  box-shadow: var(--shadow-pop);
}
.hatch-stage::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 30%;
  height: 30%;
  background:
    /* Distant rolling hills */
    radial-gradient(ellipse at 20% 100%, #5a8068 0%, transparent 35%),
    radial-gradient(ellipse at 60% 100%, #3a6048 0%, transparent 32%),
    radial-gradient(ellipse at 90% 100%, #4a7058 0%, transparent 30%);
  z-index: 0;
  pointer-events: none;
}

/* Parent chicken sized appropriately */
.parent-chicken .ab-chicken { width: 220px; max-width: 100%; }
.baby-chicken .ab-chicken { width: 180px; max-width: 100%; }

/* ---------- CREW section: cartoon meadow ---------- */
.crew {
  background:
    radial-gradient(ellipse at 50% 0%, #ffe14d 0%, transparent 25%),
    linear-gradient(180deg, #fff5e6 0%, #ffd9a3 60%, #f5b878 100%);
}
.crew::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 180px;
  background:
    /* Grass blades */
    radial-gradient(ellipse at 10% 100%, #5a8068 0%, transparent 15%),
    radial-gradient(ellipse at 30% 100%, #3a6048 0%, transparent 18%),
    radial-gradient(ellipse at 50% 100%, #5a8068 0%, transparent 16%),
    radial-gradient(ellipse at 70% 100%, #3a6048 0%, transparent 18%),
    radial-gradient(ellipse at 90% 100%, #5a8068 0%, transparent 15%);
  z-index: 0;
  pointer-events: none;
}

.crew-card {
  border-width: 5px;
  border-radius: 24px;
  box-shadow: var(--shadow-cartoon);
  transition: transform .35s var(--ease-bounce), box-shadow .35s var(--ease-bounce);
}
.crew-card:hover {
  transform: translate(-4px, -8px) rotate(-2deg) scale(1.03);
  box-shadow: 12px 16px 0 var(--ink), 0 30px 50px rgba(0,0,0,.3);
}
.crew-card:nth-child(2n):hover {
  transform: translate(4px, -8px) rotate(2deg) scale(1.03);
}
.card-portrait {
  width: 160px; height: 160px;
  border-width: 4px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0%, #fff5b0 40%, #ffd23a 100%);
  box-shadow: inset 0 6px 16px rgba(255,255,255,.6), inset 0 -8px 20px rgba(0,0,0,.15);
}
.card-portrait::before {
  border-width: 3px;
  border-color: rgba(0,0,0,.3);
}
.card-name {
  font-size: 24px;
  letter-spacing: -.02em;
}
.stat-value {
  font-size: 12px;
  letter-spacing: .03em;
}

/* ---------- PERF section: dark control room ---------- */
.perf {
  background:
    radial-gradient(ellipse at 50% 0%, #ffb43a 0%, transparent 25%),
    radial-gradient(ellipse at 80% 50%, rgba(255,107,26,.3) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 50%, rgba(255,42,42,.3) 0%, transparent 50%),
    linear-gradient(180deg, #1a0410 0%, #3a0610 50%, #5a0a14 100%);
}
.perf::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Subtle grid lines */
    linear-gradient(90deg, rgba(255,210,58,.04) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(0deg, rgba(255,210,58,.04) 1px, transparent 1px) 0 0 / 60px 60px;
  pointer-events: none;
  z-index: 0;
}

.screen-frame {
  border-width: 8px;
  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    inset 0 0 40px rgba(0,0,0,.6),
    inset 0 2px 0 rgba(255,255,255,.1);
  background: linear-gradient(180deg, #14141e 0%, #0a0a14 100%);
}

.boss-pointer .ab-chicken { width: 240px; max-width: 100%; }

/* ---------- FRYER section: industrial inferno ---------- */
.fryer {
  background:
    radial-gradient(ellipse at 50% 100%, #ff4a1a 0%, transparent 40%),
    radial-gradient(ellipse at 30% 60%, rgba(255,107,26,.5) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 40%, rgba(255,42,42,.4) 0%, transparent 50%),
    linear-gradient(180deg, #0a0008 0%, #2a0410 40%, #5a0a14 75%, #c41020 100%);
}
.fryer::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40%;
  background:
    /* Lava floor */
    radial-gradient(ellipse at 20% 100%, #ffb43a 0%, transparent 25%),
    radial-gradient(ellipse at 50% 100%, #ff8a1a 0%, transparent 30%),
    radial-gradient(ellipse at 80% 100%, #ff4a1a 0%, transparent 25%);
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.7;
}
.fryer::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background:
    /* Industrial ceiling pipes */
    repeating-linear-gradient(90deg,
      transparent 0 60px, rgba(0,0,0,.4) 60px 70px, transparent 70px 130px);
  pointer-events: none;
  z-index: 0;
}

.fryer-machine {
  filter: drop-shadow(0 30px 50px rgba(255,42,42,.6));
}

.warning-sign {
  border-width: 5px;
  box-shadow: 6px 6px 0 var(--ink), 0 12px 30px rgba(255,210,58,.3);
  font-size: 14px;
}

/* ---------- REDEMPTION section: heavenly clouds ---------- */
.redemption {
  background:
    radial-gradient(ellipse at 50% 0%, #fff8a0 0%, transparent 35%),
    radial-gradient(ellipse at 30% 50%, rgba(255,210,58,.4) 0%, transparent 50%),
    linear-gradient(180deg,
      #ffd23a 0%, #ff8a3a 18%, #ffd9a3 38%, #fff5e6 65%, #d4f0ff 100%);
}
.redemption::before {
  content: '';
  position: absolute;
  top: 25%; left: 0; right: 0;
  height: 200px;
  background:
    /* Painted heavenly clouds */
    radial-gradient(ellipse 180px 70px at 15% 50%, rgba(255,255,255,.7) 0%, transparent 70%),
    radial-gradient(ellipse 220px 80px at 50% 50%, rgba(255,255,255,.85) 0%, transparent 70%),
    radial-gradient(ellipse 200px 75px at 85% 50%, rgba(255,255,255,.7) 0%, transparent 70%);
  filter: blur(1px);
  pointer-events: none;
  z-index: 0;
}

.hero-redemption .ab-chicken { width: 240px; max-width: 100%; }

.redemption-quote {
  border-width: 5px;
  box-shadow: var(--shadow-pop);
  background: linear-gradient(180deg, #fff 0%, #fff8e0 100%);
  font-size: 24px;
}

.perk {
  border-width: 4px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .3s var(--ease-bounce);
}
.perk:hover { transform: translateY(-6px) rotate(-3deg) scale(1.06); }

/* ---------- FINALE: confetti meadow ---------- */
.finale {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,210,58,.4) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 80%, rgba(255,138,58,.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(255,42,42,.2) 0%, transparent 50%),
    linear-gradient(180deg, #fff5e6 0%, #ffd9a3 60%, #ff8a3a 100%);
}

.prize-card {
  border-width: 6px;
  box-shadow: 12px 16px 0 var(--ink), 0 40px 80px rgba(0,0,0,.25);
  border-radius: 28px;
}
.prize-form .field input,
.prize-form .field select {
  border-width: 4px;
  font-size: 16px;
  padding: 16px 18px;
}

/* ---------- All section titles: gradient text ---------- */
.section-title:not(.light):not(.finale-title) {
  background: linear-gradient(180deg, #5a0a14 0%, #c41020 60%, #ff5b1a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.15));
}

/* ---------- Modal upgrade ---------- */
.modal {
  border-width: 6px;
  border-radius: 28px;
  box-shadow:
    12px 16px 0 var(--ink),
    0 50px 100px rgba(0,0,0,.6);
  background:
    radial-gradient(circle at 50% 0%, #fff8a0 0%, transparent 50%),
    linear-gradient(180deg, #fff5e6 0%, #ffd9a3 100%);
}
.modal-trophy {
  font-size: 100px;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.4));
}

/* ---------- Floating office: 3D pop ---------- */
.floating-office {
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.6));
}
.office-roof {
  background: linear-gradient(180deg, #ff5566 0%, #c41020 70%, #8a0a18 100%);
  border-radius: 8px 8px 0 0;
  box-shadow: inset 0 4px 0 rgba(255,255,255,.3), inset 0 -4px 0 rgba(0,0,0,.2);
}
.office-body {
  background: linear-gradient(180deg, #ffd9a3 0%, #f5a878 50%, #c47838 100%);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.2);
}
.office-window {
  background:
    radial-gradient(circle at 30% 30%, #fff8a0 0%, #ffd23a 40%, #ff8a3a 100%);
  border-width: 4px;
  box-shadow: inset 0 0 8px rgba(0,0,0,.3);
}
.office-window::after {
  background:
    linear-gradient(transparent 48%, #1a1410 48%, #1a1410 52%, transparent 52%),
    linear-gradient(90deg, transparent 48%, #1a1410 48%, #1a1410 52%, transparent 52%);
}

/* ---------- Speech bubbles: chunkier ---------- */
.bubble {
  border-width: 3px;
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 12px;
  padding: 6px 12px;
  font-weight: 600;
}

/* ---------- Section tags: pill style ---------- */
.section-tag {
  display: inline-block;
  background: rgba(255,255,255,.85);
  color: var(--hell-red);
  padding: 6px 18px;
  border: 3px solid var(--hell-red);
  border-radius: 50px;
  font-family: var(--font-display);
  font-size: 12px;
  margin-bottom: 16px;
  box-shadow: 3px 3px 0 var(--hell-red);
}
.section-tag.inverted {
  background: rgba(255,210,58,.15);
  color: var(--hell-yellow);
  border-color: var(--hell-yellow);
  box-shadow: 3px 3px 0 var(--hell-yellow);
}
.section-tag.golden {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

/* ---------- Floor shadows under standing chickens ---------- */
.cube-chicken { position: relative; }
.cube-chicken::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 8px;
  background: radial-gradient(ellipse, rgba(0,0,0,.35) 0%, transparent 70%);
  z-index: -1;
  pointer-events: none;
}

/* ---------- Crew portrait: little floor shadow inside the circle ---------- */
.card-portrait::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 50%;
  transform: translateX(-50%);
  width: 70%; height: 10px;
  background: radial-gradient(ellipse, rgba(0,0,0,.25) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- Stagger entrance: cleaner spring ---------- */
.reveal-pop.in,
.reveal.in {
  transition: opacity .7s var(--ease-soft), transform .7s var(--ease-overshoot);
}

/* ---------- Crew cards stagger ---------- */
.crew-card:nth-child(1) { transition-delay: 0ms; }
.crew-card:nth-child(2) { transition-delay: 60ms; }
.crew-card:nth-child(3) { transition-delay: 120ms; }
.crew-card:nth-child(4) { transition-delay: 180ms; }
.crew-card:nth-child(5) { transition-delay: 240ms; }

/* ---------- Floor for hero stage ---------- */
.hero::after {
  z-index: 1;
}

/* ---------- Heavy gradient on finale title ---------- */
.finale-title {
  background: linear-gradient(180deg, #ff2a2a 0%, #ff8a3a 40%, #ffd23a 70%, #fff5b0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 0 #5a0a14) drop-shadow(0 0 40px rgba(255,210,58,.7));
}

/* ---------- Fineprint marker fix ---------- */
.fineprint {
  background: rgba(0,0,0,.25);
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px dashed rgba(255,210,58,.4);
  display: inline-block;
}

/* ---------- Eye-blink keyframe (used by JS toggle) ---------- */
@keyframes ab-blink {
  0%, 95%, 100% { transform: scaleY(1); }
  97% { transform: scaleY(0.05); }
}

/* ---------- Curtain face polish ---------- */
.curtain-inner {
  box-shadow:
    0 0 100px rgba(255,210,58,.7),
    inset 0 -25px 0 #ffd9a3,
    inset 0 8px 0 rgba(255,255,255,.5);
}

/* ---------- Pop a bit on CTA hover with micro rotate ---------- */
.cta-prize:hover { transform: translateY(-4px) scale(1.05) rotate(-2deg); }

/* ---------- Crew card glow halo ---------- */
.card-glow {
  background: conic-gradient(from 0deg,
    var(--hell-yellow), var(--hell-orange), var(--hell-red),
    var(--hell-pink), var(--hell-purple), var(--hell-yellow));
  filter: blur(12px);
}
.crew-card:hover .card-glow { opacity: 0.55; animation: glow-spin 4s linear infinite; }
@keyframes glow-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Hatch egg: chunkier outline ---------- */
.egg-shape {
  border-width: 5px;
  box-shadow: inset -10px -14px 18px rgba(0,0,0,.15), 0 16px 30px rgba(0,0,0,.4);
}

/* ---------- Mobile tightening ---------- */
@media (max-width: 600px) {
  .ab-chicken { animation-duration: 4s; }
  .crew-card:hover,
  .crew-card:nth-child(2n):hover { transform: translateY(-4px) scale(1.02); }
  .hero::before, .hero::after { height: 200px; }
}

/* ====================================================
   ★★★  COMIC BOOK MODE  ★★★
   Theatrical panels, speech bubbles, sound effects
   ==================================================== */

/* ---------- THE CONFRONTATION SECTION ---------- */
.confront {
  background:
    radial-gradient(ellipse at 50% 0%, #ff4a1a 0%, transparent 30%),
    radial-gradient(ellipse at 30% 60%, rgba(255,138,58,.4) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, rgba(255,42,42,.35) 0%, transparent 50%),
    linear-gradient(180deg, #1a0410 0%, #2a0510 50%, #4a0810 100%);
  padding: 140px 20px 140px;
  overflow: visible;
}

/* Halftone overlay across whole section */
.halftone-overlay {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,210,58,.18) 0%, transparent 8%),
    radial-gradient(circle at 75% 25%, rgba(255,210,58,.18) 0%, transparent 8%),
    radial-gradient(circle at 25% 75%, rgba(255,210,58,.18) 0%, transparent 8%),
    radial-gradient(circle at 75% 75%, rgba(255,210,58,.18) 0%, transparent 8%);
  background-size: 30px 30px;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* ---------- Comic page layout ---------- */
.comic-page {
  position: relative;
  max-width: 1100px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 380px 320px;
  gap: 24px;
  z-index: 2;
}

/* Comic panel base */
.comic-panel {
  position: relative;
  background: #fff5e6;
  border: 6px solid #1a1410;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    8px 8px 0 #1a1410,
    0 20px 50px rgba(0,0,0,.6);
  transition: transform .4s var(--ease-bounce), box-shadow .4s var(--ease-bounce);
}
.comic-panel:hover {
  transform: translate(-2px, -4px) rotate(-1deg);
  box-shadow:
    12px 14px 0 #1a1410,
    0 30px 60px rgba(0,0,0,.7);
}
.comic-panel:nth-child(2):hover { transform: translate(2px, -4px) rotate(1deg); }

.panel-wide { grid-column: 1 / -1; }
.panel-trio {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 4px;
  padding: 0 12px;
}
.panel-closeup {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* Panel number badge */
.panel-number {
  position: absolute;
  top: 10px; left: 10px;
  background: #1a1410;
  color: #ffd23a;
  font-family: var(--font-display);
  font-size: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  z-index: 10;
  box-shadow: 0 4px 0 #5a3a1a;
}

/* Panel painted backgrounds */
.panel-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.panel-bg-office {
  background:
    /* Window light shafts */
    linear-gradient(110deg, transparent 0%, rgba(255,210,58,.25) 30%, transparent 60%),
    /* Office wall */
    linear-gradient(180deg, #f5d8a8 0%, #c69a5a 50%, #a07838 100%);
}
.panel-bg-office::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.06) 1px, transparent 2px);
  background-size: 8px 8px;
  opacity: 0.7;
}
.panel-bg-hallway {
  background:
    /* Hallway perspective lines */
    radial-gradient(ellipse at 50% 80%, #2a1a08 0%, transparent 50%),
    linear-gradient(180deg, #5a3a1a 0%, #c69a5a 50%, #5a3a1a 100%);
}
.panel-bg-hallway::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.08) 1px, transparent 2px);
  background-size: 6px 6px;
  opacity: 0.6;
}
.panel-bg-rage {
  background:
    radial-gradient(circle at 50% 50%, #ffd23a 0%, #ff8a3a 30%, #ff2a2a 70%, #5a0a14 100%);
}
.panel-bg-rage::after {
  /* Radial sunburst lines */
  content: '';
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 0deg at 50% 50%,
      rgba(255,255,255,.25) 0deg, transparent 12deg,
      rgba(255,255,255,.25) 30deg, transparent 42deg,
      rgba(255,255,255,.25) 60deg, transparent 72deg,
      rgba(255,255,255,.25) 90deg, transparent 102deg,
      rgba(255,255,255,.25) 120deg, transparent 132deg,
      rgba(255,255,255,.25) 150deg, transparent 162deg,
      rgba(255,255,255,.25) 180deg, transparent 192deg,
      rgba(255,255,255,.25) 210deg, transparent 222deg,
      rgba(255,255,255,.25) 240deg, transparent 252deg,
      rgba(255,255,255,.25) 270deg, transparent 282deg,
      rgba(255,255,255,.25) 300deg, transparent 312deg,
      rgba(255,255,255,.25) 330deg, transparent 342deg);
  animation: sunburst-spin 30s linear infinite;
}
@keyframes sunburst-spin { to { transform: rotate(360deg); } }

/* ---------- Scene actors (chickens inside panels) ---------- */
.scene-actor {
  position: absolute;
  z-index: 5;
}
.boss-loom {
  bottom: 0;
  left: 5%;
  width: 36%;
  animation: actor-loom 3s var(--ease-soft) infinite;
}
@keyframes actor-loom {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}
.actor-barry, .actor-brandi, .actor-gabe {
  position: relative;
  width: 30%;
  max-width: 200px;
}
.actor-barry { animation: actor-shake .8s var(--ease-soft) infinite; }
.actor-brandi { animation: ab-breathe 3.5s var(--ease-soft) infinite; }
.actor-gabe { animation: actor-bob 2.5s var(--ease-soft) infinite; }
@keyframes actor-shake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 2px); }
}
@keyframes actor-bob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.boss-rage {
  position: relative;
  width: 70%;
  max-width: 280px;
  margin: 30px auto 0;
  animation: rage-shake .15s steps(2) infinite;
}
@keyframes rage-shake {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -2px); }
}

/* ---------- Speech bubbles ---------- */
.speech-bubble {
  position: absolute;
  background: #fff;
  border: 4px solid #1a1410;
  border-radius: 50%;
  padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 14px;
  text-align: center;
  line-height: 1.3;
  color: #1a1410;
  box-shadow: 4px 4px 0 #1a1410;
  z-index: 10;
  min-width: 100px;
  max-width: 200px;
}
.speech-bubble strong { color: #ff2a2a; }
.speech-bubble em { font-style: italic; color: #5a1010; }

.bubble-small {
  font-size: 12px;
  padding: 10px 16px;
  bottom: 78%;
  white-space: nowrap;
}
.bubble-small[style*="--anchor:right"] {
  right: -10%;
}
.bubble-small[style*="--anchor:left"] {
  left: -10%;
}
.bubble-yell {
  font-size: 18px;
  font-weight: 900;
  border-width: 5px;
  border-radius: 16px;
  letter-spacing: .03em;
  background: #fff5b0;
}
.bubble-yell[style*="--anchor:right"] {
  top: 8%;
  right: -2%;
  max-width: 240px;
}
.bubble-yell[style*="--anchor:top"] {
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 200px;
}
/* Jagged angry bubble */
.bubble-jagged {
  border-radius: 0;
  clip-path: polygon(
    0 20%, 8% 0, 20% 12%, 32% 0, 45% 14%, 60% 2%, 75% 16%, 88% 4%, 100% 20%,
    96% 35%, 100% 50%, 94% 65%, 100% 80%, 88% 96%, 75% 84%, 60% 98%,
    45% 86%, 32% 100%, 20% 88%, 8% 100%, 0 80%, 6% 65%, 0 50%, 6% 35%
  );
  padding: 24px 30px;
}

/* Bubble tails */
.bubble-tail {
  position: absolute;
  width: 28px; height: 28px;
}
.tail-left {
  left: -22px; bottom: 18px;
  background: #fff5b0;
  border-left: 4px solid #1a1410;
  border-bottom: 4px solid #1a1410;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}
.tail-bl {
  left: 12px; bottom: -16px;
  background: #fff;
  border-left: 4px solid #1a1410;
  border-bottom: 4px solid #1a1410;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.tail-br {
  right: 12px; bottom: -16px;
  background: #fff;
  border-right: 4px solid #1a1410;
  border-bottom: 4px solid #1a1410;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.tail-bottom {
  bottom: -22px; left: 50%;
  transform: translateX(-50%);
  width: 30px; height: 30px;
  background: #fff5b0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ---------- Sound effects (KAPOW! ZONK!) ---------- */
.sfx {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  z-index: 11;
  text-align: center;
  color: #fff;
  filter: drop-shadow(0 4px 0 #1a1410);
}
.sfx::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: var(--sfx-bg, #ffd23a);
  border: 4px solid #1a1410;
  z-index: -1;
  clip-path: polygon(
    50% 0, 60% 12%, 75% 5%, 78% 20%, 92% 18%, 88% 32%, 100% 40%,
    88% 52%, 96% 65%, 82% 70%, 88% 85%, 72% 82%, 65% 95%, 55% 85%,
    45% 100%, 35% 85%, 22% 92%, 22% 78%, 8% 78%, 14% 62%, 0 55%,
    12% 42%, 4% 28%, 18% 28%, 16% 14%, 30% 18%, 32% 5%, 42% 16%
  );
}
.sfx-slam {
  --sfx-bg: #ffd23a;
  font-size: 36px;
  top: 8%;
  left: 38%;
  padding: 14px 22px;
  color: #1a1410;
  transform: rotate(-12deg);
  animation: sfx-pop .4s var(--ease-bounce);
}
.sfx-pow {
  --sfx-bg: #ff2a2a;
  font-size: 38px;
  top: 8%;
  right: 6%;
  padding: 14px 22px;
  color: #fff;
  transform: rotate(15deg);
  animation: sfx-pop .4s var(--ease-bounce) .3s both;
}
.sfx-zonk {
  --sfx-bg: #5cd1ff;
  font-size: 28px;
  bottom: 12%;
  left: 6%;
  padding: 10px 18px;
  color: #1a1410;
  transform: rotate(-20deg);
  animation: sfx-pop .4s var(--ease-bounce) .6s both;
}
@keyframes sfx-pop {
  0% { transform: scale(0) rotate(0); opacity: 0; }
  50% { transform: scale(1.2) rotate(var(--rot, -10deg)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--rot, -10deg)); opacity: 1; }
}
.sfx-slam { --rot: -12deg; }
.sfx-pow { --rot: 15deg; }
.sfx-zonk { --rot: -20deg; }

/* ---------- Speed lines (radiating from action) ---------- */
.speed-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.speed-lines span {
  position: absolute;
  height: 3px;
  background: #1a1410;
  transform-origin: left center;
  border-radius: 2px;
  opacity: 0.4;
}
.speed-lines span:nth-child(1) { top: 30%; right: 0; width: 80px; transform: rotate(-2deg); }
.speed-lines span:nth-child(2) { top: 40%; right: 0; width: 100px; transform: rotate(2deg); }
.speed-lines span:nth-child(3) { top: 50%; right: 0; width: 70px; transform: rotate(-1deg); }
.speed-lines span:nth-child(4) { top: 60%; right: 0; width: 90px; transform: rotate(3deg); }
.speed-lines span:nth-child(5) { top: 70%; right: 0; width: 60px; transform: rotate(-3deg); }

/* Action lines radiating from boss in panel 3 */
.action-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(0,0,0,.35) 4deg, transparent 8deg,
      transparent 24deg, rgba(0,0,0,.35) 28deg, transparent 32deg,
      transparent 48deg, rgba(0,0,0,.35) 52deg, transparent 56deg,
      transparent 72deg, rgba(0,0,0,.35) 76deg, transparent 80deg,
      transparent 96deg, rgba(0,0,0,.35) 100deg, transparent 104deg,
      transparent 120deg, rgba(0,0,0,.35) 124deg, transparent 128deg,
      transparent 144deg, rgba(0,0,0,.35) 148deg, transparent 152deg,
      transparent 168deg, rgba(0,0,0,.35) 172deg, transparent 176deg,
      transparent 192deg, rgba(0,0,0,.35) 196deg, transparent 200deg,
      transparent 216deg, rgba(0,0,0,.35) 220deg, transparent 224deg,
      transparent 240deg, rgba(0,0,0,.35) 244deg, transparent 248deg,
      transparent 264deg, rgba(0,0,0,.35) 268deg, transparent 272deg,
      transparent 288deg, rgba(0,0,0,.35) 292deg, transparent 296deg,
      transparent 312deg, rgba(0,0,0,.35) 316deg, transparent 320deg,
      transparent 336deg, rgba(0,0,0,.35) 340deg, transparent 344deg);
  mix-blend-mode: multiply;
  opacity: 0.7;
  animation: sunburst-spin 60s linear infinite reverse;
}

/* ---------- Confrontation responsive ---------- */
@media (max-width: 760px) {
  .comic-page {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .panel-trio { grid-column: 1; grid-row: 2; min-height: 280px; }
  .panel-closeup { grid-column: 1; grid-row: 3; min-height: 320px; }
  .actor-barry, .actor-brandi, .actor-gabe {
    width: 32%;
  }
  .bubble-small { font-size: 10px; max-width: 130px; }
  .sfx-slam { font-size: 26px; }
  .sfx-pow { font-size: 28px; }
  .sfx-zonk { font-size: 20px; }
}

/* ====================================================
   ★★★  COMIC FX UPGRADES  ★★★
   Panel borders on existing sections
   Halftone backgrounds
   More dramatic fryer
   ==================================================== */

/* Add halftone pattern overlay to FRYER section */
.fryer .smoke-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(0,0,0,.15) 0%, transparent 8%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,.15) 0%, transparent 8%);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.4;
}

/* AMP UP THE FRYER */
.fryer-machine {
  filter: drop-shadow(0 30px 50px rgba(255,42,42,.7)) drop-shadow(0 0 80px rgba(255,138,58,.5));
  animation: fryer-rumble .15s steps(2) infinite, ab-breathe 3s var(--ease-soft) infinite;
}
@keyframes fryer-rumble {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  75% { transform: translate(1px, -1px); }
}

/* More bubbles in oil */
.fryer-oil {
  background: linear-gradient(180deg, #fff5a0 0%, #ffd23a 30%, #ff8a3a 70%, #ff4a1a 100%);
  animation: oil-shimmer 1.2s ease-in-out infinite alternate;
}
@keyframes oil-shimmer {
  from { filter: brightness(1); }
  to { filter: brightness(1.2); }
}
.oil-bubble {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 60%);
  box-shadow: 0 0 8px rgba(255,255,255,.6), inset -2px -2px 4px rgba(0,0,0,.2);
}
.oil-bubble.b1 { width: 14px; height: 14px; animation-duration: 1.4s; }
.oil-bubble.b2 { width: 10px; height: 10px; animation-duration: 1.7s; }
.oil-bubble.b3 { width: 16px; height: 16px; animation-duration: 1.5s; }
.oil-bubble.b4 { width: 12px; height: 12px; animation-duration: 1.8s; }
.oil-bubble.b5 { width: 8px; height: 8px; animation-duration: 1.6s; }

/* Bigger flames under fryer */
.fryer-flames .flame {
  filter: blur(3px) drop-shadow(0 0 12px #ff8a3a);
}

/* Add comic-style sound effect to fryer */
.fryer-stage::before {
  content: 'BUBBLE BUBBLE';
  position: absolute;
  top: -30px;
  right: 5%;
  background: #ffd23a;
  border: 4px solid #1a1410;
  font-family: var(--font-display);
  font-size: 18px;
  color: #1a1410;
  padding: 8px 16px;
  border-radius: 8px;
  transform: rotate(-8deg);
  box-shadow: 4px 4px 0 #1a1410;
  z-index: 5;
  animation: sfx-pop-loop 2s var(--ease-bounce) infinite;
  letter-spacing: .05em;
}
@keyframes sfx-pop-loop {
  0%, 70%, 100% { transform: rotate(-8deg) scale(1); }
  80% { transform: rotate(-12deg) scale(1.15); }
  90% { transform: rotate(-4deg) scale(0.95); }
}

/* Add steam wisps */
.fryer-stage::after {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 100px;
  background:
    radial-gradient(ellipse 80px 30px at 30% 50%, rgba(255,255,255,.4) 0%, transparent 60%),
    radial-gradient(ellipse 60px 25px at 70% 50%, rgba(255,255,255,.5) 0%, transparent 60%);
  filter: blur(4px);
  animation: steam-rise 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes steam-rise {
  0% { transform: translateX(-50%) translateY(0) scale(0.8); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(-50%) translateY(-80px) scale(1.4); opacity: 0; }
}

/* ---------- Add comic panel border to crew cards ---------- */
.crew-card {
  border-radius: 8px !important;
  border-width: 6px !important;
  box-shadow: 8px 8px 0 #1a1410, 0 20px 50px rgba(0,0,0,.3) !important;
}
.crew-card::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 2px solid rgba(0,0,0,.15);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
.crew-card:hover {
  transform: translate(-3px, -6px) rotate(-1.5deg) !important;
  box-shadow: 12px 14px 0 #1a1410, 0 30px 60px rgba(0,0,0,.4) !important;
}
.crew-card:nth-child(2n):hover {
  transform: translate(3px, -6px) rotate(1.5deg) !important;
}

/* ---------- Halftone wash on crew section ---------- */
.crew::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 25%, rgba(255,42,42,.04) 0%, transparent 6%);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Hero gets a "WELCOME!" sound effect ---------- */
.hero::before {
  z-index: 0;
}

/* ---------- Crew bio one-liner styling ---------- */
.card-bio {
  font-family: var(--font-marker);
  font-size: 14px;
  line-height: 1.45;
  font-style: normal;
}

/* ---------- Improved status badge ---------- */
.card-stat {
  border-width: 3px;
  border-radius: 8px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
  background: linear-gradient(180deg, #fff5e6 0%, #ffd9a3 100%);
}

/* ---------- Boss rage panel sparks ---------- */
.boss-rage::before, .boss-rage::after {
  content: '⚡';
  position: absolute;
  font-size: 32px;
  color: #ffd23a;
  filter: drop-shadow(0 0 8px #ff8a3a);
  animation: spark-flash .4s steps(2) infinite;
}
.boss-rage::before { top: 10%; left: -10%; }
.boss-rage::after { top: 15%; right: -10%; animation-delay: .2s; }
@keyframes spark-flash {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0); }
  50% { opacity: 0.5; transform: scale(1.3) rotate(20deg); }
}

/* ====================================================
   ★★★  PAINTED CINEMATIC SCENES  ★★★
   Full-bleed scene canvases with depth + parallax
   ==================================================== */

.scene-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.scene-canvas .painted-scene {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- HERO scene polish ---------- */
.hero {
  /* Override the gradient since the painted scene now provides background */
  background: #1a0410;
  min-height: 100vh;
}
.hero::before, .hero::after { display: none; }
.hero .hero-bg { display: none; }

.hero-canvas {
  z-index: 0;
}

.hero-stage-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 60px;
  text-align: center;
  width: 100%;
  pointer-events: none;
}
.hero-stage-overlay > * { pointer-events: auto; }

.hero-text {
  text-align: center !important;
  max-width: 800px;
  padding: 0 20px;
}

/* ---------- Animated painted-scene layers ---------- */

/* Sun gentle pulse */
.painted-scene > circle[fill*="hero-sun"],
.painted-scene > circle[fill="#ffe14d"],
.painted-scene > circle[fill="#fff5b0"] {
  transform-origin: 800px 340px;
  animation: sun-pulse 5s ease-in-out infinite;
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Cloud banks drift slowly */
.cloud-bank.cloud-far {
  transform-origin: center;
  animation: cloud-drift-slow 80s linear infinite;
}
.cloud-bank.cloud-mid {
  animation: cloud-drift-rev-slow 60s linear infinite;
}
.cloud-bank.cloud-near {
  animation: cloud-drift-slow 100s linear infinite;
}
@keyframes cloud-drift-slow {
  0% { transform: translateX(-100px); }
  100% { transform: translateX(100px); }
}
@keyframes cloud-drift-rev-slow {
  0% { transform: translateX(80px); }
  100% { transform: translateX(-80px); }
}

/* Floating island sways */
.floating-island {
  transform-origin: 850px 600px;
  animation: island-sway 5s ease-in-out infinite;
}
@keyframes island-sway {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-12px) rotate(1.2deg); }
}

/* Hanging sign sways more dramatically */
.hanging-sign {
  transform-origin: 570px 540px;
  animation: sign-sway 3s ease-in-out infinite;
}
@keyframes sign-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

/* Barry looks up and breathes */
.hero-mark {
  transform-origin: 0 130px;
  animation: mark-look 3.5s ease-in-out infinite;
}
@keyframes mark-look {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.02) translateY(-3px); }
}

/* Charlie wags */
.hero-charlie {
  transform-origin: 95px 100px;
  animation: charlie-wag 1.4s ease-in-out infinite;
}
@keyframes charlie-wag {
  0%, 100% { transform: translate(95px, 25px) scale(0.55) rotate(-3deg); }
  50% { transform: translate(95px, 23px) scale(0.55) rotate(3deg); }
}

/* Speech bubble pop */
.hero-speech {
  transform-origin: 110px 0;
  animation: speech-pop 4s ease-in-out infinite;
}
@keyframes speech-pop {
  0%, 90%, 100% { transform: translate(110px, -60px) scale(1); }
  10% { transform: translate(110px, -64px) scale(1.05); }
  15% { transform: translate(110px, -60px) scale(1); }
}

/* Embers float upward */
.ember {
  animation: ember-rise 4s linear infinite;
  opacity: 0;
}
.ember.e1 { animation-delay: 0s; animation-duration: 5s; }
.ember.e2 { animation-delay: 1s; animation-duration: 6s; }
.ember.e3 { animation-delay: 2s; animation-duration: 4.5s; }
.ember.e4 { animation-delay: 0.5s; animation-duration: 5.5s; }
.ember.e5 { animation-delay: 1.5s; animation-duration: 4s; }
.ember.e6 { animation-delay: 2.5s; animation-duration: 6s; }
.ember.e7 { animation-delay: 3s; animation-duration: 5s; }
.ember.e8 { animation-delay: 0.8s; animation-duration: 5.2s; }
.ember.e9 { animation-delay: 2.2s; animation-duration: 4.8s; }
@keyframes ember-rise {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-200px) translateX(20px) scale(1.2); opacity: 0; }
}

/* Distant flying chickens drift */
.flying-chickens {
  transform-origin: 50% 50%;
  animation: chickens-fly 30s linear infinite;
}
@keyframes chickens-fly {
  0% { transform: translateX(0); }
  100% { transform: translateX(60px); }
}

/* Boss watching from window subtle move */
.window-boss {
  transform-origin: 16px 22px;
  animation: window-boss-watch 4s ease-in-out infinite;
}
@keyframes window-boss-watch {
  0%, 100% { transform: translate(186px, 110px) scale(1); }
  50% { transform: translate(186px, 109px) scale(1.05); }
}

/* ---------- Hero text overlay polish ---------- */
.hero-stage-overlay .hero-text {
  background: rgba(26, 4, 16, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: 24px;
  padding: 30px 40px;
  border: 3px solid rgba(255, 210, 58, 0.3);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  margin-top: 20px;
}
.hero-stage-overlay .hero-eyebrow {
  background: rgba(255, 42, 42, 0.4);
}
.hero-stage-overlay .fineprint {
  margin-left: auto;
  margin-right: auto;
}

/* The CTA in scene */
.hero-stage-overlay .cta-hero {
  margin-top: 8px;
}

/* Mobile hero scene scaling */
@media (max-width: 760px) {
  .hero-canvas { opacity: 0.85; }
  .hero-stage-overlay .hero-text {
    padding: 20px 24px;
    margin: 12px;
  }
  .hero-title { font-size: clamp(34px, 8vw, 60px) !important; }
  .hero-sub { font-size: 14px !important; }
}

/* ====================================================
   ★ FRYER painted scene
   ==================================================== */
.fryer.scene-section {
  background: #0a0008;
  min-height: 100vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.fryer .smoke-layer { z-index: 1; }
.fryer .section-tag,
.fryer .section-title,
.fryer .section-lede {
  position: relative;
  z-index: 3;
  padding-top: 100px;
}
.fryer .section-title { padding-top: 0; }
.fryer .section-lede { padding-top: 0; padding-bottom: 40px; }
.fryer-stage[hidden] { display: none !important; }

/* Painted scene fills section */
.fryer-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Boss text overlay sits centered with semi-transparent backdrop */
.fryer .section-tag {
  background: rgba(255, 210, 58, 0.25);
  backdrop-filter: blur(2px);
}
.fryer .section-title.light {
  background: rgba(26, 4, 16, 0.6);
  border-radius: 12px;
  padding: 20px 30px;
  border: 3px solid rgba(255, 210, 58, 0.4);
  display: inline-block;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.fryer .section-lede.light {
  background: rgba(26, 4, 16, 0.5);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 16px 24px;
  display: inline-block;
  max-width: 720px;
}

/* ---------- Animate fryer scene elements ---------- */

/* Steam puffs from pipes */
.steam-puff {
  transform-origin: center;
  animation: steam-drift 3s ease-out infinite;
}
.steam-puff.p1 { animation-delay: 0s; }
.steam-puff.p2 { animation-delay: 0.7s; }
.steam-puff.p3 { animation-delay: 1.4s; }
.steam-puff.p4 { animation-delay: 2.1s; }
@keyframes steam-drift {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 0.5; }
  100% { transform: translateY(-50px) scale(1.4); opacity: 0; }
}

/* Hanging lamps swing */
.hanging-lamps {
  transform-origin: 800px 96px;
  animation: lamp-swing 4s ease-in-out infinite;
}
@keyframes lamp-swing {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

/* The fryer machine has subtle rumble */
.fryer-machine-svg {
  animation: fryer-rumble-svg .15s steps(2) infinite;
}
@keyframes fryer-rumble-svg {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(2px, -1px); }
}

/* Bubbles in the fryer rise */
.fryer-bubble {
  transform-origin: center;
  animation: fryer-bubble-rise 2s ease-in infinite;
}
.fryer-bubble.bb1 { animation-delay: 0s; animation-duration: 1.6s; }
.fryer-bubble.bb2 { animation-delay: 0.3s; animation-duration: 2s; }
.fryer-bubble.bb3 { animation-delay: 0.6s; animation-duration: 1.8s; }
.fryer-bubble.bb4 { animation-delay: 0.9s; animation-duration: 2.2s; }
.fryer-bubble.bb5 { animation-delay: 1.2s; animation-duration: 1.7s; }
.fryer-bubble.bb6 { animation-delay: 1.5s; animation-duration: 2.1s; }
.fryer-bubble.bb7 { animation-delay: 1.8s; animation-duration: 1.9s; }
@keyframes fryer-bubble-rise {
  0% { transform: translateY(40px) scale(0.4); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-100px) scale(1.4); opacity: 0; }
}

/* Steam from fryer top */
.fryer-steam {
  transform-origin: center;
  animation: fryer-steam-rise 2.5s ease-out infinite;
}
.fryer-steam.s1 { animation-delay: 0s; }
.fryer-steam.s2 { animation-delay: 0.5s; }
.fryer-steam.s3 { animation-delay: 1s; }
@keyframes fryer-steam-rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  20% { opacity: 0.6; }
  100% { transform: translateY(-80px) scale(1.5); opacity: 0; }
}

/* Rising steam in middle of room */
.rising-steam .rs {
  transform-origin: center;
  animation: rs-rise 4s ease-out infinite;
}
.rising-steam .rs.r1 { animation-delay: 0s; }
.rising-steam .rs.r2 { animation-delay: 1s; }
.rising-steam .rs.r3 { animation-delay: 2s; }
.rising-steam .rs.r4 { animation-delay: 3s; }
@keyframes rs-rise {
  0% { transform: translateY(60px) scale(0.5); opacity: 0; }
  20% { opacity: 0.5; }
  100% { transform: translateY(-120px) scale(1.5); opacity: 0; }
}

/* Floor embers */
.floor-embers .ember {
  animation: floor-ember-rise 5s linear infinite;
}
.floor-embers .fr-e1 { animation-delay: 0s; }
.floor-embers .fr-e2 { animation-delay: 1.2s; }
.floor-embers .fr-e3 { animation-delay: 2.4s; }
.floor-embers .fr-e4 { animation-delay: 3.6s; }
.floor-embers .fr-e5 { animation-delay: 0.8s; }
@keyframes floor-ember-rise {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translateY(-300px) translateX(20px) scale(1.4); opacity: 0; }
}

/* Barry in fryer line shakes with terror */
.line-chicken-1 {
  animation: terror-shake .15s steps(2) infinite, ab-breathe 3s ease-in-out infinite;
  transform-origin: 60px 170px;
}
@keyframes terror-shake {
  0%, 100% { transform: translate(160px, 540px); }
  50% { transform: translate(162px, 540px); }
}

.line-chicken-2 {
  animation: line-bob 2.5s ease-in-out infinite;
}
@keyframes line-bob {
  0%, 100% { transform: translate(60px, 580px) translateY(0); }
  50% { transform: translate(60px, 580px) translateY(-3px); }
}

.line-chicken-3 {
  animation: line-hum 3s ease-in-out infinite;
}
@keyframes line-hum {
  0%, 100% { transform: translate(-30px, 605px) rotate(-2deg); }
  50% { transform: translate(-30px, 603px) rotate(2deg); }
}

/* Speech bubble pop */
.fryer-speech {
  transform-origin: center;
  animation: speech-jiggle 2.5s ease-in-out infinite;
}
@keyframes speech-jiggle {
  0%, 90%, 100% { transform: translate(-80px, -50px) scale(1) rotate(-3deg); }
  10% { transform: translate(-80px, -54px) scale(1.05) rotate(3deg); }
}

/* Chef wag tongs */
.fryer-chef {
  transform-origin: 60px 220px;
  animation: chef-tongs-snap 1.5s ease-in-out infinite;
}
@keyframes chef-tongs-snap {
  0%, 70%, 100% { transform: translate(1160px, 470px) rotate(0); }
  80% { transform: translate(1160px, 470px) rotate(-3deg); }
  85% { transform: translate(1160px, 470px) rotate(3deg); }
}

/* "FRYER →" sign sways */
.this-way-sign {
  transform-origin: 0 20px;
  animation: sign-tilt 3s ease-in-out infinite;
}
@keyframes sign-tilt {
  0%, 100% { transform: translate(360px, 580px) rotate(-3deg); }
  50% { transform: translate(360px, 580px) rotate(3deg); }
}

/* Lava floor pulses */
.fryer .painted-scene path[fill="url(#lava-floor)"] {
  animation: lava-pulse 3s ease-in-out infinite;
}
@keyframes lava-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.2) saturate(1.2); }
}

/* ====================================================
   ★ BOSS painted throne room
   ==================================================== */
.boss.scene-section {
  background: #0a0008;
  min-height: 100vh;
  padding: 120px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.boss .boss-vignette,
.boss .boss-rays {
  z-index: 0;
}
.boss-canvas {
  z-index: 0;
}
.boss .section-tag,
.boss .section-title,
.boss .section-lede {
  position: relative;
  z-index: 3;
}
/* Hide old boss-stage (throne is now in painted scene) */
.boss .boss-stage {
  display: none;
}

/* Boss text overlays */
.boss .section-title.light {
  background: rgba(26, 4, 16, 0.65);
  border-radius: 16px;
  padding: 16px 30px;
  border: 3px solid rgba(255, 210, 58, 0.4);
  display: inline-block;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.boss .section-lede.light {
  background: rgba(26, 4, 16, 0.5);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 16px 24px;
  display: inline-block;
  max-width: 720px;
  margin-bottom: 0;
}

/* ---------- Animate boss painted scene ---------- */

/* Brazier flames flicker */
.brazier-flame {
  transform-origin: center bottom;
  animation: brazier-flicker .35s ease-in-out infinite alternate;
}
.brazier-flame.bf1 { animation-duration: 0.6s; }
.brazier-flame.bf2 { animation-duration: 0.4s; animation-delay: 0.1s; }
.brazier-flame.bf3 { animation-duration: 0.3s; animation-delay: 0.2s; }
@keyframes brazier-flicker {
  0% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
  100% { transform: scaleY(1.1) scaleX(0.92); opacity: 1; }
}

/* Dust motes float */
.dust-mote {
  animation: mote-drift 6s ease-in-out infinite;
}
.dust-mote.dm1 { animation-delay: 0s; }
.dust-mote.dm2 { animation-delay: 1.2s; }
.dust-mote.dm3 { animation-delay: 2.4s; }
.dust-mote.dm4 { animation-delay: 3.6s; }
.dust-mote.dm5 { animation-delay: 4.8s; }
@keyframes mote-drift {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  25% { transform: translate(15px, -20px); opacity: 0.8; }
  50% { transform: translate(-10px, -40px); opacity: 0.6; }
  75% { transform: translate(20px, -25px); opacity: 0.7; }
}

/* Stained glass windows pulse with light */
.stained-glass-windows path[fill*="stained-glass"] {
  animation: glass-glow 4s ease-in-out infinite;
}
@keyframes glass-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15) saturate(1.1); }
}

/* Boss on throne idle breathing */
.boss-on-throne {
  transform-origin: 800px 600px;
  animation: throne-breathe 4s ease-in-out infinite;
}
@keyframes throne-breathe {
  0%, 100% { transform: translate(700px, 460px) scale(1); }
  50% { transform: translate(700px, 458px) scale(1.01); }
}

/* Speech bubble jiggle */
.boss-throne-speech {
  transform-origin: 0 0;
  animation: speech-pop-loop 3.5s ease-in-out infinite;
}
@keyframes speech-pop-loop {
  0%, 85%, 100% { transform: translate(220px, -40px) scale(1); }
  10% { transform: translate(220px, -45px) scale(1.05); }
}

/* Throne crown floats */
.boss-throne text {
  transform-origin: center;
  animation: crown-float 3s ease-in-out infinite;
}

/* Mobile responsive */
@media (max-width: 760px) {
  .boss-canvas { opacity: 0.85; }
  .boss .section-title.light { padding: 12px 18px; font-size: clamp(28px, 7vw, 50px); }
  .boss .section-lede.light { padding: 12px 16px; font-size: 14px; }
  .fryer-canvas { opacity: 0.85; }
  .fryer .section-title.light { padding: 12px 18px; }
}

/* ====================================================
   ★ REDEMPTION painted mountaintop
   ==================================================== */
.redemption.scene-section {
  background: #fff;
  min-height: 100vh;
  padding: 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.redemption-canvas {
  z-index: 0;
}
.redemption .section-tag,
.redemption .section-title,
.redemption .section-lede {
  position: relative;
  z-index: 3;
}
/* Hide old redemption-stage (folder pile and hero are now in painted scene) */
.redemption .redemption-stage {
  display: none;
}
.redemption .redemption-perks {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  padding: 16px;
  border-radius: 16px;
  border: 3px solid rgba(26, 20, 16, 0.2);
  margin-top: 30px;
}

/* Title overlay backdrop */
.redemption .section-title {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(3px);
  border-radius: 16px;
  padding: 14px 28px;
  display: inline-block;
  border: 3px solid rgba(255, 210, 58, 0.6);
  box-shadow: 0 12px 40px rgba(255, 138, 58, 0.3);
}
.redemption .section-lede {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(3px);
  padding: 14px 24px;
  border-radius: 12px;
  display: inline-block;
  max-width: 720px;
}

/* Hero figure breathes */
.hero-redemption-actor {
  transform-origin: 100px 200px;
  animation: redemption-float 4s ease-in-out infinite;
}
@keyframes redemption-float {
  0%, 100% { transform: translate(700px, 380px) translateY(0); }
  50% { transform: translate(700px, 380px) translateY(-12px); }
}

/* Charlie wags */
.charlie-redemption {
  transform-origin: center;
  animation: charlie-wag-r 1.5s ease-in-out infinite;
}
@keyframes charlie-wag-r {
  0%, 100% { transform: translate(180px, 200px) scale(0.4) rotate(-5deg); }
  50% { transform: translate(180px, 198px) scale(0.4) rotate(5deg); }
}

/* Heavenly rays slowly rotate */
.heavenly-rays {
  transform-origin: 800px 500px;
  animation: rays-spin 60s linear infinite;
}
@keyframes rays-spin {
  to { transform: rotate(360deg); }
}

/* Dawn clouds drift */
.dawn-clouds {
  animation: dawn-cloud-drift 50s linear infinite alternate;
}
@keyframes dawn-cloud-drift {
  0% { transform: translateX(-30px); }
  100% { transform: translateX(30px); }
}

/* Sparkles twinkle */
.rs-sparkle {
  animation: sparkle-twinkle 2s ease-in-out infinite;
  transform-origin: center;
}
.rs-sparkle.s1 { animation-delay: 0s; }
.rs-sparkle.s2 { animation-delay: 0.3s; }
.rs-sparkle.s3 { animation-delay: 0.7s; }
.rs-sparkle.s4 { animation-delay: 1s; }
.rs-sparkle.s5 { animation-delay: 1.4s; }
.rs-sparkle.s6 { animation-delay: 1.7s; }
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.3) rotate(45deg); }
}

/* Doves float across */
.dove {
  animation: dove-glide 12s ease-in-out infinite;
}
.dove.d1 { animation-delay: 0s; }
.dove.d2 { animation-delay: 3s; }
.dove.d3 { animation-delay: 6s; }
.dove.d4 { animation-delay: 9s; }
@keyframes dove-glide {
  0%, 100% { transform: translateX(-30px) translateY(0); }
  50% { transform: translateX(30px) translateY(-10px); }
}

/* Sun pulses gently */
.redemption .painted-scene > circle[fill="#fff"] {
  animation: sun-glow-pulse 4s ease-in-out infinite;
}
@keyframes sun-glow-pulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}

/* Mobile responsive */
@media (max-width: 760px) {
  .redemption-canvas { opacity: 0.9; }
  .redemption .section-title { padding: 12px 18px; }
  .redemption .section-lede { padding: 12px 16px; font-size: 14px; }
}

/* ====================================================
   ★★★  REAL FLUX-GENERATED SCENE IMAGES  ★★★
   Cinematic painted backgrounds via AI generation
   ==================================================== */

.painted-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.scene-canvas::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(26, 4, 16, 0.05) 0%,
    rgba(26, 4, 16, 0.0) 30%,
    rgba(26, 4, 16, 0.0) 70%,
    rgba(26, 4, 16, 0.4) 100%);
  pointer-events: none;
}

/* Cover section properly */
.scene-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
}
.scene-section > *:not(.scene-canvas) {
  position: relative;
  z-index: 2;
}

/* Hero image override the gradient bg */
.hero.scene-section { background: #1a0410; }
.hero-canvas .painted-bg { animation: hero-zoom 20s ease-in-out infinite alternate; }
@keyframes hero-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* Boss scene */
.boss.scene-section { background: #0a0008; }
.boss-canvas .painted-bg { animation: boss-zoom 25s ease-in-out infinite alternate; }
@keyframes boss-zoom {
  0% { transform: scale(1.02) translateY(-1%); }
  100% { transform: scale(1.06) translateY(1%); }
}

/* Coop section now has scene */
.coop.scene-section {
  background: #5a3a1a;
  min-height: 100vh;
  padding: 120px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coop-canvas .painted-bg {
  animation: pan-x 30s ease-in-out infinite alternate;
  filter: saturate(1.1) contrast(1.03) brightness(0.95);
}
@keyframes pan-x {
  0% { transform: scale(1.03) translateX(-1%); }
  100% { transform: scale(1.05) translateX(1%); }
}
.coop .coop-stage { display: none; }
.coop .section-title {
  background: rgba(255, 245, 230, 0.92);
  border: 4px solid #1a1410;
  border-radius: 16px;
  padding: 14px 28px;
  display: inline-block;
  box-shadow: 6px 6px 0 #1a1410, 0 20px 50px rgba(0,0,0,.4);
}
.coop .section-lede {
  background: rgba(255, 245, 230, 0.85);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 16px 24px;
  display: inline-block;
  max-width: 720px;
  border: 3px solid rgba(0,0,0,0.15);
  box-shadow: 4px 4px 0 #1a1410;
}

/* Confrontation scene with comic panel overlay */
.confront.scene-section {
  background: #1a0410;
  min-height: 100vh;
  padding: 120px 20px 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.confront-canvas .painted-bg { animation: hero-zoom 30s ease-in-out infinite alternate; }
.confront-canvas::after {
  background: linear-gradient(180deg,
    rgba(26, 4, 16, 0.5) 0%,
    rgba(26, 4, 16, 0.2) 50%,
    rgba(26, 4, 16, 0.7) 100%);
}
.confront .comic-page { display: none; }
.confront .section-title.light {
  background: rgba(26, 4, 16, 0.7);
  border: 4px solid #ffd23a;
  border-radius: 16px;
  padding: 14px 28px;
  display: inline-block;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.confront .section-lede.light {
  background: rgba(26, 4, 16, 0.55);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 16px 24px;
  display: inline-block;
  max-width: 720px;
}

/* Hatching scene */
.hatch.scene-section {
  background: #5cb8e6;
  min-height: 100vh;
  padding: 120px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hatch-canvas .painted-bg { animation: pan-x 28s ease-in-out infinite alternate; }
.hatch .hatch-stage {
  background: rgba(255, 245, 230, 0.85) !important;
  backdrop-filter: blur(2px);
  border: 4px solid #1a1410;
  box-shadow: 6px 6px 0 #1a1410, 0 30px 60px rgba(0,0,0,.3);
}
.hatch .section-title {
  background: rgba(255, 245, 230, 0.92);
  border: 4px solid #1a1410;
  border-radius: 16px;
  padding: 14px 28px;
  display: inline-block;
  box-shadow: 6px 6px 0 #1a1410, 0 20px 50px rgba(0,0,0,.4);
}
.hatch .section-lede {
  background: rgba(255, 245, 230, 0.85);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 16px 24px;
  display: inline-block;
  max-width: 720px;
  border: 3px solid rgba(0,0,0,0.15);
}

/* Finale scene */
.finale.scene-section {
  background: #ffd23a;
  min-height: 100vh;
}
.finale-canvas .painted-bg { animation: pan-x 25s ease-in-out infinite alternate; }
.finale .prize-card {
  background: rgba(255, 245, 230, 0.95) !important;
  backdrop-filter: blur(8px);
}

/* Crew card images — replace SVG portrait styling */
.card-img,
.baby-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.card-portrait {
  overflow: hidden;
}
.card-portrait::before,
.card-portrait::after {
  display: none;
}

/* Baby image scaling in hatch scene */
.baby-chicken .baby-img {
  width: 180px;
  height: 180px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255,245,200,0.5);
  box-shadow: 0 0 40px rgba(255, 210, 58, 0.6), 0 12px 24px rgba(0,0,0,0.3);
}

/* Fryer text overlays for the painted basement scene */
.fryer.scene-section { background: #0a0008; }
.fryer-canvas .painted-bg { animation: hero-zoom 25s ease-in-out infinite alternate; }
.fryer-canvas::after {
  background: linear-gradient(180deg,
    rgba(0,0,0,0.3) 0%,
    rgba(0,0,0,0.1) 50%,
    rgba(0,0,0,0.5) 100%);
}

/* Redemption */
.redemption.scene-section { background: #fff5b0; }
.redemption-canvas .painted-bg { animation: boss-zoom 30s ease-in-out infinite alternate; }
.redemption-canvas::after {
  background: linear-gradient(180deg,
    rgba(255, 245, 176, 0.0) 0%,
    rgba(255, 245, 176, 0.3) 100%);
}

/* General overlay text legibility for all scene-section text */
.scene-section .section-tag {
  background: rgba(26, 4, 16, 0.8);
  color: #ffd23a;
  padding: 6px 18px;
  border: 3px solid #ffd23a;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 14px;
  position: relative;
  z-index: 3;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.scene-section .section-tag.golden {
  background: #ffd23a;
  color: #1a1410;
  border-color: #1a1410;
}

/* Mobile: dim images slightly to keep text readable */
@media (max-width: 760px) {
  .scene-canvas::after {
    background: linear-gradient(180deg,
      rgba(26, 4, 16, 0.3) 0%,
      rgba(26, 4, 16, 0.15) 40%,
      rgba(26, 4, 16, 0.5) 100%);
  }
}

/* ====================================================
   ★★★  CINEMATIC TRANSITIONS  ★★★
   Sticky scene pins + crossfades + dramatic chapter cards
   ==================================================== */

/* ---------- Scene canvas locks to section ---------- */
.scene-section { min-height: 100vh; position: relative; }

.scene-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Scene image fills the canvas */
.scene-canvas .painted-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Section content layered above */
.scene-section > *:not(.scene-canvas) {
  position: relative;
  z-index: 5;
}

/* ---------- Scroll-driven crossfade (modern browsers) ---------- */
@supports (animation-timeline: view()) {
  .painted-bg {
    animation: scene-fade linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
  @keyframes scene-fade {
    0%   { opacity: 0; transform: scale(1.08); filter: blur(4px); }
    18%  { opacity: 1; transform: scale(1.02); filter: blur(0); }
    82%  { opacity: 1; transform: scale(1.0);  filter: blur(0); }
    100% { opacity: 0; transform: scale(0.96); filter: blur(2px); }
  }
}

/* ---------- Cinematic vignette on every scene canvas ---------- */
.scene-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 12%, transparent 88%, rgba(0,0,0,.5) 100%);
  pointer-events: none;
}

/* ---------- Letterbox bars (subtle, always-on once past hero) ---------- */
.cinema-letterbox {
  position: fixed;
  left: 0; right: 0;
  height: 36px;
  background: #000;
  z-index: 95;
  pointer-events: none;
  transform: translateY(0);
  transition: transform .8s var(--ease-soft, cubic-bezier(.4, 0, .2, 1));
  box-shadow: 0 0 30px rgba(0,0,0,.6);
}
.cinema-letterbox.top    { top: 0;    transform: translateY(-100%); }
.cinema-letterbox.bottom { bottom: 0; transform: translateY(100%); }
body.cinema-on .cinema-letterbox.top    { transform: translateY(0); }
body.cinema-on .cinema-letterbox.bottom { transform: translateY(0); }

/* ---------- Dramatic chapter card animation ---------- */
.scene-section .section-tag {
  display: inline-block;
  position: relative;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .25em;
  color: #ffd23a;
  background: rgba(0,0,0,.85);
  padding: 10px 26px;
  border: 3px solid #ffd23a;
  border-radius: 4px;
  box-shadow: 0 0 0 3px rgba(0,0,0,.85), 0 0 40px rgba(255,210,58,.5), 8px 8px 0 rgba(0,0,0,.6);
  text-shadow: 0 2px 0 #5a3a00;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(40px) scale(.9);
  transition: opacity .8s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1)),
              transform .8s var(--ease-bounce, cubic-bezier(.34,1.56,.64,1));
}
.scene-section.is-active .section-tag {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.scene-section .section-tag::before,
.scene-section .section-tag::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 50px;
  height: 2px;
  background: #ffd23a;
  box-shadow: 0 0 12px rgba(255,210,58,.7);
}
.scene-section .section-tag::before { right: 100%; margin-right: 14px; }
.scene-section .section-tag::after  { left:  100%; margin-left:  14px; }

/* ---------- Section title cinematic entrance ---------- */
.scene-section .section-title {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s ease .15s, transform 1s var(--ease-snap, cubic-bezier(.2, .9, .2, 1)) .15s;
}
.scene-section.is-active .section-title {
  opacity: 1;
  transform: translateY(0);
}

.scene-section .section-lede,
.scene-section .section-lede.light {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .9s ease .35s, transform .9s var(--ease-snap, cubic-bezier(.2, .9, .2, 1)) .35s;
}
.scene-section.is-active .section-lede,
.scene-section.is-active .section-lede.light {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Smooth scroll behavior ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 0; }

/* ---------- Pin chapter indicator (top-left) ---------- */
.now-playing {
  position: fixed;
  top: 56px;
  left: 20px;
  z-index: 90;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid rgba(255,210,58,.5);
  border-radius: 50px;
  padding: 8px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .15em;
  color: #ffd23a;
  text-shadow: 0 1px 0 #5a3a00;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .5s ease, transform .5s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 40px);
}
.now-playing.show {
  opacity: 1;
  transform: translateX(0);
}
.now-playing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff2a2a;
  box-shadow: 0 0 10px #ff2a2a;
  animation: now-pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes now-pulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ---------- Section transition wipe (light glow band between scenes) ---------- */
.scene-section + .scene-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(255,210,58,0) 0%, rgba(255,210,58,.15) 50%, rgba(255,210,58,0) 100%);
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  animation: wipe-flash 1s ease-out;
}
.scene-section.is-active::before {
  opacity: 1;
}
@keyframes wipe-flash {
  0% { opacity: 0; transform: translateY(-30px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(30px); }
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 760px) {
  .cinema-letterbox { display: none; }
  .now-playing { font-size: 10px; padding: 6px 14px; top: 60px; }
  .scene-section .section-tag::before,
  .scene-section .section-tag::after { width: 24px; }

  /* ----- Mobile scene layout: image becomes a 16:9 banner at top, content flows below ----- */
  .scene-section {
    min-height: auto !important;
    display: block !important;
    padding-top: 0 !important;
    padding-bottom: 60px !important;
  }
  .scene-canvas {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    margin: 0 0 24px 0;
    z-index: 1;
  }
  .scene-canvas .painted-bg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    aspect-ratio: 16 / 9;
    animation: none !important;
  }
  /* Lighter mobile vignette */
  .scene-canvas::before {
    background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 20%, transparent 80%, rgba(0,0,0,.4) 100%);
  }
  .scene-canvas::after { display: none; }

  /* Section content sits below the image with comfortable padding */
  .scene-section > *:not(.scene-canvas):not(.cinema-letterbox):not(.now-playing) {
    padding-left: 16px;
    padding-right: 16px;
  }
  .scene-section .section-title { padding: 8px 14px !important; margin-top: 8px; }
  .scene-section .section-lede,
  .scene-section .section-lede.light { padding: 10px 14px !important; margin-top: 12px; }

  /* Hero: don't try to overlay the scene anymore on mobile */
  .hero.scene-section {
    padding-top: 60px !important;
  }
  .hero-stage-overlay {
    padding: 20px 16px 40px !important;
    justify-content: flex-start !important;
  }
  .hero-text {
    padding: 16px 18px !important;
    margin-top: 0 !important;
  }
  .hero-title { font-size: clamp(34px, 8vw, 60px) !important; line-height: 1.05; }
  .hero-sub { font-size: 14px !important; line-height: 1.45 !important; }
  .scroll-cue { display: none; }

  /* Boss / Fryer / Confront / Redemption section content padding tweaks */
  .boss.scene-section,
  .fryer.scene-section,
  .confront.scene-section,
  .redemption.scene-section,
  .coop.scene-section,
  .hatch.scene-section,
  .finale.scene-section {
    padding: 0 0 60px 0 !important;
  }

  /* Confrontation comic page already hidden, keep it hidden */
  .confront .comic-page { display: none; }

  /* Hatch stage now flows under image */
  .hatch .hatch-stage {
    margin-top: 0;
    padding: 24px 16px;
  }

  /* Redemption perks visible */
  .redemption .redemption-perks {
    padding: 16px;
    margin: 16px;
  }
}

/* Very small phones: even tighter */
@media (max-width: 420px) {
  .scene-section .section-tag {
    font-size: 11px;
    letter-spacing: .15em;
    padding: 8px 14px;
  }
  .scene-section .section-tag::before,
  .scene-section .section-tag::after { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scene-section .section-tag,
  .scene-section .section-title,
  .scene-section .section-lede {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .painted-bg { animation: none; }
  .cinema-letterbox { transition: none; }
}