/* ═══════════════════════════════════════════════════
   Lilen Salon — Enhancement Styles
   Animations & visual effects layer (no build tools)
   ═══════════════════════════════════════════════════ */

/* ─── Scroll Progress Bar ───────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: hsl(40 58% 52%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}

/* ─── Nav Links — Gold Underline Slide ──────────── */
header nav a {
  position: relative;
  text-decoration: none !important;
}
header nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: hsl(40 58% 52%);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
header nav a:hover::after,
header nav a:focus-visible::after {
  left: 0;
  right: 0;
}

/* ─── Service Cards — Gold Left Accent ──────────── */
#uslugi ul > li {
  position: relative;
  overflow: hidden;
}
#uslugi ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: hsl(40 58% 52%);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}
#uslugi ul > li:hover::before {
  transform: scaleY(1);
}

/* ─── Service Cards — 3D Tilt Setup ─────────────── */
#uslugi ul {
  perspective: 900px;
}
#uslugi ul > li {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ─── Testimonials — Fade Edges ─────────────────── */
#opinie [class*="overflow-hidden"]:not([class*="rounded-full"]) {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}

/* ─── Transformation Images — Hover Glow ────────── */
#case-study img {
  transition: filter 0.5s ease;
}
#case-study img:hover {
  filter: brightness(1.05) contrast(1.02);
}

/* ─── Hero — Richer CTA Glow on Hover ───────────── */
.animate-cta-glow:hover {
  box-shadow: 0 0 32px hsl(40 58% 52% / 0.55),
              0 4px 18px hsl(40 58% 52% / 0.35) !important;
}

/* ─── Section Headings — Subtle Gold Divider ────── */
#uslugi h3,
#o-nas h2,
#dlaczego-lilen h2,
#wizyta h2,
#opinie h2 {
  position: relative;
}

/* ─── About / Why-Lilen Cards — Lift on Hover ───── */
#dlaczego-lilen [class*="rounded-sm"],
#o-nas [class*="rounded-sm"] {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#dlaczego-lilen [class*="rounded-sm"]:hover,
#o-nas [class*="rounded-sm"]:hover {
  box-shadow: 0 8px 32px hsl(28 14% 6% / 0.5),
              0 0 0 1px hsl(40 58% 52% / 0.2);
  transform: translateY(-3px);
}

/* ─── FAQ Accordion — Gold Focus Ring ───────────── */
#faq button:focus-visible {
  outline: 2px solid hsl(40 58% 52% / 0.6);
  outline-offset: 2px;
}

/* ─── Contact Hours — Prevent Time Overflow ─────── */
#kontakt ul li > span:first-child {
  min-width: 0;
  word-break: break-word;
}

/* ─── Reduced Motion Overrides ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  header nav a::after,
  #uslugi ul > li::before,
  #dlaczego-lilen [class*="rounded-sm"],
  #o-nas [class*="rounded-sm"] {
    transition: none;
  }
}