/* Shared layer for the live prototypes, added on top of the real homepage. */

/* The homepage hides everything that isn't its own layout; prototype parts opt back in. */
html[data-widget='home'] body > .proto:not(#_a):not(#_b):not(#_c):not(#_d):not(#_e):not(#_f):not(#_g):not(#_h):not(#_i):not(#_j) { display: var(--d, block) !important; }

#soup-stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#soup-stage .stage-canvas { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; }
#soup-stage .stage-shadow { position: absolute; z-index: 0; box-shadow: var(--soup-shadow); }
#soup-stage .stage-rim { position: absolute; z-index: 2; box-sizing: border-box; pointer-events: none; }
#soup-stage .stage-hit { position: absolute; z-index: 3; pointer-events: auto; touch-action: none; cursor: grab; }
#soup-stage .stage-hit:active { cursor: grabbing; }

/* While the stage draws the bowl, the homepage's own copy steps aside. */
.soup-stage-on #home-layout { position: relative; z-index: 4; pointer-events: none; }
.soup-stage-on #home-layout button, .soup-stage-on #home-layout a { pointer-events: auto; }
.soup-stage-on #home-layout { background: transparent !important; }
.soup-stage-on #home-layout #view, .soup-stage-on #dish-rim, .soup-stage-on .soup-embed::before,
.soup-stage-on .home-reveal-shadow, .soup-stage-on .home-reveal-art, .soup-stage-on .idle-stir-cue { visibility: hidden !important; }

.proto-label {
  --d: flex;
  position: fixed; bottom: 14px; left: 16px; z-index: 60; font: 12px/1 "Soup Reading Subset", ui-monospace, monospace; color: var(--soup-muted);
  display: flex; gap: 10px; align-items: center; background: color-mix(in srgb, var(--soup-bg) 82%, transparent);
  padding: 8px 12px; border-radius: 99px; border: 1px solid var(--soup-border); backdrop-filter: blur(8px); text-decoration: none;
}
.proto-label b { font-weight: 400; color: var(--soup-text); }
.proto-next { left: auto; right: 16px; }
@media (max-width: 600px) { .proto-label b { display: none; } }

/* Hugeicons: sized to sit with 12–13px labels. */
.hi { width: 16px; height: 16px; flex: none; display: block; }
.explore-icon { display: inline-flex; }

/* The separate, quiet way in. */
.explore {
  position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 50;
  cursor: pointer; background: none; border: 0; padding: 12px 16px; font: 13px "Soup Reading Subset", ui-monospace, monospace; color: var(--soup-muted);
  display: inline-flex; gap: 8px; align-items: center; transition: color .2s, opacity .4s, transform .4s cubic-bezier(.19,1,.22,1);
}
.explore:hover { color: var(--soup-text); }
.explore.gone { opacity: 0; pointer-events: none; transform: translate(-50%, 8px); }
.explore:disabled { opacity: 0; }
.explore[hidden] { visibility: hidden; pointer-events: none; }
.explore.arrived { animation: home-tool-fade 650ms cubic-bezier(.4,0,.2,1) both; }
.explore.gone { animation: none; }

.fade-out { transition: opacity .45s ease; opacity: 0 !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } .explore.arrived { animation: none; } }

.soup-stage-on #recipe-outgoing { visibility: hidden !important; }
.xfade { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; transition: opacity .52s cubic-bezier(.4,0,.2,1); --d: block; }