/* =========================================================
   Hair-spa kit styles (Spa.salon) — every class is .salon-*
   Products, client, scenes, drag ghost, drop zones, particles.
   Animations are transform/opacity only and switch off under
   reduced motion (base.css + the rules at the bottom).
   ========================================================= */

/* ---------- product packs ---------- */
.salon-product {
  display: block;
  overflow: visible;
  width: 100%;
  height: 100%;
  transform-origin: 50% 90%;
  transition: transform .25s var(--ease-pop), filter .25s;
  -webkit-user-drag: none;
  user-select: none;
}
.salon-product text { pointer-events: none; }
.salon-product__halo { animation: salon-halo 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes salon-halo { 50% { opacity: .65; transform: scale(.94); } }

/* wrap a product in a button: <button class="salon-pack"> product() </button> */
.salon-pack {
  position: relative;
  display: inline-grid;
  place-items: end center;
  --pad: 4px;
  min-width: 44px;
  min-height: 44px;
  padding: var(--pad);
  border: 0;
  border-radius: 16px;
  background: none;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.salon-pack > .salon-product { position: absolute; left: var(--pad); top: var(--pad); width: calc(100% - 2 * var(--pad)); height: calc(100% - 2 * var(--pad)); }
.salon-pack:hover .salon-product,
.salon-pack:focus-visible .salon-product { transform: translateY(-4px) rotate(-2deg) scale(1.03); }
.salon-pack:active { cursor: grabbing; }

/* "pick me" bounce */
.is-inviting .salon-product, .salon-product.is-inviting { animation: salon-invite 1.6s var(--ease-pop) infinite; }
.is-inviting::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  width: 70%; height: 14%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(183, 156, 255, .55), transparent);
  animation: salon-invite-shadow 1.6s var(--ease-pop) infinite;
  pointer-events: none;
}
@keyframes salon-invite {
  0%, 60%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-9%) rotate(-4deg); }
  38% { transform: translateY(0) rotate(2deg); }
  48% { transform: translateY(-3%) rotate(0); }
}
@keyframes salon-invite-shadow { 20% { opacity: .5; transform: translateX(-50%) scale(.8); } }

/* picked up (tap-tap) */
.is-held .salon-product, .salon-product.is-held {
  transform: translateY(-10%) rotate(-8deg) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(183, 156, 255, .9)) drop-shadow(0 10px 12px rgba(80, 40, 140, .3));
}
.salon-draggable.is-held { outline: 3px dashed var(--lilac); outline-offset: 4px; border-radius: 18px; }
.salon-draggable.is-dragging { opacity: .32; }
.salon-draggable.is-bounce-back { animation: salon-bounce-back .5s var(--ease-pop); }
@keyframes salon-bounce-back { 30% { transform: scale(1.12) rotate(4deg); } 60% { transform: scale(.96) rotate(-3deg); } }

/* ---------- drag ghost ---------- */
.salon-ghost {
  position: fixed;
  left: 0; top: 0;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 14px 16px rgba(80, 40, 140, .32));
}
.salon-ghost > * { width: 100%; height: 100%; transform: rotate(-6deg) scale(1.08); transition: transform .22s var(--ease-pop); }
.salon-ghost.is-over > * { transform: rotate(-32deg) scale(1.12); }
.salon-ghost.is-flying > * { transform: none; }
.salon-ghost .salon-product { width: 100%; height: 100%; }

/* ---------- drop zones (HTML or SVG) ----------
   fill/stroke only on SVG shapes (they would inherit into an HTML target's SVG children) */
.salon-dropzone { transition: fill .2s, stroke .2s, box-shadow .2s; }
.salon-dropzone.is-drop-ready { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(183, 156, 255, .85), 0 0 26px rgba(183, 156, 255, .6); }
.salon-dropzone.is-drop-hover { box-shadow: 0 0 0 3px #fff, 0 0 0 7px var(--pink), 0 0 32px rgba(255, 95, 168, .7); }
:is(path, ellipse, circle, rect, polygon).salon-dropzone.is-drop-ready {
  fill: rgba(183, 156, 255, .1);
  stroke: rgba(160, 130, 255, .9);
  stroke-width: 3px;
  stroke-dasharray: 10 8;
  animation: salon-zone-pulse 1.3s ease-in-out infinite;
}
:is(path, ellipse, circle, rect, polygon).salon-dropzone.is-drop-hover { fill: rgba(255, 95, 168, .14); stroke: var(--pink); stroke-dasharray: none; }
@keyframes salon-zone-pulse { 50% { stroke-opacity: .45; } }

/* scrub targets */
.salon-scrub { cursor: grab; outline: none; }
.salon-scrub.is-scrubbing { cursor: grabbing; }
:is(path, ellipse, circle, rect, polygon).salon-scrub:focus-visible { stroke: var(--pink-deep); stroke-width: 3px; stroke-dasharray: 6 5; fill: rgba(255, 95, 168, .06); }
:not(path, ellipse, circle, rect, polygon).salon-scrub:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 4px; }

/* ---------- particles ---------- */
.salon-fx { position: fixed; inset: 0; z-index: 9998; pointer-events: none; overflow: hidden; }
.salon-particle {
  position: absolute;
  display: grid;
  place-items: center;
  line-height: 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.salon-particle--foam {
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff 0 16%, rgba(255, 255, 255, .35) 34%, rgba(232, 217, 255, .25) 70%, rgba(255, 198, 226, .75) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.salon-particle--cream {
  border-radius: 50% 50% 46% 54%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffe7f1 55%, #f2d8ff);
  box-shadow: 0 1px 2px rgba(150, 80, 130, .25);
}
.salon-particle--serum {
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: radial-gradient(circle at 35% 35%, #fff, #e7d8ff 55%, #b58cff);
  box-shadow: 0 0 8px rgba(214, 190, 255, .9);
}
.salon-particle--sparkle { text-shadow: 0 0 6px rgba(255, 255, 255, .9); }

/* ---------- the client ---------- */
.salon-client { display: block; overflow: visible; width: 100%; height: 100%; }
.salon-client .sc-headpose,
.salon-client .sc-bodypose { transform-box: view-box; transition: transform .8s var(--ease-out); }
.salon-client .sc-headpose { transform-origin: 200px 300px; }
.salon-client .sc-bodypose { transform-origin: 200px 500px; }
.salon-client .sc-hairset { transition: opacity .6s ease; }
.salon-client .sc-hairset.is-entering { opacity: 0; }
.salon-client .sc-hairset.is-leaving { opacity: 0; }
.salon-client.is-refresh { animation: salon-refresh .65s var(--ease-pop); }
@keyframes salon-refresh { 35% { transform: scale(1.025) translateY(-1%); } 70% { transform: scale(.995); } }

.salon-client .sc-eyes { transform-box: view-box; transform-origin: 200px 195px; transition: transform .07s ease-in; }
.salon-client .sc-eyes.is-blinking { transform: scaleY(.1); }

.salon-client .sc-towel { transform-box: view-box; transform-origin: 200px 300px; }
.salon-client .sc-towel.is-wrapping { animation: salon-wrap .8s var(--ease-pop); }
@keyframes salon-wrap {
  0% { opacity: 0; transform: translateY(-60px) scale(.7, .5); }
  60% { opacity: 1; transform: translateY(4px) scale(1.04, 1.02); }
  100% { transform: none; }
}

/* overlays: each piece pops in once revealed */
.salon-client .sc-ov { opacity: 0; transform: scale(.2); transition: opacity .35s ease, transform .5s var(--ease-pop); }
.salon-client .sc-ov.is-on { opacity: 1; transform: none; }
.salon-client .sc-streak { transform: none; }
.salon-client .sc-streak path { transition: stroke-dashoffset .35s var(--ease-out); }
.salon-client .sc-foam, .salon-client .sc-cream, .salon-client .sc-serum { transition: opacity .5s ease; }
.salon-client .sc-float.is-on { animation: salon-bob 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes salon-bob { 50% { transform: translateY(-8px); } }
.salon-client .sc-light { transform: none; transition: opacity .6s ease; }
.salon-client .sc-serum.is-flowing .sc-light { animation: salon-flow 2.4s linear infinite; animation-delay: calc(var(--d, 0s) * -1); }
@keyframes salon-flow { to { stroke-dashoffset: -.64; } }
.salon-client .sc-aura-glow { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .9s ease, transform 1.2s var(--ease-out); }
.salon-client .sc-glowrim { opacity: calc(var(--glow, 0) * .75); transition: opacity .9s ease; }
.salon-client .sc-night { display: none; }
.salon-client.is-night { filter: saturate(.86) brightness(.92); }
.salon-client.is-night .sc-night { display: inline; }
.salon-client .salon-zone { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.salon-client .salon-drip { animation: salon-drip 2.6s ease-in infinite; transform-box: fill-box; }
.salon-client .salon-drip:nth-child(2n) { animation-delay: 1.1s; }
@keyframes salon-drip { 0%, 55% { transform: none; opacity: 1; } 90% { transform: translateY(26px); opacity: 0; } 100% { opacity: 0; } }

/* twinkles (client sparkles + scenes) */
.salon-twinkle { transform-box: fill-box; transform-origin: 50% 50%; animation: salon-twinkle 2.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.salon-twinkle--soft { animation-name: salon-twinkle-soft; }
@keyframes salon-twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.55) rotate(20deg); } }
@keyframes salon-twinkle-soft { 50% { opacity: .55; } }

/* dialog / avatar portrait */
.salon-face { display: block; width: 100%; height: 100%; }

/* ---------- chair + seated client ---------- */
.salon-chair { display: block; width: 100%; height: 100%; overflow: visible; }
.salon-seat { position: relative; aspect-ratio: 520 / 640; }
.salon-seat > .salon-chair { position: absolute; inset: 0; }
.salon-seat__client {
  position: absolute;
  left: 11.5385%;
  top: 1.5625%;
  width: 76.923%;
  height: 78.125%;
}

/* ---------- icons ---------- */
.salon-icon { display: block; width: 100%; height: 100%; }

/* ---------- scenes ---------- */
.salon-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.salon-scene > svg { display: block; width: 100%; height: 100%; max-width: none; }
.salon-scene .salon-neon { animation: salon-neon 5s steps(1) infinite; }
@keyframes salon-neon { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .salon-twinkle, .salon-scene .salon-neon, .salon-client .sc-float.is-on, .salon-client .salon-drip,
  .salon-client .sc-serum.is-flowing .sc-light, .is-inviting .salon-product, .salon-product.is-inviting, .salon-product__halo { animation: none !important; }
}
html.reduce-motion .salon-twinkle, html.reduce-motion .salon-scene .salon-neon, html.reduce-motion .salon-client .sc-float.is-on,
html.reduce-motion .salon-client .salon-drip, html.reduce-motion .salon-client .sc-serum.is-flowing .sc-light,
html.reduce-motion .is-inviting .salon-product, html.reduce-motion .salon-product.is-inviting, html.reduce-motion .salon-product__halo { animation: none !important; }

/* portrait-based client (generated illustrations of Shruti) */
.salon-client--portrait .sc-img { transition: opacity .55s ease; }
.salon-client--portrait .sc-headpose { transform-box: view-box; transform-origin: 200px 480px; transition: transform .8s var(--ease-out); }
.salon-client--portrait.is-night .sc-portraits { filter: brightness(.9) saturate(.9) hue-rotate(-6deg); }
.salon-client--portrait.is-refresh { animation: salon-refresh .65s var(--ease-pop); }
.salon-face image { image-rendering: auto; }