/* ==========================================================================
   Green Grass — Exploded Salad
   Scoped styles (all classes prefixed .es-) so nothing leaks into the theme.
   ========================================================================== */
.es-embed{
  position:relative; width:100%; background:#fff;
  --es-grass:#1f9d4d; --es-grass-deep:#0d5a2c; --es-fg:#10231a;
}
.es-embed *{ box-sizing:border-box; }

/* Pinned stage — sticks to the viewport while the .es-embed track scrolls past */
.es-stage{
  position:-webkit-sticky; position:sticky; top:0;
  height:100vh; width:100%; overflow:hidden; background:#fff;
}
.es-canvas{ display:block; width:100%; height:100%; }

/* -------- Ingredient callout overlay -------- */
.es-overlay{
  position:absolute; inset:0; pointer-events:none;
  opacity:0; transition:opacity 150ms linear;
}
.es-label{
  position:absolute; display:flex; align-items:center; gap:.75rem;
  transform:translateY(-50%);
}
.es-label.es-left{ left:2rem; right:68%; flex-direction:row; }
.es-label.es-right{ left:68%; right:2rem; flex-direction:row-reverse; }
.es-label .es-txt{
  flex:none; font-size:1rem; font-weight:500; line-height:1.15;
  letter-spacing:-.01em; color:var(--es-fg);
}
.es-label.es-left .es-txt{ text-align:left; }
.es-label.es-right .es-txt{ text-align:right; }
.es-label .es-line{ flex:1; height:1px; background:rgba(16,35,26,.3); }
.es-label .es-dot{ flex:none; width:6px; height:6px; border-radius:50%; background:var(--es-grass); }

/* -------- Title / chrome -------- */
.es-title{
  position:absolute; top:1.25rem; left:1.25rem; margin:0;
  display:flex; align-items:center; gap:.5rem;
  font-size:.6875rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; color:var(--es-grass-deep);
}
.es-pip{ width:8px; height:8px; border-radius:50%; background:var(--es-grass); display:inline-block; flex:none; }
.es-counter{
  position:absolute; top:1.25rem; right:1.25rem;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.6875rem;
  color:rgba(13,90,44,.7); font-variant-numeric:tabular-nums;
}
.es-hint{
  position:absolute; left:0; right:0; bottom:2.5rem; text-align:center;
  color:var(--es-grass-deep); font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.25em;
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.es-arrow{ display:block; font-size:1.15rem; margin-top:.35rem; letter-spacing:0; animation:es-bounce 1s infinite; }
.es-pbar{ position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(0,0,0,.05); }
.es-pbar-fill{ height:100%; background:var(--es-grass); width:0; }

/* -------- Loading overlay -------- */
.es-loader{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1rem; background:#fff;
  transition:opacity .6s;
}
.es-loader-title{
  display:flex; align-items:center; gap:.5rem; font-size:.8125rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.2em; color:var(--es-grass-deep);
}
.es-dotpulse{ width:8px; height:8px; border-radius:50%; background:var(--es-grass); animation:es-pulse 1.2s infinite; }
.es-loader-track{ width:13rem; height:5px; border-radius:999px; background:rgba(31,157,77,.15); overflow:hidden; }
.es-loader-fill{ height:100%; background:var(--es-grass); width:0; border-radius:999px; transition:width .2s; }
.es-loader-count{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; color:rgba(13,90,44,.6); }

@keyframes es-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }
@keyframes es-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

@media (max-width:640px){
  .es-label.es-left{ left:1rem; right:68%; }
  .es-label.es-right{ left:68%; right:1rem; }
  .es-label{ gap:.375rem; }
  .es-label .es-txt{ font-size:.875rem; max-width:26vw; }
}