/* LK Nails & Lashes: visual polish layer on top of public.css.
   Decorative only: brand colours and layout stay as they are. */

:root {
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0z' fill='%23e9a9bb'/%3E%3C/svg%3E");
  --sparkle-lilac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.2 5.8 11.4 12 12-6.2.6-11.4 5.8-12 12-.6-6.2-5.8-11.4-12-12C6.2 11.4 11.4 6.2 12 0z' fill='%23cdbdf2'/%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v8C1200 40 960 0 720 12 480 24 240 40 0 8z'/%3E%3C/svg%3E");
}

/* Six favourites fill two even rows instead of 4 + 2 */
@media (min-width: 900px) { .card-grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }
@media (min-width: 560px) and (max-width: 899px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

/* Twinkling sparkles in the hero */
.hero::before, .hero::after, .hero-visual::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: var(--sparkle) center / contain no-repeat; animation: twinkle 5s ease-in-out infinite;
}
.hero::before { left: 46%; top: 7%; width: 26px; height: 26px; }
.hero::after { left: 44%; bottom: 10%; width: 18px; height: 18px; background-image: var(--sparkle-lilac); animation-delay: 1.6s; }
.hero-visual { isolation: isolate; }
.hero-visual::before { right: -14px; top: -18px; width: 34px; height: 34px; z-index: 2; animation-delay: 3s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.1) rotate(18deg); }
}

/* Scrolling service ribbon */
.ribbon { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: rgba(255, 255, 255, 0.65); }
.ribbon-track { display: flex; width: max-content; animation: ribbon 46s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-list { display: flex; align-items: center; margin: 0; padding: 0.95rem 0; list-style: none; }
.ribbon-list li { display: inline-flex; align-items: center; white-space: nowrap; font: italic 500 1.35rem/1 var(--font-display); color: var(--ink-soft); }
.ribbon-list li::after { content: ""; width: 14px; height: 14px; margin: 0 1.6rem; background: var(--sparkle) center / contain no-repeat; }
@keyframes ribbon { to { transform: translateX(-50%); } }

/* Decorative mark under centred section headings */
.section-heading.center::after {
  content: ""; display: block; width: 64px; height: 14px; margin: 1rem auto 0;
  background:
    linear-gradient(var(--blush-strong), var(--blush-strong)) left center / 22px 1px no-repeat,
    var(--sparkle) center / 14px 14px no-repeat,
    linear-gradient(var(--blush-strong), var(--blush-strong)) right center / 22px 1px no-repeat;
}

/* Gentle wave where a tinted section starts and ends */
.section-tint { position: relative; }
.section-tint::before, .section-tint::after {
  content: ""; position: absolute; left: 0; right: 0; height: 34px; pointer-events: none; background: var(--cream);
  -webkit-mask: var(--wave) center / 100% 100% no-repeat; mask: var(--wave) center / 100% 100% no-repeat;
}
.section-tint::before { top: -1px; }
.section-tint::after { bottom: -1px; transform: scaleY(-1); }

/* Buttons: soft shine on hover */
.button.primary { position: relative; overflow: hidden; }
.button.primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transition: transform 0.7s;
}
.button.primary:hover::after { transform: translateX(120%); }
.button.primary:hover { box-shadow: 0 14px 30px rgba(184, 95, 128, 0.38); }

/* Cards: warmer lift, sparkle on the category tiles */
.feature-card { transition: transform 0.3s, box-shadow 0.3s; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.feature-icon { transition: transform 0.4s; }
.feature-card:hover .feature-icon { transform: rotate(-8deg) scale(1.08); }
.category-tile::after { content: ""; position: absolute; right: 18px; top: 16px; width: 22px; height: 22px; background: var(--sparkle) center / contain no-repeat; opacity: 0.8; }
.category-tile.tone-2::after { background-image: var(--sparkle-lilac); }
.mosaic-item { box-shadow: var(--shadow-sm); transition: box-shadow 0.3s, transform 0.3s; }
.mosaic-item:hover { box-shadow: var(--shadow); transform: translateY(-3px); }

/* Footer: brand-coloured top edge */
.site-footer { position: relative; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--blush-strong), var(--lilac), var(--mint), var(--blush-strong)); }

@media (max-width: 720px) {
  .hero::before { left: 3%; top: 4%; }
  .hero::after { display: none; }
  .ribbon-list li { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero::after, .hero-visual::before { animation: none; opacity: 0.8; }
  .ribbon-track { animation: none; width: 100%; }
  .ribbon-list { flex-wrap: wrap; justify-content: center; row-gap: 0.7rem; padding: 0.95rem 1rem; }
  .ribbon-track > .ribbon-list + .ribbon-list { display: none; }
  .button.primary::after { display: none; }
}