/* =========================================================
   Step 4 — Night Cream — the moonlit vanity mirror
   Everything is scoped under .lvl-4. The stage is a size
   container named "stage": sizes use cqw / cqh / cqmin.
   ========================================================= */

.lvl-4 {
  /* layout knobs (wide / landscape default) */
  --vh: 17cqh;                                   /* vanity height */
  --surf: 6.5cqh;                                /* vanity top depth */
  --mh: min(83cqh, calc(56cqw / .6818));         /* mirror height (viewBox 300 × 440) */
  --mw: calc(var(--mh) * .6818);
  --mb: calc(var(--vh) - var(--surf) * .62);     /* mirror stands on the vanity */
  --th: min(36cqh, 30cqw);                       /* night cream height */
  --side: calc((100cqw - var(--mw)) / 2);        /* free space either side of the mirror */
  --warm: 0;
  background: #22153a;
}

.lvl-4 .l4-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
}

/* ---------------- the night room ---------------- */
.lvl-4 .l4-back { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lvl-4 .l4-kitscene { position: absolute; inset: 0; }
.lvl-4 .l4-room {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 46% at 50% 40%, rgba(255, 196, 228, .2), transparent 72%),
    radial-gradient(ellipse 40% 60% at 16% 28%, rgba(150, 150, 255, .2), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M32 0 L64 32 L32 64 L0 32 Z' fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1'/%3E%3Cpath d='M32 27 l1.3 3.7 3.7 1.3 -3.7 1.3 -1.3 3.7 -1.3 -3.7 -3.7 -1.3 3.7 -1.3z' fill='%23ffffff' fill-opacity='.16'/%3E%3C/svg%3E") 0 0 / 64px 64px,
    linear-gradient(180deg, #1d1231 0%, #342150 42%, #573769 78%, #6d4677 100%);
}

/* an arched alcove in the wall frames the mirror (and hides the backdrop's own oval mirror) */
.lvl-4 .l4-alcove {
  position: absolute;
  left: 50%;
  bottom: calc(var(--vh) - 6px);
  width: min(98cqw, calc(var(--mw) * 1.62));
  height: min(calc(100cqh - var(--vh) + 6px), calc(var(--mh) * 1.12));
  translate: -50% 0;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background:
    radial-gradient(ellipse 58% 46% at 50% 44%, rgba(160, 120, 220, .55), transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 0 L48 24 L24 48 L0 24 Z' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1'/%3E%3Ccircle cx='24' cy='24' r='1.4' fill='%23ffffff' fill-opacity='.22'/%3E%3C/svg%3E") 0 0 / 48px 48px,
    linear-gradient(180deg, #3b2866 0%, #4a3478 55%, #3c2a63 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255, 255, 255, .16),
    inset 0 0 0 6px rgba(201, 178, 255, .16),
    inset 0 30px 60px rgba(10, 0, 30, .45),
    0 0 0 2px rgba(20, 8, 40, .35),
    0 0 50px rgba(170, 140, 255, .18);
  overflow: hidden;
}
.lvl-4 .l4-alcove__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 55%, rgba(255, 214, 170, .6), rgba(255, 170, 210, .2) 55%, transparent 78%);
  opacity: calc(var(--warm) * .9);
  transition: opacity 1.2s var(--ease-out);
}
.lvl-4 .l4-warmth {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse calc(var(--mw) * 1.35) calc(var(--mh) * .85) at 50% calc(100cqh - var(--mb) - var(--mh) * .5), rgba(255, 206, 160, .55), rgba(255, 170, 205, .22) 55%, transparent 80%);
  opacity: calc(var(--warm) * .95);
  transition: opacity 1.2s var(--ease-out);
  mix-blend-mode: screen;
}

.lvl-4 .l4-bokeh i {
  position: absolute;
  left: calc(6% + var(--i) * 10.5%);
  bottom: calc(var(--vh) + 4cqh);
  width: calc(10px + (var(--i) * 7px) % 18px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 226, 190, .55), rgba(255, 190, 225, .12) 60%, transparent 72%);
  opacity: 0;
  animation: l4-float calc(10s + var(--i) * 1.3s) linear infinite;
  animation-delay: calc(var(--i) * -2.1s);
}
@keyframes l4-float {
  0% { transform: translate(0, 0) scale(.7); opacity: 0; }
  15% { opacity: .9; }
  60% { transform: translate(18px, -40cqh) scale(1); opacity: .6; }
  100% { transform: translate(-10px, -70cqh) scale(1.2); opacity: 0; }
}

/* ---------------- vanity ---------------- */
.lvl-4 .l4-vanity {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: var(--vh);
  pointer-events: none;
}
.lvl-4 .l4-vanity__top {
  position: absolute;
  left: 1.5cqw; right: 1.5cqw; top: 0;
  height: var(--surf);
  background:
    radial-gradient(ellipse 40% 140% at 50% 0%, rgba(255, 226, 190, calc(.25 + var(--warm) * .45)), transparent 70%),
    linear-gradient(172deg, transparent 0 36%, rgba(255, 255, 255, .22) 37%, transparent 39%),
    linear-gradient(177deg, transparent 0 64%, rgba(255, 255, 255, .16) 65%, transparent 66.5%),
    linear-gradient(180deg, #b9a2d4 0%, #dccdf0 48%, #c6b1e0 100%);
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}
.lvl-4 .l4-vanity__edge {
  position: absolute;
  left: 1.5cqw; right: 1.5cqw;
  top: var(--surf);
  height: max(8px, 1.6cqh);
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #f3eafc 0%, #cdb9e6 50%, #9c83bd 100%);
  box-shadow: 0 6px 14px rgba(20, 5, 40, .4);
}
.lvl-4 .l4-vanity__skirt {
  position: absolute;
  left: 2.6cqw; right: 2.6cqw;
  top: calc(var(--surf) + max(8px, 1.6cqh));
  bottom: 0;
  background:
    linear-gradient(180deg, rgba(20, 5, 40, .35), rgba(20, 5, 40, 0) 30%, rgba(255, 255, 255, .05) 60%, rgba(20, 5, 40, .3)),
    repeating-linear-gradient(90deg, #7b4f8e 0 12px, #6a4180 12px 17px, #8a5c9c 17px 27px, #714688 27px 31px);
}
.lvl-4 .l4-vanity__skirt::before { /* lace trim */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background:
    radial-gradient(circle at 50% 38%, #c9a8dc 0 1.6px, transparent 2px) 0 0 / 16px 100% repeat-x,
    radial-gradient(ellipse 50% 100% at 50% 0, #efe4fb 0 90%, transparent 95%) 0 0 / 16px 100% repeat-x;
  opacity: .9;
}

.lvl-4 .l4-candle,
.lvl-4 .l4-vase {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  bottom: calc(var(--vh) - var(--surf) * .7);
  filter: drop-shadow(0 6px 8px rgba(20, 5, 40, .35));
}
.lvl-4 .l4-candle { height: min(14cqh, 11cqw); aspect-ratio: 60 / 96; left: calc(var(--side) - min(14cqh, 11cqw) * .9 - 2cqw); }
.lvl-4 .l4-vase { height: min(19cqh, 15cqw); aspect-ratio: 70 / 110; left: calc(var(--side) - min(14cqh, 11cqw) * 1.6 - min(19cqh, 15cqw) * .64 - 3cqw); bottom: calc(var(--vh) - var(--surf) * .55); }
.lvl-4 .l4-candle svg, .lvl-4 .l4-vase svg { width: 100%; height: 100%; max-width: none; overflow: visible; }
.lvl-4 .l4-candle__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: l4-flicker 1.6s ease-in-out infinite; }
.lvl-4 .l4-candle__glow { transform-box: fill-box; transform-origin: center; animation: l4-candleglow 2.2s ease-in-out infinite; }
@keyframes l4-flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(.94, 1.08) skewX(3deg); } 60% { transform: scale(1.04, .95) skewX(-2deg); } }
@keyframes l4-candleglow { 50% { opacity: .75; transform: scale(1.1); } }

/* ---------------- the mirror ---------------- */
.lvl-4 .l4-mirror {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: var(--mb);
  width: var(--mw);
  height: var(--mh);
  transform: translateX(-50%);
}
.lvl-4 .l4-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(15, 0, 35, .5)) drop-shadow(0 0 calc(var(--warm) * 26px) rgba(255, 214, 150, calc(var(--warm) * .55)));
  transition: filter 1s var(--ease-out);
}
.lvl-4 .l4-frame.is-pulsing { animation: none; }
.lvl-4 .l4-frame.is-calling { animation: l4-call 1.6s ease-in-out infinite; }
@keyframes l4-call {
  0%, 100% { filter: drop-shadow(0 14px 22px rgba(15, 0, 35, .5)) drop-shadow(0 0 16px rgba(255, 214, 150, .5)); }
  50% { filter: drop-shadow(0 14px 22px rgba(15, 0, 35, .5)) drop-shadow(0 0 34px rgba(255, 224, 170, .95)); }
}
.lvl-4 .l4-crest__glow { opacity: calc(.35 + var(--warm) * .65); transition: opacity 1s; }

.lvl-4 .l4-bulb__on { opacity: 0; transition: opacity .35s ease; }
.lvl-4 .l4-bulb__halo {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(.4);
  transition: opacity .45s ease, transform .7s var(--ease-pop);
}
.lvl-4 .l4-bulb.is-on .l4-bulb__on { opacity: 1; }
.lvl-4 .l4-bulb.is-on .l4-bulb__halo { opacity: .85; transform: scale(1); }
.lvl-4 .l4-bulb.is-bright .l4-bulb__halo { opacity: 1; transform: scale(1.4); }

/* the glass — same box as the frame's glass (x 44 y 56 w 212 h 344 of 300 × 440) */
.lvl-4 .l4-glass {
  position: absolute;
  z-index: 1;
  left: 14.667%;
  top: 12.727%;
  width: 70.667%;
  height: 78.182%;
  border-radius: 50% 50% 3.8% 3.8% / 31.98% 31.98% 2.33% 2.33%;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
}
.lvl-4 .l4-glass__room {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 3.4% 2.1% at 16% 17%, rgba(255, 236, 196, .55), transparent),
    radial-gradient(ellipse 2.6% 1.6% at 27% 11%, rgba(255, 200, 228, .5), transparent),
    radial-gradient(ellipse 3% 1.9% at 40% 8%, rgba(220, 204, 255, .45), transparent),
    radial-gradient(ellipse 2.4% 1.5% at 62% 7.5%, rgba(255, 236, 196, .5), transparent),
    radial-gradient(ellipse 3.2% 2% at 75% 11%, rgba(255, 200, 228, .45), transparent),
    radial-gradient(ellipse 2.6% 1.6% at 86% 18%, rgba(220, 204, 255, .45), transparent),
    radial-gradient(ellipse 34% 26% at 22% 20%, rgba(210, 200, 255, .28), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 62%, rgba(255, 200, 230, .22), transparent 72%),
    linear-gradient(180deg, #2c1e4a 0%, #463063 48%, #6e4a7f 100%);
}
.lvl-4 .l4-glass__warm {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 72% 52% at 50% 58%, rgba(255, 214, 170, .85), rgba(255, 178, 212, .4) 52%, transparent 78%);
  opacity: calc(var(--warm) * .85);
  transition: opacity 1.2s var(--ease-out);
}
.lvl-4 .l4-refl {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
  transform: translateY(calc((1 - var(--conf, 0)) * 2.4%)) scale(calc(.965 + var(--conf, 0) * .035));
  transition: opacity .7s var(--ease-out), filter .7s var(--ease-out), transform .9s var(--ease-out);
}
.lvl-4 .l4-refl.is-away { opacity: 0; filter: blur(6px); }
.lvl-4 .l4-refl.is-nudge { animation: l4-refl-nudge .9s var(--ease-out); }
@keyframes l4-refl-nudge { 30% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 255, 255, .8)); } }
.lvl-4 .l4-client {
  position: absolute;
  left: 50%;
  bottom: -7%;
  width: 96%;
  height: auto;
  max-width: none;
  transform: translateX(-50%);
  overflow: visible;
}

/* first-timer cues: dotted arc from the cream to the hair; a swipe cue on the glass */
.lvl-4 .l4-guide {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.lvl-4 .is-guiding .l4-guide { opacity: 1; }
.lvl-4 .l4-guide__path,
.lvl-4 .l4-guide__head {
  fill: none;
  stroke: rgba(255, 244, 250, .92);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 150, 205, .95));
}
.lvl-4 .l4-guide__path { stroke-dasharray: .5 11; animation: l4-march .9s linear infinite; }
@keyframes l4-march { to { stroke-dashoffset: -11.5; } }
.lvl-4 .l4-swipe {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: var(--sy, 60%);
  width: 44%;
  height: 30px;
  translate: -50% -50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}
.lvl-4 .l4-swipe.is-on { opacity: 1; }
.lvl-4 .l4-swipe::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 2px;
  translate: 0 -50%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75) 20%, rgba(255, 255, 255, .75) 80%, transparent);
}
.lvl-4 .l4-swipe i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 32%, rgba(255, 214, 236, .75) 55%, transparent 72%);
  box-shadow: 0 0 16px rgba(255, 200, 235, .95);
  animation: l4-swipe 1.1s ease-in-out infinite alternate;
}
@keyframes l4-swipe { from { left: 4%; } to { left: 96%; } }

/* the two memory vignettes */
/* the whole head counts as "hair" here: let rubs that start on the face reach the hair zone */
.lvl-4 .l4-client [data-zone="face"] { pointer-events: none; }

.lvl-4 .l4-vig {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  filter: blur(6px);
  transform: scale(1.05);
  transition: opacity .8s var(--ease-out), filter .8s var(--ease-out), transform 1.2s var(--ease-out);
  pointer-events: none;
}
.lvl-4 .l4-vig.is-in { opacity: 1; filter: none; transform: none; }
.lvl-4 .l4-vig__art { width: 100%; height: 100%; max-width: none; }
.lvl-4 .l4-glass.is-ripple { animation: l4-ripple .9s var(--ease-out); }
@keyframes l4-ripple {
  0% { filter: none; }
  30% { filter: brightness(1.3) saturate(1.2) blur(1.5px); }
  100% { filter: none; }
}

/* moment 1 — hair */
.lvl-4 .l4-v1-tuft { transform-box: fill-box; transform-origin: 30% 100%; transition: transform .45s var(--ease-out) .15s, opacity .35s .35s; }
.lvl-4 .l4-v1-armup { transition: opacity .4s ease .5s; }
.lvl-4 .l4-v1-armdown { opacity: 0; transition: opacity .4s ease .55s; }
.lvl-4 .l4-v1-man { transition: transform .6s var(--ease-pop) .6s; }
.lvl-4 .l4-v1-leaf { transform-box: fill-box; transform-origin: 100% 50%; transition: transform .8s var(--ease-in-out) .45s; }
.lvl-4 .l4-v1-spill { opacity: 0; transition: opacity .8s ease .6s; }
.lvl-4 .l4-v1-glint, .lvl-4 .l4-v2-glint { opacity: 0; transform-box: fill-box; transform-origin: center; }
.lvl-4 .is-done .l4-v1-armup { opacity: 0; animation: l4-comb .5s ease-in-out 2; }
.lvl-4 .is-done .l4-v1-tuft { transform: rotate(62deg) scale(.5); opacity: 0; }
.lvl-4 .is-done .l4-v1-armdown { opacity: 1; }
.lvl-4 .is-done .l4-v1-man { transform: translateY(-3px); }
.lvl-4 .is-done .l4-v1-leaf { transform: scaleX(.18); }
.lvl-4 .is-done .l4-v1-spill { opacity: 1; }
.lvl-4 .is-done .l4-v1-glint, .lvl-4 .is-done .l4-v2-glint { animation: l4-twinkle 1.6s ease-in-out .5s infinite both; }
@keyframes l4-comb { 50% { transform: translate(-5px, 2px); } }

/* moment 2 — lipstick */
.lvl-4 .l4-v2-lips { opacity: 0; transition: opacity .45s ease .25s; }
.lvl-4 .l4-v2-swipe { transition: transform .6s var(--ease-in-out); }
.lvl-4 .l4-v2-lid { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s var(--ease-in-out) .6s; }
.lvl-4 .l4-v2-armsup { transition: opacity .4s ease .8s; }
.lvl-4 .l4-v2-armsdown { opacity: 0; transition: opacity .4s ease .85s; }
.lvl-4 .l4-v2-woman { transition: transform .6s var(--ease-pop) .85s; }
.lvl-4 .l4-v2-glow { opacity: .5; transition: opacity .8s ease .7s; }
.lvl-4 .is-done .l4-v2-swipe { animation: l4-swipe .7s var(--ease-in-out); }
.lvl-4 .is-done .l4-v2-lips { opacity: 1; }
.lvl-4 .is-done .l4-v2-lid { transform: scaleY(.08); }
.lvl-4 .is-done .l4-v2-armsup { opacity: 0; }
.lvl-4 .is-done .l4-v2-armsdown { opacity: 1; }
.lvl-4 .is-done .l4-v2-woman { transform: translateY(-3px); }
.lvl-4 .is-done .l4-v2-glow { opacity: 1; }
@keyframes l4-swipe { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-2px, -3px); } 65% { transform: translate(-1px, 3px); } }

/* glass fx: fog, question, lipstick answer, sweep */
.lvl-4 .l4-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
.lvl-4 .l4-fog { opacity: 0; transition: opacity 1.1s ease; }
.lvl-4 .is-fogged .l4-fog { opacity: 1; }
.lvl-4 .l4-qline {
  font: italic 800 24px var(--font-display);
  fill: #5b2c6e;
  opacity: 0;
}
.lvl-4 .is-fogged .l4-qline { animation: l4-qin .9s var(--ease-out) forwards; animation-delay: calc(.5s + var(--i) * .22s); }
@keyframes l4-qin { from { opacity: 0; transform: translateY(8px); } to { opacity: .92; transform: none; } }
.lvl-4 .l4-ans {
  opacity: 0;
  transition: opacity .2s, transform 1.1s var(--ease-in-out);
  transform-box: view-box;
  transform-origin: 106px 0px;
}
.lvl-4 .l4-ans.is-on { opacity: 1; }
.lvl-4 .l4-ans.is-title { transform: translate(0px, -113px) scale(.6); }
.lvl-4 .l4-lipline { font-family: var(--font-script); font-weight: 400; paint-order: stroke; }
.lvl-4 .l4-bullet { opacity: 0; transition: opacity .25s; }
.lvl-4 .l4-bullet.is-on { opacity: 1; }
.lvl-4 .l4-fx__sweep { opacity: 0; }
.lvl-4 .is-sweep .l4-fx__sweep { animation: l4-sweep 1.4s var(--ease-in-out) .1s both; }
@keyframes l4-sweep {
  0% { opacity: 0; translate: 0 0; }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; translate: 360px 0; }
}

/* the fog scrub area */
.lvl-4 .l4-foghit {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  touch-action: none;
}
.lvl-4 .l4-foghit.is-live { pointer-events: auto; cursor: grab; }
.lvl-4 .l4-foghit.is-live::before {
  content: '';
  position: absolute;
  inset: 5%;
  border-radius: 50% 50% 4% 4% / 32% 32% 3% 3%;
  border: 2px dashed rgba(123, 72, 140, .45);
  animation: l4-breathe 1.8s ease-in-out infinite;
}
.lvl-4 .l4-foghit.is-nudge { animation: l4-wiggle-soft .9s var(--ease-out); }
.lvl-4 .l4-foghit:focus-visible { outline: 3px dashed #fff; outline-offset: -8px; }
@keyframes l4-breathe { 0%, 100% { opacity: .5; transform: scale(.985); } 50% { opacity: 1; transform: scale(1); } }
@keyframes l4-wiggle-soft { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }

/* one-tap glass button (moments + last look) */
.lvl-4 .l4-glassbtn {
  position: absolute;
  inset: 0;
  z-index: 4;
  padding: 0;
  border: 0;
  background: none;
  border-radius: inherit;
  pointer-events: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lvl-4 .l4-glassbtn.is-live, .lvl-4 .l4-glassbtn.is-listen { pointer-events: auto; }
.lvl-4 .l4-glassbtn:focus-visible { outline: 3px dashed #fff; outline-offset: -8px; }
.lvl-4 .l4-spot {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  width: 54px;
  height: 54px;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  scale: .4;
  transition: opacity .3s, scale .45s var(--ease-pop);
  pointer-events: none;
}
.lvl-4 .l4-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 4px rgba(255, 180, 220, .35), 0 0 22px rgba(255, 230, 180, .9), inset 0 0 14px rgba(255, 255, 255, .6);
  animation: l4-ring 1.5s ease-out infinite;
}
.lvl-4 .l4-spot i::before {
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff6da;
  font-size: 22px;
  font-style: normal;
  text-shadow: 0 0 10px rgba(255, 220, 150, .95);
  animation: spa-spin 6s linear infinite;
}
.lvl-4 .l4-glassbtn.is-live .l4-spot { opacity: 1; scale: 1; }
.lvl-4 .l4-spot.is-nudge { animation: spa-wiggle .5s ease-in-out 2; }
@keyframes l4-ring { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------------- the night cream ---------------- */
.lvl-4 .l4-tube {
  position: absolute;
  z-index: 6;
  left: calc(50% + var(--mw) / 2 + max(3cqw, (var(--side) - var(--th) * .42) / 2 - 2cqw));
  bottom: calc(var(--vh) - var(--surf) * .78);
  height: var(--th);
  min-width: 48px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .6s ease, transform .6s var(--ease-out);
}
.lvl-4 .l4-tube__art {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 12px 14px rgba(15, 0, 35, .45));
  transform-origin: 50% 100%;
}
.lvl-4 .l4-tube__halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 12%;
  width: 190%;
  height: 90%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 210, .75), rgba(220, 200, 255, .3) 55%, transparent);
  opacity: .5;
  pointer-events: none;
}
.lvl-4 .l4-tube__tray {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -4%;
  width: 150%;
  height: 12%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 40%, #fbf6ff, #d9c7f0 60%, #a98ccc);
  box-shadow: 0 4px 10px rgba(20, 5, 40, .4);
}
.lvl-4 .l4-tube__tick {
  position: absolute;
  z-index: 2;
  top: 4%;
  right: -12px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  color: #fff;
  font-size: 13px;
  box-shadow: 0 0 0 2px #fff, 0 3px 8px rgba(214, 51, 132, .4);
  transform: scale(0);
  transition: transform .45s var(--ease-pop);
}
.lvl-4 .l4-tube.is-ready .l4-tube__art { animation: l4-bob 3s ease-in-out infinite; }
.lvl-4 .l4-tube.is-ready .l4-tube__halo { animation: l4-halo 2.4s ease-in-out infinite; }
.lvl-4 .l4-tube::after { /* glint sweep */
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0 10%;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 64%);
  background-size: 250% 100%;
  background-position: 150% 0;
  pointer-events: none;
  mix-blend-mode: soft-light;
}
.lvl-4 .l4-tube.is-ready::after { animation: l4-glint 2.8s ease-in-out infinite; }
.lvl-4 .l4-tube:hover .l4-tube__art { scale: 1.05; }
.lvl-4 .l4-tube:active { cursor: grabbing; }
.lvl-4 .l4-tube.is-lifted .l4-tube__art { scale: 1.08; filter: drop-shadow(0 18px 20px rgba(15, 0, 35, .5)) brightness(1.08); }
.lvl-4 .l4-tube.is-nudge .l4-tube__art { animation: l4-nudge 1s var(--ease-out); }
.lvl-4 .l4-tube.is-used { pointer-events: none; opacity: 0; transform: translateY(12%) scale(.9); transition-delay: .9s; }
.lvl-4 .l4-tube.is-used .l4-tube__tick { transform: scale(1); }
.lvl-4 .l4-tube:focus-visible { outline: 3px dashed #fff; outline-offset: 4px; border-radius: 16px; }
@keyframes l4-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes l4-halo { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes l4-glint { 0% { background-position: 150% 0; } 60%, 100% { background-position: -60% 0; } }
@keyframes l4-nudge {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  15% { translate: 0 -12px; }
  30% { rotate: -8deg; }
  50% { rotate: 7deg; }
  70% { rotate: -4deg; translate: 0 -4px; }
}

/* easy mode: the cream flies onto the hair by itself */
.lvl-4 .l4-tube.is-away .l4-tube__art { opacity: .25; transition: opacity .25s; }
.lvl-4 .l4-fly {
  position: absolute;
  z-index: 9;
  pointer-events: none;
  transform-origin: 50% 40%;
  filter: drop-shadow(0 14px 16px rgba(15, 0, 35, .45)) drop-shadow(0 0 14px rgba(255, 225, 190, .6));
}
.lvl-4 .l4-fly > svg { width: 100%; height: 100%; max-width: none; }

/* easy mode: a glowing hand-sweep for each "tap anywhere" stroke */
.lvl-4 .l4-hand {
  position: absolute;
  z-index: 8;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #fff 0 22%, rgba(255, 232, 244, .85) 40%, rgba(255, 190, 225, .35) 62%, transparent 72%);
  box-shadow: 0 0 22px rgba(255, 214, 236, .9);
  animation: l4-hand .62s var(--ease-in-out) forwards;
}
@keyframes l4-hand {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  18% { opacity: 1; }
  80% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3); }
}

/* ---------------- Shruti's words ---------------- */
.lvl-4 .l4-say {
  position: absolute;
  z-index: 7;
  left: calc(50% + var(--mw) / 2 + 3.5cqw);
  right: 3cqw;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55em;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
  -webkit-tap-highlight-color: transparent;
}
.lvl-4 .l4-say.is-in { opacity: 1; }
.lvl-4 .l4-say.is-more { pointer-events: auto; cursor: pointer; }
.lvl-4 .l4-say:focus-visible { outline: 2px dashed rgba(255, 255, 255, .8); outline-offset: 8px; }
.lvl-4 .l4-say__who {
  padding: 3px 10px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--pink-2), var(--pink));
  color: #fff;
  font-size: .6rem;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .7), 0 0 16px rgba(255, 95, 168, .5);
}
.lvl-4 .l4-say__text {
  display: block;
  font: italic 600 clamp(1.05rem, 2.5cqw, 1.75rem) / 1.3 var(--font-display);
  color: #fff8fc;
  text-shadow: 0 0 20px rgba(255, 170, 215, .55), 0 2px 10px rgba(20, 5, 30, .65);
  text-wrap: pretty;
}
.lvl-4 .l4-w {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(.3em);
  animation: l4-word .7s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 65ms);
}
@keyframes l4-word { to { opacity: 1; filter: none; transform: none; } }
.lvl-4 .l4-say.is-all .l4-w { animation: none; opacity: 1; filter: none; transform: none; transition: opacity .15s; }
.lvl-4 .l4-say__more {
  align-self: flex-end;
  color: #ffd6ea;
  font: 700 1.3rem var(--font-body);
  opacity: 0;
  transition: opacity .3s;
}
.lvl-4 .l4-say.is-more .l4-say__more { opacity: .9; animation: l4-more 1.2s ease-in-out infinite; }
@keyframes l4-more { 50% { translate: 4px 0; } }

/* ---------------- radiance ---------------- */
.lvl-4 .l4-rays {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(100cqh - var(--mb) - var(--mh) * .52);
  width: 180cqmax;
  height: 180cqmax;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 200, .6) 0deg 4deg, rgba(255, 236, 200, 0) 4deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .45) 12%, transparent 32%);
  mask-image: radial-gradient(circle, #000 0, rgba(0, 0, 0, .45) 12%, transparent 32%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.6s var(--ease-out);
}
.lvl-4 .is-radiant .l4-rays { opacity: .85; animation: l4-rays 60s linear infinite; }
@keyframes l4-rays { to { rotate: 360deg; } }
.lvl-4 .l4-bloom {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse calc(var(--mw) * .9) calc(var(--mh) * .6) at 50% calc(100cqh - var(--mb) - var(--mh) * .45), rgba(255, 236, 200, .55), rgba(255, 200, 230, .18) 55%, transparent 80%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.lvl-4 .is-radiant .l4-bloom { opacity: 1; }
.lvl-4 .is-radiant .l4-fl__glow { opacity: .7; }
.lvl-4 .is-calling .l4-glass__warm { animation: l4-halo 1.6s ease-in-out infinite; }

/* scene entrance */
.lvl-4 .l4-scene.is-in .l4-mirror { animation: l4-mirror-in .9s var(--ease-pop) both; }
.lvl-4 .l4-scene.is-in .l4-tube { animation: l4-tube-in .8s var(--ease-pop) .35s both; }
@keyframes l4-mirror-in { from { opacity: 0; transform: translateX(-50%) translateY(24px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes l4-tube-in { from { opacity: 0; transform: translateY(30px) rotate(-8deg); } }

@keyframes l4-twinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* ================= portrait (phones) ================= */
@container stage (orientation: portrait) {
  .lvl-4 {
    --vh: 15cqh;
    --surf: 5cqh;
    --mh: min(74cqh, calc(90cqw / .6818));
    --th: min(24cqh, 30cqw);
  }
  .lvl-4 .l4-vase { display: none; }
  .lvl-4 .l4-candle { display: none; }
  .lvl-4 .l4-tube { left: auto; right: 3cqw; }
  .lvl-4 .l4-say {
    left: 3cqw;
    right: 3cqw;
    top: auto;
    bottom: calc(1.5cqh + 40px); /* clear of the shell's "tap anywhere" pill */
    translate: none;
    align-items: center;
    text-align: center;
    gap: .4em;
    padding: 12px 16px 14px;
    border-radius: 20px;
    background: rgba(38, 18, 56, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28), 0 12px 30px rgba(15, 0, 30, .45);
  }
  .lvl-4 .l4-say__text { font-size: clamp(1rem, 4.6cqw, 1.3rem); }
  .lvl-4 .l4-say__more { position: absolute; right: 12px; bottom: 8px; }
}

/* ================= short landscape (phones on their side) ================= */
@container stage (orientation: landscape) and (max-height: 440px) {
  .lvl-4 {
    --vh: 20cqh;
    --surf: 7cqh;
    --mh: 86cqh;
    --th: 46cqh;
  }
  .lvl-4 .l4-vase { display: none; }
  .lvl-4 .l4-alcove { width: calc(var(--mw) * 2.2); height: calc(var(--mh) * 1.45); }
  .lvl-4 .l4-say__text { font-size: clamp(.95rem, 5.4cqh, 1.25rem); }
  .lvl-4 .l4-spot { width: 46px; height: 46px; }
}

/* reduced motion: text is simply there (no staggered delays) */
@media (prefers-reduced-motion: reduce) {
  .lvl-4 .l4-w, .lvl-4 .is-fogged .l4-qline { animation: none; opacity: 1; filter: none; transform: none; }
  .lvl-4 .is-fogged .l4-qline { opacity: .92; }
}
html.reduce-motion .lvl-4 .l4-w, html.reduce-motion .lvl-4 .is-fogged .l4-qline { animation: none; opacity: 1; filter: none; transform: none; }
html.reduce-motion .lvl-4 .is-fogged .l4-qline { opacity: .92; }