/* Google Font — must be first rule in the file */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700;900&display=swap");

:root {
  --bun-crust: #3d1a06;
  --bun-dark: #7a3b0c;
  --bun-mid: #b85e17;
  --bun-warm: #d4741e;
  --bun-light: #e88c2a;
  --bun-shine: #f5ad44;
  --bun-golden: #f8c96a;

  --sesame-light: #f5e4b0;
  --sesame-mid: #dfc070;
  --sesame-dark: #b08838;

  --lettuce-bright: #8bc34a;
  --lettuce-mid: #4caf50;
  --lettuce-deep: #388e3c;
  --lettuce-dark: #1b5e20;
  --lettuce-vein: rgba(120, 220, 100, 0.12);

  --tomato-bright: #ff7043;
  --tomato-mid: #e53935;
  --tomato-deep: #c62828;
  --tomato-dark: #8d0e0e;
  --tomato-skin: rgba(255, 120, 80, 0.25);
  --tomato-seed: rgba(255, 252, 200, 0.28);

  /* ── Onion palette ── */
  --onion-bright: #f3e5f5;
  --onion-mid: #ce93d8;
  --onion-dark: #7b1fa2;
  --onion-glow: rgba(206, 147, 216, 0.18);

  /* ── Cheese palette ── */
  --cheese-shine: #ffe082;
  --cheese-bright: #fdd835;
  --cheese-mid: #f9a825;
  --cheese-deep: #e65100;
  --cheese-shadow: rgba(180, 80, 0, 0.35);

  /* ── Patty palette ── */
  --patty-surface: #5d2408; /* lit top surface (still very dark) */
  --patty-mid: #3e1505; /* main body */
  --patty-dark: #2a0d03; /* shadow side */
  --patty-crust: #1a0701; /* charred crust edge */
  --patty-fat: rgba(160, 70, 20, 0.22);
  --patty-mark: rgba(15, 3, 0, 0.6); /* grill mark bands */

  /* ── Background ── */
  --color-bg: #080810;
  --color-glow: #c8721c;

  /* ── Typography ── */
  --font-display: "Outfit", system-ui, sans-serif;

  /* ── Sizing ── */
  --burger-width: 320px;
  --bun-height: 76px;
  --patty-height: 38px;
  --cheese-height: 22px;
  --lettuce-height: 20px;

  /* ── Easing ── */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══════════════════════════════════════════════════════════
   §2  RESET & BASE
   ══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: #f0ebe0;
  font-family: var(--font-display);
  min-height: 100dvh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════
   §3  BACKGROUND ATMOSPHERE
   ══════════════════════════════════════════════════════════ */

/*
 * Subtle dot-grid adds texture without competing with the burger.
 * Two overlapping grids create a faint moiré depth effect.
 */
.bg-grid {
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size:
    32px 32px,
    16px 16px;
  background-position:
    0 0,
    8px 8px;
  pointer-events: none;
  z-index: 0;
}

/*
 * Layered warm glows:
 *  — soft amber bloom positioned at the burger
 *  — very faint vignette at edges to push focus inward
 */
.bg-glow {
  position: fixed;
  inset: 0;
  background:
    /* amber warm bloom centered on burger */
    radial-gradient(
      ellipse 55% 35% at 50% 55%,
      rgba(200, 114, 28, 0.18) 0%,
      transparent 70%
    ),
    /* broader warm fill below */
    radial-gradient(
        ellipse 90% 55% at 50% 90%,
        rgba(100, 48, 8, 0.22) 0%,
        transparent 65%
      ),
    /* cool edge vignette */
    radial-gradient(
        ellipse 120% 100% at 50% 50%,
        transparent 55%,
        rgba(0, 0, 8, 0.6) 100%
      );
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════════
   §4  SCENE & TYPOGRAPHY
   ══════════════════════════════════════════════════════════ */
.scene {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.hero-header {
  text-align: center;
}

.label-top {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bun-light);
  opacity: 0.8;
  margin-bottom: 0.5rem;
}

.hero-title {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  background: linear-gradient(
    135deg in oklch,
    var(--bun-golden) 0%,
    var(--bun-light) 55%,
    var(--bun-mid) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.25rem;
}

.header-subtitle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.header-line {
  flex-grow: 1;
  width: 60px;
  max-width: 80px;
  height: 1px;
  background: linear-gradient(
    to var(--line-dir, right),
    var(--bun-golden),
    transparent
  );
  position: relative;
}

.header-line--left {
  --line-dir: left;
}

.header-line--right {
  --line-dir: right;
}

.header-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--bun-golden);
  transform: translateY(-50%) rotate(45deg);
  box-shadow: 0 0 5px var(--bun-shine);
}

.header-line--left::after {
  right: 0;
}

.header-line--right::after {
  left: 0;
}

.info-subtitle {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bun-golden);
  text-shadow: 0 0 8px rgba(245, 173, 68, 0.25);
}

/* ══════════════════════════════════════════════════════════
   §5  BURGER WRAPPER & CONTAINER
   ══════════════════════════════════════════════════════════ */
.burger-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 420px;
  padding-top: 96px; /* room for steam above the bun */
  padding-bottom: 32px;
  border-radius: 16px;
  /*
   * perspective on the wrapper creates the 3-D stage.
   * The burger itself uses a subtle rotateX to give a
   * "looking slightly down at a plate" viewpoint.
   */
  perspective: 900px;
  /* transforms don't affect layout — grow padding so exploded layers stay inside */
  transition:
    min-height 1s var(--ease-out),
    padding 1s var(--ease-out);
}

.burger-wrapper:has(.burger--revealed) {
  min-height: 560px;
  padding-top: 180px;
  padding-bottom: 230px;
}

/* No focus ring on the art stage — the button carries the visible focus */
.burger-wrapper:focus,
.burger-wrapper:focus-visible {
  outline: none;
}

/*
 * The burger is a perspective-enabled flex column.
 * transform-style: preserve-3d lets child layers compose in 3-D.
 * The slight rotateX gives depth — like looking down at a plate.
 */
.burger {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--burger-width);
  transform-style: preserve-3d;
  transform: rotateX(4deg);
  animation: float 5.5s ease-in-out 0.4s infinite;
  /* composite shadow unifying all layers into one grounded shadow */
  filter: drop-shadow(0 36px 52px rgba(0, 0, 0, 0.75))
    drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

.burger:hover {
  animation-play-state: paused;
  /* keep the rotateX but add scale; JS handles tilt */
  filter: drop-shadow(0 44px 64px rgba(0, 0, 0, 0.8))
    drop-shadow(0 0 70px rgba(210, 128, 30, 0.35));
  transition: filter 0.45s var(--ease-out);
}

/* ══════════════════════════════════════════════════════════
   §6  SHARED LAYER RULES
   ══════════════════════════════════════════════════════════ */
.layer {
  position: relative;
  width: 100%;
  opacity: 1;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══════════════════════════════════════════════════════════
   §7  TOP BUN
   ══════════════════════════════════════════════════════════ */
.bun-top {
  z-index: 10;
  transition-delay: 0s;
}

/*
 * The dome uses an asymmetric border-radius — wider on the left
 * than the right — to break perfect symmetry and feel baked.
 * Three radial gradients layer a soft specular on TL, the warm
 * bun colour across the face, and a toasted dark base.
 */
.bun-top__dome {
  position: relative;
  width: 100%;
  height: var(--bun-height);
  /* Slightly asymmetric border-radius for an organic baked shape */
  border-radius: 48% 52% 14px 14px / 82% 78% 14px 14px;
  overflow: hidden;
  background:
    /* 1 — warm golden specular highlight, top-left */
    radial-gradient(
      ellipse 50% 55% at 28% 22%,
      var(--bun-golden) 0%,
      transparent 55%
    ),
    /* 2 — ambient warm tone on the lit face */
    radial-gradient(
        ellipse 80% 70% at 42% 38%,
        var(--bun-shine) 0%,
        var(--bun-light) 30%,
        var(--bun-warm) 58%,
        var(--bun-mid) 80%,
        var(--bun-dark) 100%
      ),
    /* 3 — cooler dark underside rim (the oven shadow) */
    linear-gradient(to top, var(--bun-crust) 0%, transparent 35%);
  box-shadow:
    /* left-edge shadow — less light hits the side */
    inset 6px 0 14px rgba(0, 0, 0, 0.2),
    /* right-edge shadow */ inset -4px 0 10px rgba(0, 0, 0, 0.15),
    /* underside crease where dome meets flat base */ inset 0 -8px 20px
      rgba(0, 0, 0, 0.35),
    /* very faint top glow to bloom from specular */ inset 0 6px 16px
      rgba(255, 200, 100, 0.12),
    /* drop shadow to the layer below */ 0 5px 0 rgba(0, 0, 0, 0.35);
}

/*
 * Surface micro-texture: thin repeating noise bands to break
 * the smooth gradient — simulates the bun's porous surface.
 */
.bun-top__dome::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    112deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) 3px,
    rgba(255, 255, 255, 0.04) 4px,
    rgba(255, 255, 255, 0) 5px,
    rgba(255, 255, 255, 0) 9px
  );
  border-radius: inherit;
  pointer-events: none;
}

/*
 * Toasted ring — the darkened 'skirt' just above the flat base
 * where heat gathers most. Uses a bottom-to-top gradient mask.
 */
.bun-top__dome::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(40, 12, 0, 0.55) 0%,
    rgba(30, 8, 0, 0.22) 18%,
    transparent 40%
  );
  border-radius: inherit;
  pointer-events: none;
}

/*
 * The flat underside strip of the bun — the inner crumb face.
 * Wider than the dome to suggest the bun overhangs slightly.
 */
.bun-top__base {
  position: relative;
  width: 108%;
  margin-left: -4%;
  height: 16px;
  background:
    /* crumb interior colour (lighter, porous look) */ linear-gradient(
    to bottom,
    #f0c070 0%,
    #d4922a 40%,
    var(--bun-dark) 100%
  );
  border-radius: 0 0 8px 8px;
  box-shadow:
    inset 0 3px 6px rgba(255, 200, 100, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════════════════
   §8  SESAME SEEDS
   ══════════════════════════════════════════════════════════ */
.seeds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--bun-height);
  pointer-events: none;
}

/*
 * Seeds are 3-D ovals:
 *  — radial gradient: bright specular (TL), mid tone, dark base
 *  — box-shadow: cast shadow below + highlight groove on top
 *  — vary: width, height, rotation, position
 */
.seed {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 30% 30%,
    var(--sesame-light) 0%,
    var(--sesame-mid) 45%,
    var(--sesame-dark) 100%
  );
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.35),
    inset 1px 0 2px rgba(255, 255, 255, 0.1);
}

/* Varied sizes, angles and positions — no two seeds are alike */
.seed-1 {
  width: 20px;
  height: 9px;
  top: 18%;
  left: 17%;
  rotate: -22deg;
}
.seed-2 {
  width: 17px;
  height: 8px;
  top: 12%;
  left: 36%;
  rotate: 12deg;
}
.seed-3 {
  width: 22px;
  height: 10px;
  top: 22%;
  left: 56%;
  rotate: 28deg;
}
.seed-4 {
  width: 16px;
  height: 8px;
  top: 40%;
  left: 10%;
  rotate: -38deg;
}
.seed-5 {
  width: 19px;
  height: 9px;
  top: 38%;
  left: 47%;
  rotate: -8deg;
}
.seed-6 {
  width: 21px;
  height: 9px;
  top: 42%;
  left: 70%;
  rotate: 22deg;
}
.seed-7 {
  width: 15px;
  height: 7px;
  top: 16%;
  left: 78%;
  rotate: 18deg;
}

/* Each seed also has a subtle shadow underneath it on the bun surface */
.seed::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 10%;
  width: 80%;
  height: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  filter: blur(2px);
}

/* ══════════════════════════════════════════════════════════
   §9  LETTUCE
   ══════════════════════════════════════════════════════════ */
.lettuce {
  z-index: 8;
  position: relative; /* needed for absolute leaf children */
  height: calc(var(--lettuce-height) + 14px);
  overflow: visible;
}

.lettuce-top {
  margin-top: -3px;
  transition-delay: 0.04s;
}

.lettuce-bottom {
  margin-top: -5px; /* tighter stacking against tomato */
  transition-delay: 0.2s;
}

/*
 * Lettuce leaf base rules.
 * Both --a and --b leaves share the clip-path technique
 * but use different clip-path values and offsets to look
 * like two separate crinkled leaves layered on each other.
 */
.lettuce__leaf {
  position: absolute;
  height: var(--lettuce-height);
}

/*
 * Leaf A — slightly wider, offset left.
 * 36-point clip-path polygon creating a deep, irregular ruffled edge.
 * The top edge oscillates at different amplitudes — no periodicity.
 */
.lettuce__leaf--a {
  width: 120%;
  left: -9%;
  top: 0;
  clip-path: polygon(
    0% 100%,
    0% 70%,
    2% 28%,
    5% 62%,
    8% 18%,
    12% 50%,
    16% 8%,
    20% 45%,
    24% 4%,
    28% 40%,
    32% 12%,
    36% 52%,
    40% 6%,
    44% 44%,
    48% 10%,
    52% 48%,
    56% 7%,
    60% 42%,
    64% 14%,
    68% 54%,
    72% 6%,
    76% 40%,
    80% 10%,
    84% 50%,
    88% 16%,
    92% 58%,
    96% 24%,
    100% 65%,
    100% 100%
  );
  background:
    /* leaf vein lines — subtle vertical repeating */
    repeating-linear-gradient(
      94deg,
      var(--lettuce-vein) 0px,
      var(--lettuce-vein) 1px,
      transparent 1px,
      transparent 16px
    ),
    /* main colour — lit top, darker bottom */
    linear-gradient(
        to bottom,
        var(--lettuce-bright) 0%,
        var(--lettuce-mid) 40%,
        var(--lettuce-deep) 75%,
        var(--lettuce-dark) 100%
      );
  box-shadow:
    0 5px 14px rgba(0, 60, 0, 0.35),
    inset 0 -3px 6px rgba(0, 50, 0, 0.25);
}

/* Specular catch-light on the ruffled peaks (TL light) */
.lettuce__leaf--a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 50% at 30% 10%,
    rgba(180, 255, 140, 0.22) 0%,
    transparent 65%
  );
}

/* Underside soft shadow cast on the layer below */
.lettuce__leaf--a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 5%;
  width: 90%;
  height: 8px;
  background: rgba(0, 40, 0, 0.25);
  filter: blur(4px);
  border-radius: 50%;
}

/*
 * Leaf B — narrower, offset right, shifted down 2px.
 * Different clip-path peaks — more peaks than leaf A.
 * Creates layered depth: you can see both leaves.
 */
.lettuce__leaf--b {
  width: 110%;
  left: -4%;
  top: 2px;
  clip-path: polygon(
    0% 100%,
    0% 65%,
    3% 40%,
    6% 72%,
    9% 30%,
    13% 58%,
    17% 16%,
    21% 52%,
    25% 12%,
    29% 46%,
    33% 8%,
    37% 44%,
    41% 14%,
    45% 50%,
    49% 9%,
    53% 45%,
    57% 15%,
    61% 52%,
    65% 8%,
    69% 46%,
    73% 12%,
    77% 48%,
    81% 18%,
    85% 55%,
    89% 10%,
    93% 48%,
    97% 30%,
    100% 62%,
    100% 100%
  );
  background:
    repeating-linear-gradient(
      88deg,
      var(--lettuce-vein) 0px,
      var(--lettuce-vein) 1px,
      transparent 1px,
      transparent 20px
    ),
    linear-gradient(
      to bottom,
      var(--lettuce-mid) 0%,
      var(--lettuce-deep) 50%,
      var(--lettuce-dark) 100%
    );
  /* leaf B is slightly behind leaf A — darker tone */
  filter: brightness(0.88);
}

/* ══════════════════════════════════════════════════════════
   §10  CHEESE — melted cheddar slab + organic drips
   ══════════════════════════════════════════════════════════ */
.cheese {
  z-index: 7;
  position: relative;
  height: calc(var(--cheese-height) + 36px);
  overflow: visible;
  margin-top: -2px;
  transition-delay: 0.08s;
}

/*
 * Soft melted slab — no jagged clip-path.
 * Slightly irregular bottom via border-radius + drip overlap.
 */
.cheese__body {
  position: relative;
  width: 112%;
  margin-left: -6%;
  height: var(--cheese-height);
  border-radius: 10px 10px 6px 8px / 14px 12px 10px 8px;
  background:
    /* glossy top-left catch */
    radial-gradient(ellipse 55% 70% at 22% 28%, #fff3a8 0%, transparent 58%),
    /* warm mid sheen */
    radial-gradient(ellipse 80% 90% at 55% 40%, #ffe082 0%, transparent 62%),
    /* cheddar body */
    linear-gradient(180deg, #ffe566 0%, #ffc107 28%, #f9a825 62%, #ef6c00 100%);
  box-shadow:
    0 -2px 10px rgba(255, 200, 60, 0.28),
    0 6px 14px rgba(0, 0, 0, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -5px 10px rgba(180, 70, 0, 0.28);
}

/* Soft right-side shadow (lit from TL) */
.cheese__body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(180, 60, 0, 0.18) 100%
  );
  pointer-events: none;
}

/* Thin oily highlight along the crown */
.cheese__body::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 8%;
  width: 55%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.55),
    rgba(255, 255, 255, 0.15) 70%,
    transparent
  );
  pointer-events: none;
}

/* Soft melt skirt under the slab (bridges body → drips) */
.cheese__wave {
  position: absolute;
  top: calc(var(--cheese-height) - 6px);
  left: -4%;
  width: 108%;
  height: 14px;
  background: linear-gradient(180deg, #f9a825 0%, #ef6c00 100%);
  border-radius: 40% 50% 45% 55% / 60% 70% 80% 70%;
  filter: blur(0.2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  z-index: 0;
}

/* ── Cheese drips ───────────────────────────────────────── */
.cheese__drips {
  position: absolute;
  top: calc(var(--cheese-height) - 8px);
  left: -6%;
  width: 112%;
  height: 42px;
  pointer-events: none;
  z-index: 1;
}

/*
 * Teardrop drips: narrow neck → bulb tip.
 * Continuity with the slab via overlapping top + matching gradient.
 */
.drip {
  position: absolute;
  top: 0;
  background: linear-gradient(
    180deg,
    #ffc107 0%,
    #f9a825 45%,
    #ef6c00 78%,
    #e65100 100%
  );
  border-radius: 50% 50% 48% 48% / 18% 18% 82% 82%;
  box-shadow:
    inset -2px 0 5px rgba(120, 40, 0, 0.22),
    inset 2px 0 4px rgba(255, 230, 120, 0.25),
    0 5px 10px rgba(0, 0, 0, 0.28);
}

/* Specular on the lit face of each drip */
.drip::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 18%;
  width: 32%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.45),
    transparent 70%
  );
  pointer-events: none;
}

/* Soft tip glow */
.drip::after {
  content: "";
  position: absolute;
  bottom: 4%;
  left: 22%;
  width: 56%;
  height: 28%;
  border-radius: 50%;
  background: rgba(255, 180, 60, 0.35);
  filter: blur(2px);
  pointer-events: none;
}

/* Varied organic drip lengths / widths */
.drip-1 {
  height: 22px;
  width: 14px;
  left: 8%;
  border-radius: 46% 54% 48% 52% / 16% 16% 84% 84%;
}
.drip-2 {
  height: 36px;
  width: 18px;
  left: 24%;
  border-radius: 50% 50% 45% 55% / 14% 14% 86% 86%;
}
.drip-3 {
  height: 18px;
  width: 12px;
  left: 44%;
  border-radius: 48% 52% 50% 50% / 20% 20% 80% 80%;
}
.drip-4 {
  height: 30px;
  width: 16px;
  left: 62%;
  border-radius: 52% 48% 55% 45% / 15% 15% 85% 85%;
}
.drip-5 {
  height: 20px;
  width: 13px;
  left: 80%;
  border-radius: 45% 55% 48% 52% / 18% 18% 82% 82%;
}

/* Hover: drips slowly stretch as if warming */
.burger:not(.burger--revealed):hover .drip-1 {
  transform: translateY(3px);
  transition: transform 0.9s ease;
}
.burger:not(.burger--revealed):hover .drip-2 {
  transform: translateY(6px);
  transition: transform 0.9s ease 0.05s;
}
.burger:not(.burger--revealed):hover .drip-3 {
  transform: translateY(2px);
  transition: transform 0.9s ease 0.1s;
}
.burger:not(.burger--revealed):hover .drip-4 {
  transform: translateY(5px);
  transition: transform 0.9s ease 0.04s;
}
.burger:not(.burger--revealed):hover .drip-5 {
  transform: translateY(3px);
  transition: transform 0.9s ease 0.08s;
}

/* ══════════════════════════════════════════════════════════
   §11  BEEF PATTY
   ══════════════════════════════════════════════════════════ */
.patty {
  z-index: 6;
  margin-top: -10px; /* tighter stack under cheese */
  transition-delay: 0.12s;
}

/*
 * The patty body has an irregular clip-path that mimics the
 * uneven edge of a hand-pressed burger — no two sides are parallel.
 * Ten radial/linear gradient layers simulate:
 *  1. Sizzling grease spots (orange highlights)
 *  2. Darker meat pockets and char craters (deep brown/black pores)
 *  3. Pronounced diagonal grill marks
 *  4. Ambient radial shading
 */
.patty__body {
  position: relative;
  width: 112%;
  margin-left: -6%;
  height: var(--patty-height);
  /* Irregular organic outline — no perfect rectangles */
  clip-path: polygon(
    1% 18%,
    4% 8%,
    9% 2%,
    16% 0%,
    24% 4%,
    33% 0%,
    42% 3%,
    51% 0%,
    60% 4%,
    70% 1%,
    78% 5%,
    86% 0%,
    93% 4%,
    98% 10%,
    100% 22%,
    99% 40%,
    100% 58%,
    97% 72%,
    98% 84%,
    94% 94%,
    87% 100%,
    78% 96%,
    68% 100%,
    58% 97%,
    48% 100%,
    38% 97%,
    28% 100%,
    18% 96%,
    9% 100%,
    3% 92%,
    1% 78%,
    2% 62%,
    0% 44%,
    1% 28%
  );
  background:
    /* Sizzling highlights - fat spots */
    radial-gradient(
      circle at 20% 30%,
      rgba(255, 140, 50, 0.15) 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 45% 20%,
      rgba(255, 140, 50, 0.12) 1px,
      transparent 4px
    ),
    radial-gradient(
      circle at 75% 35%,
      rgba(255, 140, 50, 0.15) 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 35% 70%,
      rgba(255, 140, 50, 0.1) 1.5px,
      transparent 3.5px
    ),
    radial-gradient(
      circle at 80% 65%,
      rgba(255, 140, 50, 0.15) 2px,
      transparent 4px
    ),
    /* Sizzling dark pores - texture holes */
    radial-gradient(circle at 10% 40%, #150500 2px, transparent 4px),
    radial-gradient(circle at 30% 25%, #100200 3px, transparent 6px),
    radial-gradient(circle at 55% 45%, #180600 2.5px, transparent 5px),
    radial-gradient(circle at 70% 15%, #0f0200 2.5px, transparent 5.5px),
    radial-gradient(circle at 88% 30%, #150500 3px, transparent 6px),
    radial-gradient(circle at 25% 75%, #0d0100 3.5px, transparent 7px),
    radial-gradient(circle at 50% 80%, #1c0700 2px, transparent 5px),
    radial-gradient(circle at 65% 70%, #100200 3px, transparent 6px),
    radial-gradient(circle at 92% 70%, #150500 2.5px, transparent 5px),
    /* Main thick diagonal grill marks */
    repeating-linear-gradient(
        -26deg,
        var(--patty-mark) 0px,
        var(--patty-mark) 4px,
        transparent 4px,
        transparent 18px
      ),
    /* Meat base radial-gradient for lighting */
    radial-gradient(
        ellipse 110% 90% at 35% 25%,
        #6e3012 0%,
        /* warm sizzling core */ var(--patty-surface) 25%,
        var(--patty-mid) 50%,
        var(--patty-dark) 80%,
        var(--patty-crust) 100%
      );
  box-shadow:
    /* thick drop shadow below patty */
    0 8px 24px rgba(0, 0, 0, 0.6),
    /* warm reflected light from cheese above */ inset 0 3px 6px
      rgba(255, 160, 50, 0.18),
    /* deep shadow at bottom edge */ inset 0 -6px 12px rgba(0, 0, 0, 0.5);
}

/* TL specular catch light — the only truly lit part of the patty */
.patty__body::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 6%;
  width: 38%;
  height: 30%;
  background: radial-gradient(
    ellipse at 35% 35%,
    rgba(255, 160, 50, 0.22) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Deep char ring at the very edge of the patty */
.patty__body::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 16px 8px rgba(8, 2, 0, 0.65);
  clip-path: inherit;
}

/*
 * Patty crust ring — a separate absolutely-positioned div
 * that frames the edge of the patty with a charred colour.
 */
.patty__crust {
  position: absolute;
  top: 0;
  left: -6%;
  width: 112%;
  height: var(--patty-height);
  clip-path: polygon(
    1% 18%,
    4% 8%,
    9% 2%,
    16% 0%,
    24% 4%,
    33% 0%,
    42% 3%,
    51% 0%,
    60% 4%,
    70% 1%,
    78% 5%,
    86% 0%,
    93% 4%,
    98% 10%,
    100% 22%,
    99% 40%,
    100% 58%,
    97% 72%,
    98% 84%,
    94% 94%,
    87% 100%,
    78% 96%,
    68% 100%,
    58% 97%,
    48% 100%,
    38% 97%,
    28% 100%,
    18% 96%,
    9% 100%,
    3% 92%,
    1% 78%,
    2% 62%,
    0% 44%,
    1% 28%
  );
  background: transparent;
  box-shadow: inset 0 0 0 6px rgba(10, 2, 0, 0.55);
  pointer-events: none;
}

/* Grill sparks / oil flecks around the patty */
.patty-sparks {
  position: absolute;
  inset: -18px -24px;
  pointer-events: none;
  z-index: 2;
}

.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--bun-golden);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--bun-shine);
  opacity: 0;
  animation: sparkFly 2.8s ease-in-out infinite;
}

.spark-1 {
  top: 8%;
  left: 6%;
  animation-delay: 0.2s;
}
.spark-2 {
  top: 22%;
  right: 4%;
  animation-delay: 0.8s;
}
.spark-3 {
  top: 55%;
  left: 2%;
  animation-delay: 1.4s;
  width: 2px;
  height: 2px;
}
.spark-4 {
  top: 40%;
  right: 8%;
  animation-delay: 0.5s;
}
.spark-5 {
  top: 70%;
  left: 18%;
  animation-delay: 1.1s;
  width: 2px;
  height: 2px;
}
.spark-6 {
  top: 12%;
  left: 72%;
  animation-delay: 1.7s;
}

@keyframes sparkFly {
  0%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  25% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.55;
    transform: translate(6px, -10px) scale(1);
  }
  80% {
    opacity: 0;
    transform: translate(10px, -18px) scale(0.4);
  }
}

.burger--revealed .patty-sparks {
  opacity: 0.85;
}

.burger:not(.burger--revealed) .patty-sparks {
  animation: fadeIn 0.8s ease 2.8s both;
}

/* ══════════════════════════════════════════════════════════
   §12  ONION
   ══════════════════════════════════════════════════════════ */
.onion {
  z-index: 5;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 18px;
  margin-top: -8px; /* tighter stacking against patty */
  transition-delay: 0.14s;
}

/*
 * Onion rings: thin ellipses with a gradient fill.
 * Background: radial-gradient white→purple→dark gives the rings
 * a translucent, juicy, slightly reflective look.
 */
.onion__ring {
  position: relative;
  height: 16px;
  border-radius: 50%;
  /* Layered background: inner fill + rim tone */
  background: radial-gradient(
    ellipse 80% 80% at 35% 30%,
    rgba(255, 255, 255, 0.35) 0%,
    var(--onion-bright) 25%,
    var(--onion-mid) 55%,
    var(--onion-dark) 100%
  );
  /* Outer edge highlight via border + box-shadow combo */
  box-shadow:
    0 0 0 2px rgba(149, 33, 145, 0.5),
    inset 0 2px 5px rgba(255, 255, 255, 0.3),
    inset 0 -3px 5px rgba(80, 0, 80, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.3);
}

.onion__ring--1 {
  width: 72px;
  rotate: -6deg;
}
.onion__ring--2 {
  width: 52px;
  rotate: 9deg;
  translate: 0 3px;
}
.onion__ring--3 {
  width: 64px;
  rotate: -4deg;
}

/* Bright specular spot on each ring (TL light) */
.onion__ring::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 12%;
  width: 32%;
  height: 40%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  filter: blur(2px);
}

/* ══════════════════════════════════════════════════════════
   §13  TOMATO
   ══════════════════════════════════════════════════════════ */
.tomato {
  z-index: 4;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px;
  height: 24px;
  margin-top: -6px; /* tighter against onion */
  transition-delay: 0.16s;
}

/*
 * Tomato slices:
 *  — high border-radius for circular/organic silhouette
 *  — five radial gradients: three seed chambers + skin highlight + flesh
 *  — overflow: hidden clips the pseudo-elements
 *  — box-shadow: dark rim + inset light for juicy depth
 */
.tomato__slice {
  position: relative;
  height: 22px;
  /*
   * Asymmetric border-radius: top is more curved (the skin dome),
   * bottom is flatter (the cut face resting on other ingredients).
   */
  border-radius: 50% 50% 8% 8% / 80% 80% 12% 12%;
  overflow: hidden;
  background:
    /* seed chamber 1 */
    radial-gradient(circle at 22% 62%, var(--tomato-seed) 0%, transparent 25%),
    /* seed chamber 2 */
    radial-gradient(circle at 52% 58%, var(--tomato-seed) 0%, transparent 22%),
    /* seed chamber 3 */
    radial-gradient(circle at 78% 65%, var(--tomato-seed) 0%, transparent 20%),
    /* skin colour top-edge (darker because it's the outer skin) */
    radial-gradient(
        ellipse 100% 20% at 50% 0%,
        var(--tomato-dark) 0%,
        transparent 100%
      ),
    /* flesh gradient: bright near TL, deeper towards BR */
    radial-gradient(
        ellipse 90% 100% at 35% 25%,
        var(--tomato-bright) 0%,
        var(--tomato-mid) 40%,
        var(--tomato-deep) 75%,
        var(--tomato-dark) 100%
      );
  box-shadow:
    0 3px 10px rgba(150, 0, 0, 0.4),
    inset 0 1px 4px rgba(255, 180, 150, 0.25);
}

.tomato__slice--1 {
  width: 104px;
}
.tomato__slice--2 {
  width: 78px;
  translate: 0 -3px;
}

/* Skin sheen: soft white-to-transparent from TL */
.tomato__slice::before {
  content: "";
  position: absolute;
  top: 4%;
  left: 8%;
  width: 35%;
  height: 45%;
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(255, 255, 255, 0.28) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

/* Translucent water-juice sheen at the bottom of the flesh */
.tomato__slice::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(
    to top,
    rgba(200, 0, 0, 0.25) 0%,
    transparent 100%
  );
}

/* ══════════════════════════════════════════════════════════
   §14  BOTTOM BUN
   ══════════════════════════════════════════════════════════ */
.bun-bottom {
  z-index: 2;
  margin-top: -10px; /* tighter stack under lettuce */
  transition-delay: 0.22s;
}

/*
 * Bottom bun body — wider and flatter than the top bun.
 * Three gradient layers:
 *  1. TL specular (golden/warm)
 *  2. Main bun gradient (warm-to-dark)
 *  3. Toasted cut-face highlight on the very top surface
 */
.bun-bottom__body {
  position: relative;
  width: 114%;
  margin-left: -7%;
  height: 46px;
  /* Flatter profile: less dome, more flat crown */
  border-radius: 8px 8px 36px 36px / 8px 8px 55% 55%;
  overflow: hidden;
  background:
    /* TL specular catch light */
    radial-gradient(
      ellipse 45% 60% at 26% 20%,
      var(--bun-golden) 0%,
      transparent 55%
    ),
    /* main bun colour */
    radial-gradient(
        ellipse 90% 80% at 45% 35%,
        var(--bun-shine) 0%,
        var(--bun-light) 30%,
        var(--bun-warm) 55%,
        var(--bun-mid) 75%,
        var(--bun-dark) 100%
      );
  box-shadow:
    inset 6px 0 12px rgba(0, 0, 0, 0.18),
    inset -4px 0 8px rgba(0, 0, 0, 0.12),
    inset 0 -10px 20px rgba(0, 0, 0, 0.3),
    0 5px 0 rgba(0, 0, 0, 0.35);
}

/* Grill toasted top face — where the bun meets the filling */
.bun-bottom__body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 14px;
  background:
    /* Slight grill scorching lines on the cut face */
    repeating-linear-gradient(
      88deg,
      rgba(60, 20, 0, 0.4) 0px,
      rgba(60, 20, 0, 0.4) 5px,
      transparent 5px,
      transparent 24px
    ),
    /* Warm crumb interior */
    linear-gradient(to bottom, #f2c870 0%, #d8952c 50%, transparent 100%);
}

/* Porous surface texture on the bun face */
.bun-bottom__body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 0px,
    rgba(255, 255, 255, 0) 3px,
    rgba(255, 255, 255, 0.03) 4px,
    rgba(255, 255, 255, 0) 5px,
    rgba(255, 255, 255, 0) 10px
  );
  border-radius: inherit;
}

/* Underside crust — dark, thick base strip */
.bun-bottom__base {
  position: relative;
  width: 116%;
  margin-left: -8%;
  height: 12px;
  background: linear-gradient(
    to bottom,
    var(--bun-dark) 0%,
    var(--bun-crust) 100%
  );
  border-radius: 0 0 28px 28px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.6),
    0 16px 40px rgba(0, 0, 0, 0.35);
}

/* ══════════════════════════════════════════════════════════
   §15  PLATE / SHADOW
   ══════════════════════════════════════════════════════════ */
.plate {
  position: relative;
  width: 88%;
  height: 28px;
  margin-top: 14px;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 35%,
      rgba(255, 200, 120, 0.08) 0%,
      transparent 55%
    ),
    radial-gradient(
      ellipse 95% 100%,
      rgba(28, 24, 20, 0.95) 0%,
      rgba(12, 10, 8, 0.9) 45%,
      rgba(0, 0, 0, 0.55) 70%,
      transparent 100%
    );
  box-shadow:
    0 0 0 1px rgba(245, 173, 68, 0.12),
    0 8px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 200, 120, 0.12),
    inset 0 -6px 14px rgba(0, 0, 0, 0.45);
  opacity: 1;
}

.plate::before {
  content: "";
  position: absolute;
  inset: 18% 12%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(255, 180, 80, 0.1) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   §16  STEAM
   ══════════════════════════════════════════════════════════ */
.steam-container {
  position: absolute;
  top: -90px;
  left: 50%;
  translate: -50% 0;
  width: 180px;
  height: 90px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.burger:not(.burger--revealed) .steam-container {
  opacity: 1;
}

.steam {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  filter: blur(7px);
  animation: steamRise 3.5s ease-in infinite;
}

.steam-1 {
  width: 14px;
  height: 65px;
  left: 28%;
  animation-delay: 0s;
}
.steam-2 {
  width: 18px;
  height: 55px;
  left: 50%;
  animation-delay: 0.6s;
}
.steam-3 {
  width: 12px;
  height: 60px;
  left: 68%;
  animation-delay: 0.3s;
}

/* ══════════════════════════════════════════════════════════
   §17  HOVER — LAYER SEPARATION
   ══════════════════════════════════════════════════════════ */
/*
 * Each layer fans outward from its rest position.
 * Only when assembled (not revealed) so it never fights reveal transforms.
 */
.burger:not(.burger--revealed):hover .bun-top {
  transform: translateY(-16px) scale(1.015);
  transition: transform 0.5s var(--ease-out);
}
.burger:not(.burger--revealed):hover .lettuce-top {
  transform: translateY(-9px);
  transition: transform 0.5s var(--ease-out) 0.03s;
}
.burger:not(.burger--revealed):hover .cheese {
  transform: translateY(-5px);
  transition: transform 0.5s var(--ease-out) 0.05s;
}
.burger:not(.burger--revealed):hover .patty {
  transform: translateY(0);
}
.burger:not(.burger--revealed):hover .onion {
  transform: translateY(5px);
  transition: transform 0.5s var(--ease-out) 0.05s;
}
.burger:not(.burger--revealed):hover .tomato {
  transform: translateY(7px);
  transition: transform 0.5s var(--ease-out) 0.03s;
}
.burger:not(.burger--revealed):hover .lettuce-bottom {
  transform: translateY(11px);
  transition: transform 0.5s var(--ease-out) 0.02s;
}
.burger:not(.burger--revealed):hover .bun-bottom {
  transform: translateY(16px) scale(1.015);
  transition: transform 0.5s var(--ease-out);
}

/* ══════════════════════════════════════════════════════════
   §18  INFO PANEL
   ══════════════════════════════════════════════════════════ */
.info-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
  width: 100%;
}

.info-panel__main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.info-title {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bun-golden);
}

.info-made {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(240, 235, 224, 0.38);
}

/* ══════════════════════════════════════════════════════════
   §19  TECH BADGES
   ══════════════════════════════════════════════════════════ */
.tech-badges {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

.tech-badges__heading {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, 0.35);
}

.tech-badges__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.badge {
  padding: 0.25rem 0.75rem;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bun-golden);
  background: rgba(200, 114, 28, 0.1);
  border: 1px solid rgba(200, 114, 28, 0.25);
  transition:
    background 0.25s,
    border-color 0.25s,
    transform 0.25s;
}

.badge:hover {
  background: rgba(200, 114, 28, 0.22);
  border-color: rgba(200, 114, 28, 0.5);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════
   §20  KEYFRAME ANIMATIONS
   ══════════════════════════════════════════════════════════ */

/*
 * Assembly: layers drop from above with a bouncy overshoot.
 * Each layer uses animation-delay to create a staggered cascade.
 */
@keyframes assemble {
  from {
    opacity: 0;
    transform: translateY(-70px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/*
 * Float: gentle, asymmetric bob — not a perfect sine wave.
 * Peaks at 40% (faster rise) and lingers at the top (60%)
 * before slowly settling, giving a realistic feel of inertia.
 */
@keyframes float {
  0% {
    transform: rotateX(4deg) translateY(0px);
  }
  38% {
    transform: rotateX(4deg) translateY(-13px);
  }
  62% {
    transform: rotateX(4deg) translateY(-11px);
  }
  100% {
    transform: rotateX(4deg) translateY(0px);
  }
}

/* Steam wisps — rise, billow, fade */
@keyframes steamRise {
  0% {
    opacity: 0;
    transform: translateY(0) scaleX(1);
  }
  18% {
    opacity: 0.6;
  }
  55% {
    opacity: 0.3;
    transform: translateY(-45px) scaleX(1.5);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scaleX(0.7);
  }
}

/* Fade-in for plate and steam container */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Reduced-motion gentle pulse */
@keyframes subtlePulse {
  0%,
  100% {
    transform: rotateX(4deg) scale(1);
  }
  50% {
    transform: rotateX(4deg) scale(1.01);
  }
}

/* ══════════════════════════════════════════════════════════
   §21  PREFERS-REDUCED-MOTION
   ══════════════════════════════════════════════════════════ */
/*
 * Handle each animation explicitly rather than a global override.
 * Per modern-web-guidance: DO NOT set global animation-duration: 0.01ms
 * as it can cause jarring flickers in certain cases.
 */
@media (prefers-reduced-motion: reduce) {
  .layer {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .plate {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .steam-container {
    animation: none !important;
    opacity: 0 !important;
  }

  .burger {
    animation: none !important;
  }

  /* Remove hover layer separation for reduced-motion users */
  .burger:not(.burger--revealed):hover .bun-top,
  .burger:not(.burger--revealed):hover .lettuce-top,
  .burger:not(.burger--revealed):hover .cheese,
  .burger:not(.burger--revealed):hover .patty,
  .burger:not(.burger--revealed):hover .onion,
  .burger:not(.burger--revealed):hover .tomato,
  .burger:not(.burger--revealed):hover .lettuce-bottom,
  .burger:not(.burger--revealed):hover .bun-bottom {
    transform: none;
    transition: none;
  }

  .burger:hover .drip-1,
  .burger:hover .drip-2,
  .burger:hover .drip-3,
  .burger:hover .drip-4,
  .burger:hover .drip-5 {
    transform: none;
    transition: none;
  }

  .spark {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ══════════════════════════════════════════════════════════
   §22  RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 600px) {
  :root {
    --burger-width: 268px;
    --bun-height: 62px;
    --patty-height: 30px;
    --lettuce-height: 17px;
  }

  .scene {
    padding: 1.5rem 1rem 2.5rem;
    gap: 1.5rem;
  }

  .hero-title {
    font-size: 2rem;
  }
}

/* Mobile */
@media (max-width: 420px) {
  :root {
    --burger-width: 228px;
    --bun-height: 54px;
    --patty-height: 24px;
    --lettuce-height: 14px;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .seed {
    transform: scale(0.8);
  }

  .onion__ring--1 {
    width: 56px;
  }
  .onion__ring--2 {
    width: 40px;
  }
  .onion__ring--3 {
    width: 50px;
  }

  .tomato__slice--1 {
    width: 82px;
  }
  .tomato__slice--2 {
    width: 62px;
  }

  .bun-bottom__base {
    height: 10px;
  }
}

/* ══════════════════════════════════════════════════════════
   §24  CONTACT SHADOWS
   Subtle cast shadows at the bottom of each major layer
   to make the stack feel physically grounded.
   ══════════════════════════════════════════════════════════ */

/*
 * Each ingredient layer has a tiny blurred oval at its bottom
 * to suggest physical contact with the layer below.
 * Scoped to .layer:not(.plate) to avoid double-shadow under bun.
 */
.layer:not(.plate)::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 8%;
  width: 84%;
  height: 5px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: 50%;
  filter: blur(3px);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   §25  LAYER LABELS
   Visible only in reveal mode. Each label slides in from
   the right of the burger with a small stagger delay.
   ══════════════════════════════════════════════════════════ */

.layer-label {
  /* Absolute position, aligned in a column on the right side */
  position: absolute;
  /* Keep labels clear of wide layers (lettuce/cheese overhang ~6–10%) */
  left: calc(100% + 88px);
  top: 50%;
  transform: translateY(-50%) translateX(16px);

  /* Hidden in assembled state */
  opacity: 0;
  pointer-events: none;

  /* Outline pill — matches mockup */
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(8, 8, 12, 0.88);
  border: 1px solid rgba(245, 173, 68, 0.55);
  color: var(--bun-golden);

  /* Typography */
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);

  /* Smooth slide + fade */
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s;
}

/* Dotted connector — stops short of the food (gap before the dot) */
.layer-label::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 40px;
  height: 0;
  border-top: 1.5px dotted rgba(245, 173, 68, 0.55);
  transform: translateY(-50%);
  pointer-events: none;
}

/*
 * Anchor dot at the INNER end of the line.
 * Gap from layer box edge ≈ 88px − 40px = 48px (clears overhanging food).
 */
.layer-label::after {
  content: "";
  position: absolute;
  right: calc(100% + 40px);
  top: 50%;
  width: 6px;
  height: 6px;
  background: var(--bun-golden);
  border-radius: 50%;
  transform: translate(50%, -50%);
  box-shadow:
    0 0 6px var(--bun-shine),
    0 0 12px rgba(245, 173, 68, 0.55);
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   §26  BURGER — REVEALED STATE
   JS toggles .burger--revealed on the burger element.
   We separate the layers using per-layer transforms/translateY.
   This preserves standard margin stack flow and z-indexing.
   ══════════════════════════════════════════════════════════ */

/* Ensure smooth transforms transition on all layer items */
.burger {
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When revealed: flatten 3D perspective tilt to a neat diagram view */
.burger--revealed {
  animation-name: none; /* cancel float */
  transform: rotateX(0deg) rotateY(0deg) translateX(-48px) !important;
}

.burger--revealed .plate {
  opacity: 1;
  animation: none;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Softer separation — enough gap for labels, fits inside padded wrapper */
.burger--revealed .bun-top {
  transform: translateY(-120px);
}
.burger--revealed .lettuce-top {
  transform: translateY(-82px);
}
.burger--revealed .cheese {
  transform: translateY(-42px);
}
.burger--revealed .patty {
  transform: translateY(0);
}
.burger--revealed .onion {
  transform: translateY(38px);
}
.burger--revealed .tomato {
  transform: translateY(72px);
}
.burger--revealed .lettuce-bottom {
  transform: translateY(108px);
}
.burger--revealed .bun-bottom {
  transform: translateY(145px);
}
.burger--revealed .plate {
  transform: translateY(162px);
}

/* Labels slide and fade in */
.burger--revealed .layer-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* Staggered label delays matching layer separation speed */
.burger--revealed .bun-top .layer-label {
  transition-delay: 0.12s;
}
.burger--revealed .lettuce-top .layer-label {
  transition-delay: 0.18s;
}
.burger--revealed .cheese .layer-label {
  transition-delay: 0.24s;
}
.burger--revealed .patty .layer-label {
  transition-delay: 0.3s;
}
.burger--revealed .onion .layer-label {
  transition-delay: 0.36s;
}
.burger--revealed .tomato .layer-label {
  transition-delay: 0.42s;
}
.burger--revealed .lettuce-bottom .layer-label {
  transition-delay: 0.48s;
}
.burger--revealed .bun-bottom .layer-label {
  transition-delay: 0.54s;
}

/* Disable hover layer displacement when revealed — handled via :not(.burger--revealed) */

.burger--revealed:hover .drip-1,
.burger--revealed:hover .drip-2,
.burger--revealed:hover .drip-3,
.burger--revealed:hover .drip-4,
.burger--revealed:hover .drip-5 {
  transform: none;
  transition: none;
}

/* Disable contact shadows in reveal mode */
.burger--revealed .layer::after {
  opacity: 0;
  transition: opacity 0.3s;
}

/* Suppress steam wisps in reveal mode */
.burger--revealed .steam-container {
  opacity: 0;
  transition: opacity 0.3s;
}

/* ══════════════════════════════════════════════════════════
   §27  REVEAL CONTROL BUTTON & HINT
   ══════════════════════════════════════════════════════════ */

.reveal-control {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.5rem;
}

.reveal-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 1.75rem;
  border-radius: 100px;
  background: rgba(12, 10, 8, 0.92);
  border: 1.5px solid var(--bun-golden);
  color: var(--bun-golden);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(245, 173, 68, 0.12),
    0 0 22px rgba(245, 173, 68, 0.22),
    0 8px 24px rgba(0, 0, 0, 0.45);
  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
}

.reveal-btn:hover {
  background: rgba(245, 173, 68, 0.1);
  border-color: var(--bun-shine);
  box-shadow:
    0 0 0 1px rgba(245, 173, 68, 0.2),
    0 0 32px rgba(245, 173, 68, 0.35),
    0 10px 28px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

.reveal-btn:focus-visible {
  outline: 2px solid var(--bun-light);
  outline-offset: 4px;
}

.reveal-btn:active {
  transform: translateY(0);
}

/* Stack icon — three lines (matches mockup) */
.reveal-btn__icon {
  display: inline-block;
  position: relative;
  width: 13px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  margin-right: 2px;
}

.reveal-btn__icon::before,
.reveal-btn__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 13px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.reveal-btn__icon::before {
  top: -5px;
}
.reveal-btn__icon::after {
  top: 5px;
}

.reveal-hint {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 235, 224, 0.35);
  margin-top: 0.45rem;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   §28  TECHNICAL SHOWCASE SECTION
   ══════════════════════════════════════════════════════════ */

.tech-showcase {
  width: 100%;
  max-width: 660px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 1.25rem 0 0;
  margin-top: 1.5rem;
  box-shadow: none;
}

.tech-showcase__heading {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bun-light);
  text-align: center;
  margin-bottom: 1.5rem;
  opacity: 0.8;
  text-shadow: 0 0 10px rgba(245, 173, 68, 0.15);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.75rem;
}

.tech-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  text-align: center;
  cursor: default;
  transition: transform 0.25s ease;
}

.tech-card:hover {
  transform: translateY(-2px);
}

.tech-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: transform 0.25s;
}

.tech-card:hover .tech-icon {
  border-color: transparent;
  background: transparent;
  transform: scale(1.06);
}

.tech-name {
  font-size: 0.65rem;
  font-weight: 600;
  color: rgba(240, 235, 224, 0.6);
  letter-spacing: 0.04em;
  white-space: nowrap;
  transition: color 0.25s;
}

.tech-card:hover .tech-name {
  color: var(--bun-golden);
}

/* ── Technical Icon Visual Graphics ─────────────────────── */

/* 1. Gradients: radial sphere */
.tech-icon--gradients::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #fff 0%,
    var(--bun-shine) 45%,
    var(--bun-mid) 100%
  );
  box-shadow: 0 0 6px rgba(245, 173, 68, 0.35);
}

/* 2. Pseudo-elements: dashed outline box + dot */
.tech-icon--pseudo::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 1px dashed rgba(245, 173, 68, 0.65);
  border-radius: 3px;
  position: relative;
}
.tech-icon--pseudo::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--bun-shine);
  border-radius: 50%;
  top: 6px;
  left: 6px;
  box-shadow: 0 0 4px var(--bun-golden);
}

/* 3. Transforms: 3D wireframe cube */
.cube {
  position: relative;
  width: 14px;
  height: 14px;
  transform-style: preserve-3d;
  transform: rotateX(-22deg) rotateY(26deg);
}
.cube-face {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(245, 173, 68, 0.7);
  background: rgba(245, 173, 68, 0.08);
}
.cube-face--front {
  transform: translateZ(7px);
}
.cube-face--top {
  transform: rotateX(90deg) translateZ(7px);
}
.cube-face--right {
  transform: rotateY(90deg) translateZ(7px);
}

/* 4. Animations: Sparks */
.tech-icon--animations {
  position: relative;
}
.sparkle {
  position: absolute;
  background: var(--bun-golden);
  clip-path: polygon(
    50% 0%,
    65% 35%,
    100% 50%,
    65% 65%,
    50% 100%,
    35% 65%,
    0% 50%,
    35% 35%
  );
  animation: pulseSparkle 2s infinite ease-in-out;
}
.sparkle-1 {
  width: 9px;
  height: 9px;
  top: 4px;
  left: 4px;
  animation-delay: 0s;
}
.sparkle-2 {
  width: 6px;
  height: 6px;
  top: 18px;
  left: 20px;
  animation-delay: 0.6s;
}
.sparkle-3 {
  width: 4px;
  height: 4px;
  top: 20px;
  left: 7px;
  animation-delay: 1.2s;
}

@keyframes pulseSparkle {
  0%,
  100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* 5. Clip-path: Irregular polygon outline */
.clip-preview {
  width: 16px;
  height: 16px;
  background: rgba(245, 173, 68, 0.15);
  clip-path: polygon(25% 10%, 85% 20%, 75% 90%, 10% 75%);
  border: 1.5px solid rgba(245, 173, 68, 0.75);
}

/* 6. Shadows: Sun casting shadow */
.shadow-preview {
  width: 12px;
  height: 12px;
  background: var(--bun-golden);
  border-radius: 50%;
  box-shadow:
    4px 4px 6px rgba(0, 0, 0, 0.85),
    0 0 8px var(--bun-shine);
}

/* ══════════════════════════════════════════════════════════
   §29  REDUCED-MOTION OVERRIDES (REVEAL)
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .layer {
    transition: none !important;
  }
  .burger {
    transition: none !important;
  }
  .layer-label {
    transition: none !important;
    transition-delay: 0s !important;
  }
  .burger--revealed .layer-label {
    transition-delay: 0s !important;
  }
  .reveal-btn,
  .reveal-btn__icon,
  .reveal-btn__icon::before,
  .reveal-btn__icon::after {
    transition: none !important;
  }
  .layer:not(.plate)::after {
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   §30  RESPONSIVE & MOBILE SUPPORT
   ══════════════════════════════════════════════════════════ */

/* Tablet & Smaller Desktops */
@media (max-width: 768px) {
  .burger--revealed {
    transform: rotateX(0deg) rotateY(0deg) translateX(0) !important;
  }

  .layer-label {
    font-size: 0.52rem;
    left: calc(100% + 64px);
    padding: 4px 10px;
  }
  .layer-label::before {
    width: 28px;
  }
  .layer-label::after {
    right: calc(100% + 28px);
  }
  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 1rem;
    column-gap: 1.5rem;
  }
}

/* Mobile: Labels center below each layer inside the gaps */
@media (max-width: 680px) {
  .layer-label {
    left: 50%;
    top: auto;
    bottom: -22px;
    transform: translateX(-50%) translateY(5px);
    background: rgba(10, 8, 5, 0.92);
    border-color: rgba(245, 173, 68, 0.3);
    font-size: 0.58rem;
    padding: 4px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  }
  .layer-label::before,
  .layer-label::after {
    display: none !important; /* hide connectors on mobile */
  }
  .burger--revealed .layer-label {
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 600px) {
  :root {
    --burger-width: 268px;
    --bun-height: 62px;
    --patty-height: 30px;
    --lettuce-height: 17px;
  }

  .scene {
    padding: 1.5rem 1rem 2.5rem;
    gap: 1.5rem;
  }

  .hero-title {
    font-size: 2rem;
  }
}

@media (max-width: 420px) {
  :root {
    --burger-width: 218px;
    --bun-height: 50px;
    --patty-height: 22px;
    --lettuce-height: 13px;
  }

  .hero-title {
    font-size: 1.7rem;
  }
  .seed {
    transform: scale(0.75);
  }

  .onion__ring--1 {
    width: 56px;
  }
  .onion__ring--2 {
    width: 40px;
  }
  .onion__ring--3 {
    width: 50px;
  }

  .tomato__slice--1 {
    width: 80px;
  }
  .tomato__slice--2 {
    width: 60px;
  }

  .bun-bottom__base {
    height: 10px;
  }

  .tech-showcase {
    padding: 1rem;
  }
  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 320px) {
  :root {
    --burger-width: 190px;
  }
}