/* The salon pack's own styles, loaded right after site.css and blocking, like it (src/page.js).
   Warm neutrals under the dusty powder pink: an ivory page, plum-tinted ink and a plum-black for the dark cards (each
   text colour ≥ 4.5:1 on its background: ink-2 7.4, ink-3 5.8 on the page; dark-ink-2 9.4 on the dark).
   The first screen: a studio still life (polish, scissors, a comb and a brush on a travertine stand), cut out (its
   studio white is transparency), on a soft glow inside a thin mirror ring, three sparkles and two readouts. It moves
   only under html.motion; in still mode (and with reduced motion) everything stands. */
:root {
  --bg: #FAF6F5; --line: #EDE2E4; --ink: #24161B; --ink-2: #5E4C52; --ink-3: #6E5C62;
  --dark: #1A1014; --dark-2: #26171D; --dark-ink: #F6ECEE; --dark-ink-2: #C9B3BA;
}

.belo { position: absolute; inset: 0; }
.belo-glow, .belo-ring, .belo-still { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.belo-glow { width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--teal-glow) 72%, transparent), color-mix(in srgb, var(--teal-soft) 60%, transparent) 64%, transparent); }
.belo-ring { width: 92%; height: auto; color: color-mix(in srgb, var(--teal-ink) 45%, transparent); overflow: visible; }
.belo-still { width: 80%; height: auto; }
.belo-spark { position: absolute; width: 18px; height: 18px; fill: var(--teal); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--teal) 60%, transparent)); }
.belo-spark-a { top: 22%; left: 20%; }
.belo-spark-b { top: 14%; right: 27%; width: 12px; height: 12px; fill: #fff; }
.belo-spark-c { bottom: 27%; right: 12%; width: 14px; height: 14px; }
.belo-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px 8px 10px; border-radius: 999px; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--line)); background: rgba(255, 255, 255, .88); backdrop-filter: blur(8px);
  box-shadow: 0 14px 30px -18px rgba(60, 22, 34, .45); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.belo-tag i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 26%, transparent); }
.belo-tag-a { top: 19%; right: 3%; }
.belo-tag-b { bottom: 17%; left: 3%; }
@media (max-width: 900px) {
  .belo-tag { gap: 6px; padding: 6px 10px 6px 8px; font-size: 10px; }
  .belo-tag-a { top: 13%; right: 2%; } .belo-tag-b { bottom: 12%; left: 2%; }
  .belo-spark-a { left: 12%; }
}

html.motion .belo-still { animation: belo-float 8s ease-in-out infinite alternate; }
@keyframes belo-float { from { transform: translateY(5px); } to { transform: translateY(-5px); } }
html.motion .belo-ring { animation: belo-turn 140s linear infinite; }
@keyframes belo-turn { to { rotate: 360deg; } }
html.motion .belo-spark { animation: belo-twinkle 3.2s ease-in-out infinite; }
html.motion .belo-spark-b { animation-delay: 1.1s; }
html.motion .belo-spark-c { animation-delay: 2.2s; }
@keyframes belo-twinkle { 0%, 100% { opacity: .25; transform: scale(.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
html.motion .belo-tag { animation: belo-tag .7s var(--ease) both; }
html.motion .belo-tag-a { animation-delay: .8s; }
html.motion .belo-tag-b { animation-delay: 1.6s; }
@keyframes belo-tag { from { opacity: 0; transform: translateY(8px); } }

/* the service photos: a dark card under them, so the white text reads before a lazy photo arrives, and each keeps its
   subject in view as the card changes shape (wide or tall on a laptop, square on a phone) */
.svc.has-img { border-color: transparent; background: var(--dark); }
.svc-img img[src$="/card-color.webp"] { object-position: 45% 30%; }
.svc-img img[src$="/card-nails.webp"] { object-position: 100% 25%; } /* the bottles on the right, the text on the left */
.svc-img img[src$="/card-cut.webp"] { object-position: 50% 28%; }
@media (min-width: 1001px) { .b-wide.has-img p { max-width: 52%; } } /* the wide card's text stays left of the bottles */