:root {
  --ink: #29460f;
  --transition-duration: 2000ms;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
html { background: #a8c64a; }
body {
  overflow: hidden;
  background: #a8c64a;
  color: var(--ink);
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}
.hero.is-dragging { cursor: grabbing; }

.stage,
.layer-root,
.background-panel,
.title-panel,
.ingredient-panel,
.food-panel,
.label-panel {
  position: absolute;
  inset: 0;
}

.stage { overflow: hidden; }
.layer-root { pointer-events: none; overflow: hidden; }
.background-root { z-index: 1; }
.title-root { z-index: 2; }
.ingredient-root { z-index: 3; }
.food-root { z-index: 4; }
.label-root { z-index: 5; }

.background-panel,
.title-panel,
.ingredient-panel,
.food-panel,
.label-panel {
  will-change: transform;
  transform: translate3d(var(--layer-x, 0px), 0, 0);
}

.background-panel {
  background:
    radial-gradient(circle at 50% 43%, rgba(255,255,255,.28) 0, rgba(255,255,255,.13) 18%, rgba(255,255,255,0) 43%),
    var(--slide-bg);
}

.title-panel {
  padding: 0;
  overflow: hidden;
}

/*
  Keep the unscaled word anchored to the exact viewport centre.
  The previous grid-based centring allowed the implicit grid track to grow to
  the word's natural width, which shifted long titles to the right after
  horizontal compression. The anchor stays centred while only the glyphs are
  compressed, so every complete word remains visible.
*/
.title-anchor {
  position: absolute;
  left: 50%;
  top: 48.5%;
  transform: translate(-50%, -50%);
  transform-origin: center;
  width: max-content;
  height: max-content;
}

.hero-title {
  display: block;
  width: max-content;
  max-width: none;
  margin: 0;
  color: var(--slide-ink);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: "Bowlby One SC", "Arial Black", Impact, sans-serif;
  font-size: clamp(14rem, var(--title-size, 54vh), 42rem);
  font-weight: 400;
  line-height: .62;
  letter-spacing: -.055em;
  transform: scaleX(var(--title-fit-x, .58)) scaleY(1.30);
  transform-origin: center center;
  font-kerning: normal;
  will-change: transform;
}

.food-track {
  position: absolute;
  left: var(--food-x, 50%);
  top: var(--food-y, 48.5%);
  width: min(var(--food-size, 39vw), 690px);
  aspect-ratio: 1;
  transform:
    translate(-50%, -50%)
    translate3d(var(--track-x, 0px), var(--track-y, 0px), 0)
    rotate(var(--track-rotate, 0deg))
    scale(var(--track-scale, 1));
  transform-origin: center;
  will-change: transform;
}

.food-float {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  animation: food-float var(--float-time, 6.8s) ease-in-out infinite;
  animation-delay: var(--float-delay, -2s);
  will-change: transform;
}

.food-angle {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform: rotate(var(--food-angle, 0deg));
}

.food-angle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 27px rgba(43, 23, 8, .17));
  pointer-events: none;
}

.ingredient-track {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: 1;
  transform:
    translate(-50%, -50%)
    translate3d(var(--track-x, 0px), var(--track-y, 0px), 0)
    rotate(var(--track-rotate, 0deg))
    scale(var(--track-scale, 1));
  transform-origin: center;
  will-change: transform;
}

.ingredient-float {
  width: 100%;
  height: 100%;
  animation: ingredient-float var(--float-time, 6s) ease-in-out infinite;
  animation-delay: var(--float-delay, -1s);
  will-change: transform;
}

.ingredient-spin {
  width: 100%;
  height: 100%;
  animation: ingredient-spin var(--spin-time, 16s) linear infinite;
  animation-delay: var(--spin-delay, -3s);
  will-change: transform;
}

.ingredient-spin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 15px 14px rgba(42, 24, 9, .13));
  pointer-events: none;
}

.label-panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  padding: 0 clamp(40px, 7.8vw, 150px) clamp(32px, 5.2vh, 62px);
  color: var(--slide-ink);
}

.flavor-label {
  font-size: clamp(13px, 1.08vw, 20px);
  font-family: "Archivo", Arial, Helvetica, sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.flavor-label:nth-child(1) { justify-self: start; }
.flavor-label:nth-child(2) { justify-self: center; }
.flavor-label:nth-child(3) { justify-self: end; }

@keyframes food-float {
  0%, 100% { transform: translate3d(-5px, -9px, 0) rotate(-.7deg); }
  38% { transform: translate3d(7px, 8px, 0) rotate(.9deg); }
  72% { transform: translate3d(-2px, 4px, 0) rotate(.15deg); }
}

@keyframes ingredient-float {
  0%, 100% { transform: translate3d(-4px, -7px, 0); }
  44% { transform: translate3d(7px, 8px, 0); }
  74% { transform: translate3d(-3px, 4px, 0); }
}

@keyframes ingredient-spin {
  from { transform: rotate(var(--start-rotation, 0deg)); }
  to { transform: rotate(calc(var(--start-rotation, 0deg) + 360deg)); }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .hero-title {
    font-size: clamp(12rem, var(--tablet-title-size, 48vh), 31rem);
    transform: scaleX(var(--title-fit-x, .56)) scaleY(1.31);
  }
  .food-track { width: min(var(--tablet-food-size, 53vw), 560px); }
  .ingredient-track { width: var(--tablet-size); }
}

@media (max-width: 640px) {
  .hero { min-height: 560px; }
  .title-panel { padding: 0; }
  .hero-title {
    font-size: clamp(10rem, var(--mobile-title-size, 40vh), 25rem);
    line-height: .60;
    letter-spacing: -.06em;
    transform: scaleX(var(--title-fit-x, .54)) scaleY(1.32);
  }
  .food-track {
    top: var(--mobile-food-y, 48.5%);
    width: min(var(--mobile-food-size, 72vw), 500px);
  }
  .ingredient-track { width: var(--mobile-size); }
  .label-panel { padding: 0 18px max(30px, 6.5vh); }
  .flavor-label { font-size: clamp(11px, 3vw, 15px); font-weight: 800; letter-spacing: .045em; }
}

@media (max-height: 620px) and (min-width: 641px) {
  .hero-title { font-size: clamp(11rem, var(--title-size, 50vh), 29rem); }
  .food-track { width: min(34vw, 480px); }
  .label-panel { padding-bottom: 24px; }
}