/* ============================================================
   SKINELIA — Custom CSS (only what Tailwind can't do)
   ============================================================ */

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible  { opacity: 1; transform: none; }
.reveal.delay-1  { transition-delay: 0.1s; }
.reveal.delay-2  { transition-delay: 0.2s; }
.reveal.delay-3  { transition-delay: 0.3s; }

/* ── Nav: scrolled shadow ─────────────────────────────────── */
#nav.scrolled {
  border-bottom-color: #E8DDD0;
  box-shadow: 0 2px 20px rgba(44, 42, 39, 0.07);
}

/* ── Nav links: animated underline ───────────────────────── */
.nav-link { position: relative; }
.nav-link::after {
  will-change: transform;
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: #B8926A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

/* ── Hero circle: outer decorative ring ───────────────────── */
.hero-circle::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(184, 146, 106, 0.15);
  pointer-events: none;
}

/* ── Promo Bar ────────────────────────────────────────────── */
#promoBar {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 100px;
  overflow: hidden;
  transition: transform 0.3s ease, opacity 0.3s ease, max-height 0.3s ease;
  opacity: 1;
}
#promoBar.scrolled-away {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
#promoBar.dismissed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
html.promo-off #promoBar {
  display: none;
}