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

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal {
  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 {
  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;
}

/* ── Welcome Popup ───────────────────────────────────────── */
#welcomePopup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
#welcomePopup.active {
  opacity: 1;
  visibility: visible;
}
#welcomePopup .popup-card {
  transform: translateY(16px) scale(0.97);
  transition: transform 0.35s ease;
}
#welcomePopup.active .popup-card {
  transform: translateY(0) scale(1);
}