/* sites/groom.css — groom.billubnb.in only: the spa-menu hero card (real prices from the combos) with three (still) soap bubbles — motion stays to the one hero entrance,
   the matting note. Shared parts live in sites/services.css. */
@layer sections {
  .spacard { --ear-bg: var(--blush-soft); transform: rotate(2deg); }
  .spacard .pebble { background: var(--paper-3); }
  .spacard .artcard__rows li { border-bottom-color: color-mix(in srgb, var(--ink) 22%, transparent); }
  .spacard__bubbles { position: absolute; inset: auto 4px -22px auto; width: 92px; height: 92px; pointer-events: none; }
  .spacard__bubbles i { position: absolute; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--sun-deep) 70%, transparent);
    background: radial-gradient(circle at 32% 30%, var(--paper-3) 0 18%, color-mix(in srgb, var(--paper-3) 40%, transparent) 40%, transparent 70%); }
  .spacard__bubbles i:nth-child(1) { width: 46px; height: 46px; right: 8px; bottom: 6px; }
  .spacard__bubbles i:nth-child(2) { width: 26px; height: 26px; right: 54px; bottom: 34px; }
  .spacard__bubbles i:nth-child(3) { width: 16px; height: 16px; right: 30px; bottom: 60px; }
  @media (prefers-reduced-motion: no-preference) {
    .spacard { animation-name: spa-in; }
    @keyframes spa-in { from { transform: rotate(7deg) translateY(28px); } to { transform: rotate(2deg); } }
  }
  .groom-matting { margin-top: var(--space-4); }
  .groom-matting .honest--warn { margin-top: 0; }
}