/* =========================================================
   STEP 0 — ENTER THE SPA (salon lobby). Scoped under .lvl-0.
   Sizes use the stage container (cqw/cqh/cqmin).
   ========================================================= */
.lvl-0 {
  --seat-h: min(80cqh, 60cqw);
  --row-h: min(21cqh, 150px);
  overflow: hidden;
}
.lvl-0 .lvl0-room { position: absolute; inset: 0; z-index: 1; }

/* ---------- Shruti in the spa chair ---------- */
.lvl-0 .lvl0-seat {
  position: absolute;
  left: 50%;
  bottom: -1cqh;
  height: var(--seat-h);
  aspect-ratio: 520 / 640;
  translate: -50% 0;
  padding: 0;
  border: 0;
  border-radius: 44% 44% 14% 14% / 30% 30% 10% 10%;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lvl-0 .lvl0-seat__art { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform .3s var(--ease-pop), filter .3s ease; }
/* fallback when the kit has no seat(): the client alone, feet on the floor */
.lvl-0 .lvl0-seat__art--solo { inset: 2% 11% 20%; width: auto; height: auto; }
.lvl-0 .lvl0-seat:hover .lvl0-seat__art { transform: scale(1.012) translateY(-.6%); }
.lvl-0 .lvl0-seat:active .lvl0-seat__art { transform: scale(.99); }
.lvl-0 .lvl0-seat.is-inviting .lvl0-seat__art { animation: lvl0-bob 3.2s ease-in-out infinite; }
.lvl-0 .lvl0-seat.is-nudge .lvl0-seat__tap { animation: lvl0-nudge .9s var(--ease-pop); }

/* keyboard focus: a ring on the tap badge + a brighter glow (never a frame round the chair) */
.lvl-0 .lvl0-seat:focus-visible { outline: none; }
.lvl-0 .lvl0-seat:focus-visible .lvl0-seat__tap { outline: 3px dashed var(--pink-deep); outline-offset: 5px; }
.lvl-0 .lvl0-seat:focus-visible .lvl0-seat__glow { opacity: 1; animation: none; }

/* towel drop target: the glow lights up instead of the kit's box-shadow frame */
.lvl-0 .lvl0-seat.salon-dropzone.is-drop-ready,
.lvl-0 .lvl0-seat.salon-dropzone.is-drop-hover { box-shadow: none; }
.lvl-0 .lvl0-seat.is-drop-ready .lvl0-seat__art { animation: none; }
.lvl-0 .lvl0-seat.is-drop-ready .lvl0-seat__glow {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(220, 204, 255, .8) 50%, rgba(183, 156, 255, .38) 74%, transparent);
}
.lvl-0 .lvl0-seat.is-drop-hover .lvl0-seat__glow {
  background: radial-gradient(closest-side, #fff, rgba(255, 192, 224, .9) 50%, rgba(255, 95, 168, .35) 76%, transparent);
  animation: none;
  transform: scale(1.06);
}
.lvl-0 .lvl0-seat.is-drop-hover .lvl0-seat__art { transform: scale(1.02) translateY(-1%); }

.lvl-0 .lvl0-seat__glow {
  position: absolute;
  inset: 4% -10% 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 214, 234, .7) 48%, rgba(226, 208, 255, .3) 72%, transparent);
  animation: lvl0-glow 2.6s ease-in-out infinite;
  transition: transform .35s var(--ease-pop);
  pointer-events: none;
}

/* the pulsing "tap here" badge */
.lvl-0 .lvl0-seat__tap {
  position: absolute;
  right: 4%;
  top: 36%;
  width: clamp(44px, 8.5cqmin, 60px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 3px solid #fff;
  background: linear-gradient(180deg, #ffa6d0 0%, #ff5fa8 60%, #e33b8a 100%);
  box-shadow: 0 4px 0 #b8246b, 0 8px 18px rgba(160, 30, 100, .3);
  animation: lvl0-tap 1.5s var(--ease-pop) infinite;
  pointer-events: none;
}
.lvl-0 .lvl0-seat__tap svg { width: 64%; height: 64%; margin: 4% 0 0 6%; filter: drop-shadow(0 1px 0 rgba(120, 10, 70, .35)); }
.lvl-0 .lvl0-seat__tap::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 3px solid var(--pink-2);
  animation: lvl0-ring 1.5s ease-out infinite;
}
.lvl-0.is-begun .lvl0-seat__tap { opacity: 0; transform: scale(.4); transition: opacity .25s, transform .25s; }
.lvl-0.is-begun .lvl0-seat__glow { animation: lvl0-flash .9s ease-out forwards; }
.lvl-0.is-begun .lvl0-seat { cursor: default; }

/* Shruti's little "Hi!" as the appointment starts */
.lvl-0 .lvl0-say {
  position: absolute;
  right: -6%;
  top: 9%;
  z-index: 2;
  padding: 8px 14px 9px;
  border-radius: 18px 18px 18px 6px;
  border: 2px solid #fff;
  background: linear-gradient(180deg, #fff, #ffeef7);
  box-shadow: 0 0 0 2px var(--pink-2), 0 10px 22px rgba(150, 40, 110, .22);
  font: italic 800 clamp(.9rem, 2.4cqmin, 1.2rem)/1.1 var(--font-display);
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) scale(.6);
  transform-origin: 0% 100%;
  transition: opacity .2s ease, transform .45s var(--ease-pop);
  pointer-events: none;
}
.lvl-0 .lvl0-say::after {
  content: '';
  position: absolute;
  left: 10px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 2px solid var(--pink-2);
  border-bottom: 2px solid var(--pink-2);
  transform: rotate(45deg) skew(8deg, 8deg);
  border-bottom-right-radius: 4px;
}
.lvl-0 .lvl0-say.is-on { opacity: 1; transform: none; }

/* ---------- the hanging sign ---------- */
.lvl-0 .lvl0-sign {
  position: absolute;
  left: 3.5cqw;
  top: max(30px, 6cqh);
  width: min(27cqw, 280px);
  padding: 12px 16px 12px;
  border-radius: 18px;
  border: 2px solid #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 238, 247, .95));
  box-shadow: 0 0 0 2px var(--pink-2), 0 12px 26px rgba(150, 40, 110, .2);
  text-align: center;
  transform-origin: 50% -28px;
  animation: lvl0-swing 5.5s ease-in-out infinite;
}
.lvl-0 .lvl0-sign__cords::before,
.lvl-0 .lvl0-sign__cords::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  width: 2px;
  height: 40px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--gold-2) 25%, var(--gold) 100%);
}
.lvl-0 .lvl0-sign__cords::before { left: 20%; transform: rotate(12deg); transform-origin: bottom; }
.lvl-0 .lvl0-sign__cords::after { right: 20%; transform: rotate(-12deg); transform-origin: bottom; }
.lvl-0 .lvl0-sign__lead {
  font-size: clamp(.95rem, 2.1cqw, 1.3rem);
  font-style: italic;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.lvl-0 .lvl0-sign__sub {
  margin-top: 7px;
  font-size: clamp(.56rem, 1.1cqw, .7rem);
  letter-spacing: .04em;
  color: var(--pink-deep);
}
.lvl-0 .lvl0-sign__spark {
  position: absolute;
  right: -10px;
  top: -12px;
  color: #ffc93c;
  font-size: 1.3rem;
  text-shadow: 0 0 8px rgba(255, 255, 255, .9);
  animation: spa-spin 6s linear infinite;
}

/* ---------- glass trolley with the products + towel ---------- */
.lvl-0 .lvl0-trolley {
  position: absolute;
  right: 3cqw;
  bottom: 3cqh;
  width: min(31cqw, 360px);
}
.lvl-0 .lvl0-trolley__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3%;
  height: var(--row-h);
  padding: 0 5%;
}
.lvl-0 .lvl0-packs { display: flex; align-items: flex-end; justify-content: center; gap: 3%; height: 100%; min-width: 0; }
.lvl-0 .lvl0-pack {
  height: calc(var(--ph) * 100%);
  aspect-ratio: var(--ar);
  min-width: 44px;
  min-height: 44px;
  --pad: 0px;
  flex: none;
  cursor: pointer;
  touch-action: manipulation;
  animation: spa-fade-up .5s var(--ease-out) both;
  animation-delay: calc(var(--i) * 80ms + 200ms);
}
.lvl-0 .lvl0-pack .salon-product { filter: drop-shadow(0 6px 6px rgba(90, 50, 150, .22)); }
.lvl-0 .lvl0-pack.is-wiggle .salon-product { animation: spa-wiggle .45s ease-in-out 2; }
.lvl-0 .lvl0-towel {
  flex: none;
  height: 44%;
  min-height: 44px;
  aspect-ratio: 120 / 70;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: none;
  cursor: grab;
  animation: lvl0-towel 3.6s ease-in-out infinite;
}
.lvl-0 .lvl0-towel svg { width: 100%; height: 100%; }
.lvl-0 .lvl0-towel.is-held { animation: none; transform: translateY(-8px) rotate(-6deg); }
.lvl-0 .lvl0-towel.is-used { visibility: hidden; }
.lvl-0 .lvl0-trolley__glass {
  position: relative;
  height: 14px;
  margin-top: -5px;
  border-radius: 8px;
  border: 1.5px solid rgba(255, 255, 255, .95);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(226, 212, 255, .8));
  box-shadow: 0 8px 16px rgba(120, 60, 140, .2);
}
.lvl-0 .lvl0-trolley__glass::after {
  content: '';
  position: absolute;
  left: 4%; right: 4%; bottom: -5px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #c39a3f, #fff1c4, #c39a3f);
}
.lvl-0 .lvl0-trolley__legs { display: flex; justify-content: space-between; height: min(7cqh, 44px); padding: 0 12%; }
.lvl-0 .lvl0-trolley__legs i { width: 6px; border-radius: 3px; background: linear-gradient(90deg, #8d86a0, #f4f1f8, #8d86a0); }

/* ---------- product tooltip (a little speech bubble over the pack) ---------- */
.lvl-0 .lvl0-tip {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  z-index: 6;
  width: max-content;
  max-width: min(236px, 70cqw);
  padding: 7px 12px 8px;
  border-radius: 14px;
  border: 2px solid #fff;
  background: linear-gradient(180deg, #fff, #fff2f8);
  box-shadow: 0 0 0 2px var(--pink-2), 0 10px 22px rgba(150, 40, 110, .22);
  text-align: center;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(.85);
  transform-origin: 50% 100%;
  transition: opacity .18s ease, transform .3s var(--ease-pop);
  pointer-events: none;
}
.lvl-0 .lvl0-tip::after {
  content: '';
  position: absolute;
  left: calc(50% + var(--tail, 0px) - 7px);
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: #fff2f8;
  border-right: 2px solid var(--pink-2);
  border-bottom: 2px solid var(--pink-2);
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
.lvl-0 .lvl0-tip.is-on { opacity: 1; transform: translate(-50%, calc(-100% - 14px)) scale(1); }
.lvl-0 .lvl0-tip__kicker { display: block; font-size: .58rem; letter-spacing: .04em; color: var(--pink-deep); margin-bottom: 3px; }
.lvl-0 .lvl0-tip__name { display: block; font-size: .76rem; line-height: 1.28; font-weight: 700; color: var(--ink); text-wrap: balance; }

/* ---------- bubbles ---------- */
.lvl-0 .lvl0-bubble {
  position: absolute;
  z-index: 3;
  width: clamp(44px, 8cqmin, 64px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  translate: -50% -50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  animation: lvl0-float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2.1s);
  transition: opacity .25s ease, scale .25s ease;
}
.lvl-0 .lvl0-bubble span {
  display: block;
  width: 72%;
  height: 72%;
  margin: 14%;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff 0 11%, rgba(255, 255, 255, .28) 28%, rgba(223, 206, 255, .25) 62%, rgba(255, 176, 218, .75) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .95), 0 4px 12px rgba(150, 80, 160, .16);
  transition: transform .2s var(--ease-pop);
}
.lvl-0 .lvl0-bubble:hover span { transform: scale(1.1); }
.lvl-0 .lvl0-bubble.is-popped { opacity: 0; scale: 1.7; pointer-events: none; visibility: hidden; transition: opacity .25s ease, scale .25s ease, visibility 0s .25s; }

/* ---------- keyframes ---------- */
@keyframes lvl0-bob { 50% { transform: translateY(-.8%); } }
@keyframes lvl0-glow { 50% { opacity: .65; transform: scale(.96); } }
@keyframes lvl0-flash { 0% { opacity: 1; transform: scale(1); } 40% { opacity: 1; transform: scale(1.12); background: radial-gradient(closest-side, #fff, rgba(255, 214, 234, .9) 50%, transparent); } 100% { opacity: .8; transform: scale(1); } }
@keyframes lvl0-tap { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-18%) scale(1.06); } 60% { transform: translateY(0) scale(.96); } }
@keyframes lvl0-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes lvl0-nudge { 0%, 100% { rotate: 0deg; } 20% { rotate: -16deg; scale: 1.15; } 45% { rotate: 12deg; } 70% { rotate: -6deg; } }
@keyframes lvl0-swing { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
@keyframes lvl0-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes lvl0-towel { 0%, 82%, 100% { transform: none; } 88% { transform: rotate(-4deg) translateY(-3px); } 94% { transform: rotate(3deg); } }

/* ---------- portrait phones ---------- */
@container stage (max-aspect-ratio: 4 / 5) {
  .lvl-0 { --seat-h: min(57cqh, 100cqw); --row-h: min(14cqh, 110px); }
  .lvl-0 .lvl0-seat { bottom: calc(var(--row-h) + 6.5cqh); }
  .lvl-0 .lvl0-sign { left: 50%; translate: -50% 0; top: max(26px, 4.5cqh); width: min(86cqw, 340px); padding: 9px 14px 10px; }
  .lvl-0 .lvl0-sign__lead { font-size: clamp(.95rem, 4.6cqw, 1.2rem); }
  .lvl-0 .lvl0-sign__sub { font-size: clamp(.55rem, 2.5cqw, .66rem); margin-top: 5px; }
  .lvl-0 .lvl0-trolley { right: auto; left: 50%; translate: -50% 0; bottom: 1.5cqh; width: min(96cqw, 440px); }
  .lvl-0 .lvl0-trolley__legs { height: 3cqh; }
  .lvl-0 .lvl0-seat__tap { right: 1%; top: 32%; }
  .lvl-0 .lvl0-say { right: 0; top: 4%; }
}

/* ---------- short landscape (phones on their side) ---------- */
@container stage (max-height: 380px) {
  .lvl-0 { --seat-h: min(97cqh, 44cqw); --row-h: min(30cqh, 110px); }
  /* the backdrop is cropped top + bottom here: a taller box moves the crop
     below the stage so the neon "Hair Spa" is not sliced off */
  .lvl-0 > .salon-scene { bottom: -17cqh; }
  .lvl-0 .lvl0-sign { top: max(24px, 9cqh); left: 3cqw; width: min(25cqw, 210px); padding: 8px 10px 9px; border-radius: 14px; }
  .lvl-0 .lvl0-sign__cords::before, .lvl-0 .lvl0-sign__cords::after { height: 30px; }
  .lvl-0 .lvl0-sign__lead { font-size: clamp(.78rem, 1.9cqw, .98rem); }
  .lvl-0 .lvl0-sign__sub { font-size: .52rem; margin-top: 4px; }
  .lvl-0 .lvl0-trolley { width: min(34cqw, 320px); bottom: 2cqh; }
  .lvl-0 .lvl0-trolley__legs { height: 5cqh; }
  .lvl-0 .lvl0-say { right: -14%; top: 6%; }
}