/* ============================================================
   YAS Cosmetology — css/style.css
   Handcrafted layer on top of Tailwind: header, cursor, motion
   states, signature shapes, vendor theming.
   Palette: cream #F8F5F2 · ink #111827 · gold #D4AF37 · brown #8B5E3C
   ============================================================ */

:root {
  --cream: #F8F5F2;
  --ink: #111827;
  --gold: #D4AF37;
  --brown: #8B5E3C;
}

[x-cloak] { display: none !important; }

body { overflow-x: hidden; overflow-x: clip; }   /* clip when supported; hidden as older-iOS fallback */
html { scroll-padding-top: 6.5rem; }             /* native-anchor fallback clears the fixed pill navbar */

html { scrollbar-width: thin; scrollbar-color: var(--brown) var(--cream); }
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--brown); border-radius: 99px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* ---------- Recommended Lenis styles ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Shared primitives ---------- */
/* .shadow-soft is now a Tailwind boxShadow token (theme.extend.boxShadow.soft) */

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--brown); margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }
.eyebrow.justify-center::after { content: ""; width: 2.2rem; height: 1px; background: var(--gold); }

.glass {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.75);
}

/* Gold gradient border that fades in on hover (mask trick) */
.card-grad { position: relative; }
.card-grad::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.7), rgba(139, 94, 60, 0.35), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.45s ease; pointer-events: none;
}
.card-grad:hover::before, .card-grad:focus-within::before { opacity: 1; }

/* ============================================================
   HEADER — glass pill. Entrance is CSS-only so the header can
   NEVER be hidden by a failed script or interrupted timeline.
   ============================================================ */
.nav-shell {
  background: rgba(248, 245, 242, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 40px -18px rgba(17, 24, 39, 0.22);
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
  animation: navIn 0.9s 0.15s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes navIn { from { transform: translateY(-18px); opacity: 0; } to { transform: none; opacity: 1; } }

#siteHeader.is-scrolled .nav-shell {
  background: rgba(248, 245, 242, 0.92);
  box-shadow: 0 16px 44px -16px rgba(17, 24, 39, 0.28);
  padding-top: 0.55rem; padding-bottom: 0.55rem;
}

.nav-link { position: relative; font-size: 0.9rem; font-weight: 600; color: rgba(17, 24, 39, 0.75); transition: color 0.3s; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0;
  background: var(--gold); transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { width: 100%; }
/* Active page in multi-page nav */
.nav-link[aria-current="page"] { color: var(--ink); }
.nav-link[aria-current="page"]::after { width: 100%; }
.mobile-link[aria-current="page"] { color: var(--brown); }

/* ---------- Inner-page banner ---------- */
.page-banner { position: relative; overflow: hidden; }
.page-banner::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(38rem 30rem at 85% -10%, rgba(212, 175, 55, 0.14), transparent 60%),
    radial-gradient(34rem 28rem at -10% 120%, rgba(139, 94, 60, 0.12), transparent 60%);
}

/* Prose lists inside detailed content */
.feature-check { display: flex; gap: 0.6rem; align-items: flex-start; }
.feature-check svg { flex: none; margin-top: 0.15rem; color: var(--gold); }

/* ---------- Preloader initial states (animated by GSAP, force-cleared by failsafe) ---------- */
#preloader .pre-letter { transform: translateY(110%); }
#preloader .pre-line { transform: scaleX(0); }

/* ---------- Hero arch ---------- */
.arch { border-radius: 999px 999px 2.2rem 2.2rem; aspect-ratio: 4 / 5; }
#heroFigure img { will-change: transform; }

.spin-slow { animation: spin 22s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pulse-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--ink); animation: blink 1.4s ease infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- Marquee (track duplicated once by JS for a seamless loop) ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; align-items: center; animation: marquee 26s linear infinite; will-change: transform; }
.marquee-track > * { flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Reveal masks ---------- */
[data-mask] { will-change: clip-path; }
[data-mask] img { will-change: transform; }

/* ---------- Custom cursor ---------- */
#cursorDot, #cursorRing, #cursorGlow { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 115; display: none; }
html.has-cursor #cursorDot, html.has-cursor #cursorRing, html.has-cursor #cursorGlow { display: block; }
#cursorDot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 99px; background: var(--brown); }
#cursorRing {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 99px;
  border: 1.5px solid rgba(139, 94, 60, 0.55);
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
#cursorRing.is-active { transform: scale(1.7); border-color: var(--gold); background: rgba(212, 175, 55, 0.08); }
#cursorGlow {
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 99px; z-index: 1;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16), transparent 65%);
  filter: blur(30px); mix-blend-mode: multiply;
}
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label { cursor: none; }
html.has-cursor input, html.has-cursor textarea, html.has-cursor select { cursor: text; }

/* ---------- Forms ---------- */
.form-label { display: block; margin-bottom: 0.45rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(17, 24, 39, 0.7); }
.form-field {
  width: 100%; border-radius: 1rem; border: 1.5px solid rgba(17, 24, 39, 0.12);
  background: var(--cream); padding: 0.85rem 1.1rem; font-size: 0.95rem; color: var(--ink);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.form-field::placeholder { color: rgba(17, 24, 39, 0.35); }
.form-field:focus { outline: none; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Swiper theming ---------- */
.gallery-swiper { overflow: visible; }
.gallery-swiper .swiper-slide { height: auto; }
.testi-pag .swiper-pagination-bullet { width: 8px; height: 8px; background: rgba(17, 24, 39, 0.25); opacity: 1; transition: all 0.3s; margin: 0 4px !important; }
.testi-pag .swiper-pagination-bullet-active { width: 26px; border-radius: 99px; background: var(--gold); }
.testi-pag { position: static; }

/* Media zoom on hover (gallery, service & course card images) */
.zoom-media img { transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); }
.zoom-media:hover img, .group:hover .zoom-media img { transform: scale(1.08); }

/* GLightbox above cursor layers */
.glightbox-container { z-index: 125 !important; }

/* GLightbox description panel — on-brand theming */
.gslide-description { background: var(--cream) !important; }
.gslide-title {
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.6rem !important; font-weight: 600 !important;
  color: var(--ink) !important; margin-bottom: 0.35rem !important;
}
.gslide-desc { color: rgba(17, 24, 39, 0.7) !important; line-height: 1.6 !important; font-size: 0.95rem !important; }
.gdesc-inner { padding: 1.4rem 1.5rem !important; }

/* WhatsApp pulse */
.fab-wa { animation: wa-pulse 2.4s infinite; }
@keyframes wa-pulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Back-to-top visibility */
#toTop { opacity: 0; pointer-events: none; transform: translateY(8px); transition: all 0.35s ease; }
#toTop.is-visible { opacity: 1; pointer-events: auto; transform: none; }

/* Course rows */
.course-row { transition: background 0.4s ease; }
.course-row:hover { background: rgba(255, 255, 255, 0.85); }
.course-row .course-arrow { transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s, color 0.3s; }
.course-row:hover .course-arrow { transform: translate(4px, -4px); background: var(--ink); color: var(--gold); }

/* Service cards */
.svc-card { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease; }
.svc-card:hover { transform: translateY(-8px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .spin-slow, .fab-wa, .pulse-dot { animation: none !important; }
  .nav-shell { animation-duration: 0.01ms !important; }
  * { transition-duration: 0.01ms !important; }
}