/* ============================================================
   I-TOUCH MASSAGE SPA CLINIC — Custom Stylesheet
   Complements Tailwind (loaded via CDN in index.html).
   Contains only the bespoke touches Tailwind utilities
   alone can't express.
   ============================================================ */

body {
  -webkit-font-smoothing: antialiased;
}

/* Soft organic blob mask for imagery — avoids "tech box" framing */
.organic-frame {
  border-radius: 58% 42% 46% 54% / 48% 52% 48% 52%;
}
.organic-frame-alt {
  border-radius: 42% 58% 54% 46% / 52% 48% 52% 48%;
}

/* Gentle slow float for decorative gold orb */
@keyframes drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.animate-drift {
  animation: drift 9s ease-in-out infinite;
}

/* Section heading accent rule */
.gold-rule::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  margin-top: 1.25rem;
  background: linear-gradient(90deg, #A87818, rgba(168, 120, 24, 0));
}
.gold-rule-center::after {
  margin-inline: auto;
}

/* ---- Navigation active state (current section) ----
   .is-active is toggled by the scrollspy in js/main.js; aria-current
   mirrors it for assistive tech. */
.nav-link {
  position: relative;
}

/* Gold underline that grows in under the current (or hovered) item */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  background: linear-gradient(90deg, rgba(168, 120, 24, 0), #A87818, rgba(168, 120, 24, 0));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

.nav-link.is-active {
  color: #C9A45C; /* gold */
}

/* Mobile menu items: colour only (they already have a bottom border) */
.mobile-link.is-active {
  color: #C9A45C; /* gold */
}