/* =========================================================
   STEP 1 — SHAMPOO (About Me) — scoped under .lvl-1
   Two layouts on the "stage" size container:
     wide  (landscape): Shruti on the left, a right column with
                        caption / story map / trolley
     tall  (portrait):  caption on top, Shruti in the middle,
                        a vanity counter along the bottom
   ========================================================= */

.lvl-1 {
  --ch: min(95cqh, 62cqw);            /* client height */
  --cw: calc(var(--ch) * .8125);      /* seat width (kit chair, 520×640) */
  --cl: max(1cqw, calc(27cqw - var(--cw) / 2));
  --col: calc(var(--cl) + var(--cw) + 1.5cqw); /* right column starts here */
  --pack-h: min(36cqh, 26cqw);
  --ns: clamp(48px, 17cqmin, 96px);   /* story-map node size (resolves inside the map field) */
  --big: clamp(86px, 21cqmin, 156px); /* the big key-line bubble */
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

/* stand-in background (only used if the kit's scene is missing) */
.lvl-1 .l1-standin-scene {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 28% 45%, #fff 0%, #fbeaff 45%, transparent 75%), linear-gradient(180deg, #ffe9f4, #efe4ff);
}

/* ---------------- Shruti ---------------- */
.lvl-1 .l1-client {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: var(--cl);
  height: var(--ch);
  aspect-ratio: 520 / 640;
  transform-origin: 50% 100%;
  transition: transform .8s var(--ease-out), filter .6s ease;
  animation: l1-client-in .8s var(--ease-out) both;
}
.lvl-1 .l1-client > svg, .lvl-1 .l1-client > .salon-seat { width: 100%; height: 100%; max-width: none; overflow: visible; }
/* the kit's chair art sits over the client: let pointer events reach her hair;
   the face zone is only used for measuring here, so taps on it count as the head */
.lvl-1 .l1-client .salon-chair,
.lvl-1 .l1-client .salon-zone--face { pointer-events: none; }
@keyframes l1-client-in { from { opacity: 0; transform: translateY(6%) scale(.97); } }
.lvl-1.is-shine .l1-client { animation: l1-shine 1.4s ease-out; }
@keyframes l1-shine {
  0% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  30% { filter: brightness(1.12) drop-shadow(0 0 22px rgba(255, 255, 255, .95)); }
  100% { filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

/* "put it here" marker on the crown */
.lvl-1 .l1-target {
  position: absolute;
  z-index: 6;
  width: clamp(44px, 10cqmin, 76px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.lvl-1[data-phase="apply"] .l1-target,
.lvl-1[data-phase="rinse"] .l1-target { opacity: 1; }
.lvl-1 .l1-target__ripple {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 2px rgba(255, 95, 168, .45), 0 0 18px rgba(255, 95, 168, .55);
  animation: l1-ripple 1.8s ease-out infinite;
}
.lvl-1 .l1-target__ripple:nth-child(2) { animation-delay: .9s; }
@keyframes l1-ripple { 0% { transform: scale(.25); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.lvl-1 .l1-target__pin {
  position: absolute;
  left: 50%; bottom: 62%;
  width: 46%; aspect-ratio: 1;
  margin-left: -23%;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 50% 50%, #fff 0 22%, transparent 24%), linear-gradient(135deg, #ffb3d6, var(--pink) 60%, var(--pink-deep));
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(214, 51, 132, .45);
  transform: rotate(-45deg);
  animation: l1-pin 1.2s var(--ease-in-out) infinite;
}
@keyframes l1-pin { 50% { translate: 0 -8px; } }
.lvl-1:has(.l1-grab.is-held, .l1-grab.is-dragging) .l1-target__ripple { border-color: #fff; box-shadow: 0 0 0 3px var(--pink), 0 0 26px rgba(255, 95, 168, .9); }

/* ---------------- top slot: lather meter + caption ---------------- */
.lvl-1 .l1-info {
  position: absolute;
  z-index: 6;
  left: var(--col);
  right: 3cqw;
  top: 4cqh;
  display: grid;
  justify-items: center;
  align-items: start;
  pointer-events: none;
}
.lvl-1 .l1-info > * { grid-area: 1 / 1; }
.lvl-1 .l1-info .l1-meter { align-self: start; }

.lvl-1 .l1-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 300px);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px var(--blush-2), 0 10px 24px rgba(150, 40, 110, .16);
  backdrop-filter: blur(6px);
  transition: opacity .4s ease, transform .4s var(--ease-pop);
}
.lvl-1[data-phase="apply"] .l1-meter,
.lvl-1[data-phase="squirt"] .l1-meter { opacity: .7; }
.lvl-1 .l1-meter__label { color: var(--pink-deep); font-size: .62rem; }
.lvl-1 .l1-meter__track {
  position: relative;
  flex: 1;
  height: 16px;
  border-radius: 99px;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(120, 40, 110, .25), 0 0 0 2px var(--blush);
  overflow: hidden;
}
.lvl-1 .l1-meter__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 40%, rgba(255, 255, 255, .95) 0 2.5px, transparent 3px) 0 0 / 14px 16px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .8) 0 1.8px, transparent 2.3px) 0 0 / 11px 16px,
    linear-gradient(90deg, #8fd3ff, #b79cff 55%, #ff8cc4);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7);
}
.lvl-1 .l1-meter__pct { min-width: 3.6ch; text-align: right; color: var(--ink-2); font-size: .66rem; }
.lvl-1 .l1-meter.is-full { box-shadow: 0 0 0 2px var(--pink-2), 0 0 26px rgba(255, 95, 168, .45); }
.lvl-1 .l1-info.is-say .l1-meter { opacity: 0; transform: translateY(-10px) scale(.9); }

/* Shruti's caption: a glossy speech bubble */
.lvl-1 .l1-say {
  position: relative;
  width: min(100%, 540px);
  padding: 12px 18px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #fff 60%, #fff4fa 100%);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--pink-2), 0 16px 34px rgba(150, 40, 110, .22);
  opacity: 0;
  transform: translateY(8px) scale(.94);
  transition: opacity .35s ease, transform .45s var(--ease-pop);
}
.lvl-1 .l1-say::before { /* tail → Shruti */
  content: '';
  position: absolute;
  left: -13px; top: 38%;
  width: 20px; height: 20px;
  background: #fff;
  border-left: 2px solid var(--pink-2);
  border-bottom: 2px solid var(--pink-2);
  border-radius: 0 0 0 5px;
  transform: rotate(45deg);
}
.lvl-1 .l1-info.is-say .l1-say { opacity: 1; transform: none; }
.lvl-1 .l1-say__name {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  color: #fff;
  font-size: .6rem;
}
.lvl-1 .l1-say__l1 {
  font-size: clamp(1rem, .5rem + 1.9cqmin, 1.4rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
  min-height: 1.3em;
}
.lvl-1 .l1-say__l2 {
  margin-top: 4px;
  font: italic 800 clamp(1.1rem, .45rem + 2.4cqmin, 1.8rem) / 1.12 var(--font-display);
  text-wrap: balance;
  color: var(--pink-deep);
  text-shadow: 0 2px 0 #fff, 0 6px 16px rgba(255, 95, 168, .25);
}
.lvl-1 .l1-say__l2:empty { display: none; }
.lvl-1 .l1-say__l2.is-on { animation: spa-fade-up .4s var(--ease-out); }

/* ---------------- product podium ---------------- */
.lvl-1 .l1-cart {
  --pod-h: calc(var(--pack-h) * .36);
  position: absolute;
  z-index: 4;
  left: var(--col);
  right: 3cqw;
  bottom: 3cqh;
  height: calc(var(--pack-h) + var(--pod-h) * .75);
  transition: opacity .45s ease, transform .6s var(--ease-out);
  animation: l1-cart-in .7s .15s var(--ease-out) both;
  pointer-events: none;
}
@keyframes l1-cart-in { from { opacity: 0; transform: translateY(12%) scale(.94); } }
.lvl-1 .l1-cart__glow {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(var(--pack-h) * 1.3);
  height: calc(var(--pack-h) * 1.3);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(236, 224, 255, .6) 55%, transparent);
  animation: halo-breathe 3.2s ease-in-out infinite;
}
.lvl-1 .l1-cart__podium {
  position: absolute;
  left: 50%; bottom: 0;
  width: calc(var(--pack-h) * .82);
  height: var(--pod-h);
  transform: translateX(-50%);
}
.lvl-1 .l1-podium__art { width: 100%; height: 100%; overflow: visible; }
.lvl-1 .l1-cart__items {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--pod-h) * .62);
  height: var(--pack-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* grabbable items */
.lvl-1 .l1-grab {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s var(--ease-pop), opacity .35s ease, filter .3s ease;
  filter: drop-shadow(0 14px 14px rgba(110, 60, 150, .24));
}
.lvl-1 .l1-grab:hover { transform: translateY(-6px) rotate(-2deg) scale(1.03); }
.lvl-1 .l1-grab:active { cursor: grabbing; }
.lvl-1 .l1-grab[hidden] { display: none; }
.lvl-1 .l1-pack { height: 100%; min-width: 44px; display: flex; align-items: flex-end; }
.lvl-1 .l1-pack > svg { position: relative; height: 100%; width: auto; max-width: none; }
.lvl-1 .l1-pack__halo {
  position: absolute; left: 50%; bottom: 8%;
  width: 150%; aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(233, 220, 255, .7) 40%, transparent 70%);
  animation: halo-breathe 3s ease-in-out infinite;
  pointer-events: none;
}
.lvl-1[data-phase="apply"] .l1-pack { animation: l1-bounce 1.5s var(--ease-in-out) infinite; }
.lvl-1[data-phase="rinse"] .l1-shower { animation: l1-bounce 1.5s var(--ease-in-out) infinite; }
@keyframes l1-bounce {
  0%, 100% { translate: 0 0; }
  18% { translate: 0 -12px; }
  32% { translate: 0 0; }
  42% { translate: 0 -5px; }
  52% { translate: 0 0; }
}
.lvl-1 .l1-pack.is-used { opacity: 0; transform: scale(.8); pointer-events: none; animation: none; }
.lvl-1 .l1-shower { width: calc(var(--pack-h) * 1.08); aspect-ratio: 120 / 100; margin-bottom: 2%; }
.lvl-1 .l1-shower > svg { width: 100%; height: 100%; }
.lvl-1 .l1-shower:not([hidden]) { animation: spa-pop-in .5s var(--ease-pop) both; }
.lvl-1[data-phase="rinse"] .l1-shower:not([hidden]) { animation: spa-pop-in .5s var(--ease-pop) both, l1-bounce 1.5s .5s var(--ease-in-out) infinite; }
.lvl-1 .l1-shower.is-used { opacity: 0; pointer-events: none; }
.lvl-1 .l1-grab.is-armed { transform: translateY(-10px) scale(1.06); filter: drop-shadow(0 0 16px rgba(255, 95, 168, .8)); }

/* "Drag me!" sticker */
.lvl-1 .l1-tag {
  position: absolute;
  left: 50%; top: -6px;
  transform: translate(-50%, -100%) rotate(-4deg);
  padding: 5px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(214, 51, 132, .35);
  color: #fff;
  font-size: .58rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.lvl-1 .l1-tag::after {
  content: '';
  position: absolute; left: 50%; bottom: -7px;
  width: 10px; height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--pink);
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
}
.lvl-1[data-phase="apply"] .l1-pack .l1-tag,
.lvl-1[data-phase="rinse"] .l1-shower .l1-tag { opacity: 1; }

/* ---------------- story map ---------------- */
.lvl-1 .l1-map {
  position: absolute;
  z-index: 5;
  left: var(--col);
  right: 2.5cqw;
  top: 32cqh;
  bottom: 3cqh;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .62);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(220, 208, 255, .8), 0 14px 30px rgba(110, 60, 150, .18);
  backdrop-filter: blur(8px);
  overflow: hidden;
  animation: l1-map-in .55s var(--ease-pop) both;
  transition: opacity .45s ease, transform .5s var(--ease-out);
}
.lvl-1 .l1-map[hidden] { display: none; }
@keyframes l1-map-in { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.lvl-1 .l1-map__title {
  flex: none;
  padding: 6px 12px;
  background: linear-gradient(180deg, #ece5ff 0%, #cfc0ff 48%, #bba7ff 52%, #e0d6ff 100%);
  border-bottom: 2px solid #fff;
  color: #3f2a8a;
  font-size: .66rem;
}
.lvl-1 .l1-map__field {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
  container-name: l1map;
  background:
    radial-gradient(circle, rgba(183, 156, 255, .28) 1.4px, transparent 1.8px) 0 0 / 22px 22px,
    linear-gradient(160deg, rgba(255, 240, 248, .8), rgba(236, 228, 255, .8));
}
.lvl-1 .l1-map__svg { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.lvl-1 .l1-route { fill: none; stroke: #b79cff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .1 12; opacity: .55; }
.lvl-1 .l1-trail { opacity: 0; transition: opacity .2s; }
.lvl-1 .l1-trail.is-on { opacity: 1; }
.lvl-1 .l1-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lvl-1 .l1-trail__glow { stroke: #fff; stroke-width: 13; opacity: .85; }
.lvl-1 .l1-trail__line { stroke-width: 6; }
.lvl-1 .l1-trail__dots { stroke: #fff; stroke-width: 2.6; stroke-dasharray: .1 11; opacity: 0; transition: opacity .3s; }
.lvl-1 .l1-trail.is-drawn .l1-trail__dots { opacity: 1; animation: l1-march 1.2s linear infinite; }
@keyframes l1-march { to { stroke-dashoffset: -22; } }
.lvl-1 .l1-map.is-complete .l1-trail__line { animation: l1-trail-glow 1.4s ease-in-out 2; }
@keyframes l1-trail-glow { 50% { stroke-width: 9; } }

.lvl-1 .l1-map__star {
  position: absolute;
  z-index: 3;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.5rem;
  text-shadow: 0 0 8px #ff5fa8, 0 0 16px #ff8cc4;
  opacity: 0;
  pointer-events: none;
}
.lvl-1 .l1-map__star.is-on { opacity: 1; }
.lvl-1 .l1-map__twist {
  position: absolute;
  z-index: 1;
  padding: .35em .7em;
  border-radius: 8px;
  background: var(--butter);
  border: 2px dashed rgba(120, 80, 20, .35);
  font: 400 .58rem var(--font-pixel);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b4a12;
  white-space: nowrap;
  transform: translate(-50%, -115%) rotate(-6deg) scale(0);
  opacity: 0;
  pointer-events: none;
}
.lvl-1 .l1-map__twist.is-on { opacity: 1; transform: translate(-50%, -115%) rotate(-6deg); transition: transform .5s var(--ease-pop) .45s, opacity .2s .45s; }

/* nodes: zig-zag level map */
.lvl-1 .l1-node {
  --x: 50; --y: 50;
  position: absolute;
  z-index: 2;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: var(--ns);
  height: var(--ns);
  margin: calc(var(--ns) / -2) 0 0 calc(var(--ns) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
  animation: spa-float 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.8s);
}
.lvl-1 .l1-node:nth-of-type(1) { --x: 17; --y: 64; }
.lvl-1 .l1-node:nth-of-type(2) { --x: 40; --y: 26; }
.lvl-1 .l1-node:nth-of-type(3) { --x: 62; --y: 64; }
.lvl-1 .l1-node:nth-of-type(4) { --x: 84; --y: 26; }
@container l1map (aspect-ratio < 1.6) {
  .lvl-1 .l1-node:nth-of-type(1) { --y: 70; }
  .lvl-1 .l1-node:nth-of-type(2) { --y: 30; }
  .lvl-1 .l1-node:nth-of-type(3) { --y: 70; }
  .lvl-1 .l1-node:nth-of-type(4) { --y: 30; }
}
@container l1map (max-height: 200px) {
  .lvl-1 .l1-node:nth-of-type(odd) { --y: 57; }
  .lvl-1 .l1-node:nth-of-type(even) { --y: 23; }
  .lvl-1 .l1-node__label { padding: 1px 7px 2px; top: calc(100% + 2px); }
  .lvl-1 .l1-node__word { font-size: .8rem; }
}
.lvl-1 .l1-node > span { position: absolute; pointer-events: none; }
.lvl-1 .l1-node__disc {
  inset: 12%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  opacity: .55;
  filter: saturate(.55);
  transition: opacity .3s, filter .3s, inset .35s var(--ease-pop), background .3s;
}
.lvl-1 .l1-node__disc svg { width: 100%; height: 100%; }
.lvl-1 .l1-node__shell {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, 0) 16%),
    radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .6) 0 4%, rgba(255, 255, 255, 0) 9%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .05) 55%, rgba(207, 238, 255, .5) 72%, rgba(255, 199, 222, .65) 86%, rgba(220, 208, 255, .9) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85), 0 6px 16px rgba(110, 60, 150, .18);
}
.lvl-1 .l1-node__num {
  top: -6%; right: -6%;
  display: grid;
  place-items: center;
  width: 38%; height: 38%;
  min-width: 20px; min-height: 20px;
  border-radius: 50%;
  background: linear-gradient(180deg, #e2d6ff, #a98bff);
  border: 2px solid #fff;
  color: #fff;
  font-size: .62rem;
  box-shadow: 0 3px 8px rgba(94, 64, 196, .35);
  transition: transform .3s var(--ease-pop), opacity .3s;
}
.lvl-1 .l1-node__glow {
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 95, 168, .0) 50%, rgba(255, 95, 168, .35) 64%, rgba(255, 140, 196, 0) 74%);
  opacity: 0;
}
.lvl-1 .l1-node.is-next .l1-node__glow { opacity: 1; animation: l1-glow 1.3s ease-in-out infinite; }
.lvl-1 .l1-node.is-next .l1-node__num { background: linear-gradient(180deg, var(--pink-2), var(--pink)); transform: scale(1.18); box-shadow: 0 0 0 3px rgba(255, 95, 168, .25), 0 3px 10px rgba(214, 51, 132, .45); }
.lvl-1 .l1-node.is-next .l1-node__disc { opacity: .9; filter: none; }
.lvl-1 .l1-node.is-next { animation: l1-node-bob 1.3s ease-in-out infinite; }
@keyframes l1-node-bob { 50% { transform: translateY(-6px) scale(1.06); } }
@keyframes l1-glow { 50% { transform: scale(1.12); opacity: .6; } }
.lvl-1 .l1-node__label {
  left: 50%; top: calc(100% + 4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 3px 9px 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--pink-2), 0 6px 14px rgba(150, 40, 110, .2);
  white-space: nowrap;
  transform: translate(-50%, -6px) scale(.6);
  opacity: 0;
  transition: transform .45s var(--ease-pop), opacity .25s;
}
.lvl-1 .l1-node__lv { font-size: .5rem; color: var(--pink-deep); }
.lvl-1 .l1-node__word { font: italic 800 clamp(.82rem, .45rem + 1.35cqmin, 1.15rem) / 1.1 var(--font-display); color: var(--ink); }

/* popped: the bubble bursts, the chapter sticker stays */
.lvl-1 .l1-node.is-done { animation: none; cursor: default; }
.lvl-1 .l1-node.is-done .l1-node__shell { animation: l1-shell-pop .32s ease-out forwards; }
.lvl-1 .l1-node.is-done .l1-node__disc {
  inset: 2%;
  opacity: 1;
  filter: none;
  padding: 14%;
  background: radial-gradient(circle at 40% 30%, #fff 0%, #fff 45%, #ffe6f2 100%);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--pink-2), 0 8px 18px rgba(150, 40, 110, .25);
  animation: spa-pop-in .5s var(--ease-pop);
}
.lvl-1 .l1-node.is-done .l1-node__num { background: linear-gradient(180deg, #ffb3d6, var(--pink)); transform: scale(.9); }
.lvl-1 .l1-node.is-done .l1-node__label { opacity: 1; transform: translate(-50%, 0); }
.lvl-1 .l1-map.is-complete .l1-node.is-done .l1-node__disc { animation: spa-pulse .5s var(--ease-pop) calc(var(--i) * .12s); }
@keyframes l1-shell-pop {
  0% { transform: scale(1); opacity: 1; }
  60% { transform: scale(1.35); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------------- the big key-line bubble + megaphone ---------------- */
.lvl-1 .l1-big {
  position: absolute;
  z-index: 8;
  width: var(--big);
  height: var(--big);
  margin: calc(var(--big) / -2) 0 0 calc(var(--big) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  touch-action: manipulation;
}
.lvl-1 .l1-big[hidden] { display: none; }
.lvl-1 .l1-big.is-ready { animation: l1-big-wobble 2.4s ease-in-out infinite; }
@keyframes l1-big-wobble {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  25% { transform: translateY(-6px) scale(1.04, .97); }
  50% { transform: translateY(-2px) scale(.97, 1.03); }
  75% { transform: translateY(-8px) scale(1.02, .99); }
}
.lvl-1 .l1-big__shell {
  position: absolute; inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .98) 0 7%, rgba(255, 255, 255, 0) 15%),
    radial-gradient(circle at 72% 80%, rgba(255, 255, 255, .7) 0 3%, rgba(255, 255, 255, 0) 8%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .12) 50%, rgba(207, 238, 255, .55) 70%, rgba(255, 199, 222, .7) 85%, rgba(220, 208, 255, .95) 100%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 1px rgba(183, 156, 255, .35), 0 12px 30px rgba(110, 60, 150, .22), 0 0 36px rgba(255, 255, 255, .7);
}
.lvl-1 .l1-big__shell::after { /* rotating iridescent sheen */
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 180, 220, .35), rgba(180, 220, 255, .35), rgba(200, 255, 230, .3), rgba(255, 240, 180, .3), rgba(255, 180, 220, .35));
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 72%);
  mask: radial-gradient(circle, transparent 62%, #000 72%);
  animation: spa-spin 6s linear infinite;
}
.lvl-1 .l1-big__icon { position: absolute; inset: 22%; animation: spa-wiggle 3s ease-in-out infinite; }
.lvl-1 .l1-big__icon svg { width: 100%; height: 100%; }
.lvl-1 .l1-big.is-popped { pointer-events: none; animation: none; }
.lvl-1 .l1-big.is-popped .l1-big__shell { animation: l1-shell-pop .26s ease-out forwards; }
.lvl-1 .l1-big.is-popped .l1-big__icon { animation: l1-flip-out .24s ease-in forwards; }
@keyframes l1-flip-out { to { transform: rotateY(90deg) scale(.8); opacity: .4; } }
.lvl-1 .l1-big:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 4px; }

.lvl-1 .l1-mega {
  position: absolute;
  z-index: 8;
  width: calc(var(--big) * .92);
  height: calc(var(--big) * .92);
  margin: calc(var(--big) * -.46) 0 0 calc(var(--big) * -.46);
  padding: calc(var(--big) * .16);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #fff 0%, #fff 50%, #ffe6f2 100%);
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--pink-2), 0 14px 30px rgba(150, 40, 110, .3), 0 0 40px rgba(255, 140, 196, .5);
  pointer-events: none;
}
.lvl-1 .l1-mega[hidden] { display: none; }
.lvl-1 .l1-mega svg { width: 100%; height: 100%; }
.lvl-1 .l1-mega.is-on { animation: l1-flip-in .6s var(--ease-pop) both; }
@keyframes l1-flip-in { from { transform: rotateY(-90deg) scale(.6); opacity: 0; } 60% { transform: rotateY(10deg) scale(1.08); opacity: 1; } }
.lvl-1 .l1-mega.is-away { transition: transform .5s var(--ease-in-out), opacity .45s ease; transform: translateY(-30px) scale(.4); opacity: 0; }

/* ---------------- fx layer ---------------- */
.lvl-1 .l1-fx { position: absolute; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.lvl-1 .l1-fx > * { position: absolute; pointer-events: none; }

.lvl-1 .l1-pour { height: clamp(90px, 22cqmin, 180px); transform-origin: 50% 50%; transform: translate(-50%, -125%) rotate(150deg); }
.lvl-1 .l1-pour > svg { height: 100%; width: auto; max-width: none; filter: drop-shadow(0 10px 12px rgba(110, 60, 150, .25)); }
.lvl-1 .l1-dollop {
  width: clamp(34px, 8cqmin, 64px);
  aspect-ratio: 1.4;
  transform: translate(-50%, -30%);
  border-radius: 55% 55% 48% 48% / 65% 65% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #fff 0 18%, #f4f9ff 35%, #dcebff 62%, #cdbdff 100%);
  box-shadow: 0 4px 10px rgba(110, 60, 150, .25), inset 0 -4px 8px rgba(160, 140, 230, .35);
  animation: l1-dollop .45s var(--ease-pop) both;
  transition: opacity .3s;
}
@keyframes l1-dollop { from { transform: translate(-50%, -30%) scale(.2, .6); } 60% { transform: translate(-50%, -30%) scale(1.15, .85); } }
.lvl-1 .l1-drip {
  width: 9px; height: 13px;
  margin-left: -4.5px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 30%, #fff, #dcebff 60%, #cdbdff);
  animation: l1-drip .42s ease-in both;
  animation-delay: calc(var(--i) * .08s);
}
@keyframes l1-drip { from { transform: translateY(-10px); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(40px); opacity: 0; } }

.lvl-1 .l1-rub {
  width: clamp(54px, 12cqmin, 84px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  animation: l1-rub 1.1s ease-in-out infinite;
}
.lvl-1 .l1-rub__dot {
  width: 42%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffd3e8 60%, #ff8cc4);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 0 20px rgba(255, 95, 168, .7);
}
.lvl-1 .l1-rub b { position: absolute; top: 50%; color: #fff; font: 800 1.6rem/1 var(--font-body); text-shadow: 0 0 6px var(--pink), 0 2px 0 var(--pink-deep); transform: translateY(-55%); }
.lvl-1 .l1-rub__l { left: -8%; }
.lvl-1 .l1-rub__r { right: -8%; }
@keyframes l1-rub { 0%, 100% { translate: -24px 0; } 50% { translate: 24px 0; } }

.lvl-1 .l1-suds {
  display: block;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .98) 0 12%, rgba(255, 255, 255, .2) 30%, rgba(207, 238, 255, .35) 65%, rgba(255, 199, 222, .6) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85);
  animation: l1-rise var(--d, 2s) ease-out forwards;
}
@keyframes l1-rise {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 22cqh)) scale(1); opacity: 0; }
}
.lvl-1 .l1-trailbub {
  display: block;
  width: calc(14px + var(--i) * 8px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0 14%, rgba(255, 255, 255, .2) 34%, rgba(207, 238, 255, .5) 70%, rgba(220, 208, 255, .85));
  box-shadow: inset 0 0 0 1.5px #fff, 0 4px 10px rgba(110, 60, 150, .15);
  animation: spa-pop-in .4s var(--ease-pop) both;
  animation-delay: calc(var(--i) * .15s);
}
.lvl-1 .l1-cheer {
  transform: translate(-50%, -50%);
  font-size: clamp(1.3rem, .6rem + 3cqmin, 2.3rem);
  font-style: italic;
  white-space: nowrap;
  color: #fff;
  -webkit-text-stroke: 1.5px var(--pink);
  text-shadow: 0 3px 0 var(--pink-deep), 0 0 18px rgba(255, 95, 168, .6);
  animation: l1-cheer 1.25s var(--ease-out) forwards;
}
@keyframes l1-cheer {
  0% { transform: translate(-50%, -30%) scale(.4) rotate(-8deg); opacity: 0; }
  25% { transform: translate(-50%, -110%) scale(1.1) rotate(-4deg); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(-50%, -190%) scale(1) rotate(-4deg); opacity: 0; }
}

/* rinse */
.lvl-1 .l1-showerfx { width: clamp(110px, 26cqmin, 220px); aspect-ratio: 120 / 100; transform: rotate(-8deg); transform-origin: 28% 59%; z-index: 2; }
.lvl-1 .l1-showerfx svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(110, 60, 150, .3)); }
.lvl-1 .l1-showerfx.is-on { animation: l1-shower-sway 1.1s ease-in-out infinite; }
@keyframes l1-shower-sway { 0%, 100% { translate: -8px 0; } 50% { translate: 8px 0; } }
.lvl-1 .l1-water {
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .3s ease;
}
.lvl-1 .l1-water.is-on { opacity: 1; }
.lvl-1 .l1-water.is-off { opacity: 0; transition-duration: .5s; }
.lvl-1 .l1-water i {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--x);
  width: 3px;
  border-radius: 3px;
  transform-origin: 50% 0;
  transform: rotate(var(--a, 0deg));
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 8%, #000 65%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 8%, #000 65%, transparent 100%);
  background: repeating-linear-gradient(180deg, rgba(143, 211, 255, 0) 0 16px, rgba(120, 196, 255, .8) 16px 30px, rgba(255, 255, 255, .95) 30px 33px);
  background-size: 3px 68px;
  animation: l1-fall .45s linear infinite;
  animation-delay: calc(var(--dl) * -1);
}
@keyframes l1-fall { to { background-position: 0 68px; } }
.lvl-1 .l1-twinkle {
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: clamp(1rem, 4cqmin, 2rem);
  text-shadow: 0 0 10px #ff8cc4, 0 0 18px #b79cff;
  animation: l1-twinkle 1.3s ease-in-out both;
  animation-delay: calc(var(--i) * .11s);
}
@keyframes l1-twinkle { 0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; } 40% { transform: translate(-50%, -50%) scale(1.3) rotate(45deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0; } }
.lvl-1 .l1-washed {
  position: absolute;
  z-index: 9;
  padding: 6px 14px;
  border-radius: 99px;
  background: linear-gradient(180deg, #dcfff1, #5fdcae);
  border: 2px solid #fff;
  box-shadow: 0 4px 0 #1f8b64, 0 10px 22px rgba(20, 110, 80, .3);
  color: #fff;
  font: 700 .95rem var(--font-body);
  text-shadow: 0 1px 0 rgba(10, 80, 60, .35);
  white-space: nowrap;
  transform: translate(-50%, -120%) scale(0);
  opacity: 0;
  pointer-events: none;
}
.lvl-1 .l1-washed.is-on { opacity: 1; transform: translate(-50%, -120%) scale(1); transition: transform .5s var(--ease-pop), opacity .2s; }

/* ---------------- phases ---------------- */
.lvl-1.is-journey .l1-cart,
.lvl-1[data-phase="massage"] .l1-cart,
.lvl-1[data-phase="pop"] .l1-cart,
.lvl-1[data-phase="twist"] .l1-cart { opacity: 0; transform: translateY(14%) scale(.92); }
.lvl-1.is-rinse .l1-info { opacity: 0; transform: translateY(-12px); transition: opacity .4s ease, transform .4s ease; }
.lvl-1.is-rinse .l1-map { opacity: 0; transform: scale(.9) translateY(-14px); }
.lvl-1.is-rinse .l1-cart { opacity: 1; transform: none; }
.lvl-1.is-rinse[data-phase="rinsing"] .l1-cart,
.lvl-1.is-rinse[data-phase="done"] .l1-cart { opacity: 0; transform: translateY(14%) scale(.92); }
.lvl-1:not([data-phase="apply"]):not([data-phase="squirt"]):not(.is-rinse) .l1-pack { pointer-events: none; }

/* =========================================================
   TALL layout (portrait / squarish): caption on top,
   Shruti in the middle, counter along the bottom
   ========================================================= */
@container stage (aspect-ratio < 1.15) {
  .lvl-1 {
    --top: 21cqh;
    --shelf: 5cqh;
    --js: .56;                         /* Shruti's scale while the story map is open */
    --ch: min(calc(100cqh - var(--top) - var(--shelf)), 132cqw);
    --cw: calc(var(--ch) * .8125);
    --pack-h: 22cqh;
    --big: clamp(80px, 24cqmin, 130px);
  }
  .lvl-1 .l1-client { left: 50%; margin-left: calc(var(--cw) / -2); bottom: var(--shelf); }
  .lvl-1 .l1-info { left: 4cqw; right: 4cqw; top: 1.5cqh; height: calc(var(--top) - 2.5cqh); align-items: center; }
  .lvl-1 .l1-say { padding: 9px 14px 11px; width: min(100%, 440px); }
  .lvl-1 .l1-say::before { left: 50%; top: auto; bottom: -12px; margin-left: -10px; transform: rotate(-45deg); }
  .lvl-1 .l1-say__name { margin-bottom: 3px; }
  .lvl-1 .l1-cart { left: auto; right: 1cqw; bottom: 1cqh; width: calc(var(--pack-h) * 1.25); }
  .lvl-1 .l1-tag { top: 50%; left: auto; right: calc(100% + 8px); transform: translateY(-50%) rotate(-4deg); }
  .lvl-1 .l1-tag::after { left: auto; right: -7px; bottom: 50%; transform: translateY(50%) rotate(-45deg); }

  .lvl-1 .l1-map { left: 3cqw; right: 3cqw; top: var(--top); bottom: auto; height: calc(100cqh - var(--top) - var(--ch) * var(--js) - 1.5cqh); }
  .lvl-1.is-journey .l1-client { transform: translateY(var(--shelf)) scale(var(--js)); }
}
@container stage (aspect-ratio < 1.15) and (max-height: 580px) {
  .lvl-1 { --top: 24cqh; --js: .47; }
  .lvl-1 .l1-say { padding: 7px 12px 9px; border-radius: 18px; }
  .lvl-1 .l1-say__name { font-size: .5rem; }
  .lvl-1 .l1-say__l1 { font-size: .9rem; }
  .lvl-1 .l1-say__l2 { font-size: 1.06rem; }
}

/* short landscape phones */
@container stage (max-height: 420px) and (aspect-ratio >= 1.15) {
  .lvl-1 { --ch: min(97cqh, 62cqw); --ns: clamp(44px, 30cqh, 58px); }
  .lvl-1 .l1-info { top: 2.5cqh; }
  .lvl-1 .l1-say { padding: 7px 14px 9px; border-radius: 18px; }
  .lvl-1 .l1-say__name { font-size: .5rem; margin-bottom: 2px; }
  .lvl-1 .l1-say__l1 { font-size: .95rem; }
  .lvl-1 .l1-say__l2 { font-size: 1.12rem; }
  .lvl-1 .l1-map { top: 35cqh; bottom: 2cqh; border-radius: 16px; }
  .lvl-1 .l1-map__title { padding: 3px 10px; font-size: .5rem; }
  .lvl-1 .l1-node__label { padding: 1px 7px 2px; top: calc(100% + 2px); }
  .lvl-1 .l1-node__word { font-size: .8rem; }
  .lvl-1 { --pack-h: min(40cqh, 22cqw); }
  .lvl-1 .l1-cart { bottom: 2cqh; }
}

/* reduced motion: no bobbing */
@media (prefers-reduced-motion: reduce) {
  .lvl-1 .l1-node, .lvl-1 .l1-big.is-ready, .lvl-1 .l1-grab { animation: none !important; }
}
html.reduce-motion .lvl-1 .l1-node, html.reduce-motion .lvl-1 .l1-big.is-ready, html.reduce-motion .lvl-1 .l1-grab { animation: none !important; }