/* Lumière Nail Lounge — shared styles layered on top of Tailwind */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Spaced, uppercase label used throughout the brand (echoes "NAIL LOUNGE") */
.eyebrow {
  font-family: 'Jost', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 0.78rem;
  font-weight: 600;
}

/* Thin gold rule */
.rule-gold {
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, #B6A476, transparent);
}

/* Underline-on-hover for nav links */
.navlink {
  position: relative;
}
.navlink::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  height: 1px; width: 0;
  background: #1A1815;
  transition: width 0.35s ease;
}
.navlink:hover::after,
.navlink[aria-current="page"]::after { width: 100%; }
.navlink[aria-current="page"] { color: #8A7649; }

/* ---------- Scroll reveal (premium easing + directional variants) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-left  { transform: translateX(-48px); }
.reveal-right { transform: translateX(48px); }
.reveal-scale { transform: scale(1.08); }            /* image eases down to true size */
.reveal-zoom  { transform: scale(0.92) translateY(24px); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Image "curtain" wrapper: photo scales/parallaxes inside a clipped frame */
.reveal-frame { overflow: hidden; }
.reveal-frame img { transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); transform: scale(1.18); }
.reveal-frame.is-visible img { transform: scale(1); }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #E0D2A8, #B6A476 50%, #8A7649);
  z-index: 60;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-frame img { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  [data-parallax] { transform: none !important; }
  .scroll-progress { display: none; }
}

/* Gallery hover */
.gallery-item img { transition: transform 0.8s ease; }
.gallery-item:hover img { transform: scale(1.06); }

/* Nav: a soft frosted bar by default so a hero image reads through
   blurred + faded, never competing with the links. Solidifies on scroll. */
[data-nav] {
  background-color: #F8F8F6; /* solid white — no frost */
  border-bottom: 1px solid rgba(24, 24, 24, 0.08);
  transition: box-shadow 0.4s ease;
}
[data-nav].is-scrolled {
  box-shadow: 0 12px 30px -24px rgba(24, 24, 24, 0.55);
}

/* Buttons — primary is a refined antique GOLD with metallic banding
   (highlight → mid → shadow → highlight) for a warm polished-metal sheen.
   Clearly gold, but muted rather than gaudy. */
.btn-gold {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: linear-gradient(135deg, #E9DEC1 0%, #CAB98B 26%, #B1A16C 50%, #DCD0A8 68%, #A08D5B 100%);
  color: #181818;
  font-family: 'Jost', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.05rem; font-weight: 700;
  padding: 1.15rem 2.6rem;
  border: 1px solid rgba(140, 110, 46, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 230, 0.6),
    inset 0 -2px 4px rgba(120, 95, 35, 0.3),
    0 8px 22px -12px rgba(50, 38, 12, 0.5);
  transition: filter 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-gold:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 250, 230, 0.7),
    inset 0 -2px 5px rgba(120, 95, 35, 0.35),
    0 14px 28px -12px rgba(50, 38, 12, 0.55);
}

/* Metallic-gold text — a polished-gold gradient fill with a slow travelling
   highlight. Used for the hero accent line. */
.metallic-gold {
  background-image: linear-gradient(110deg,
    #C3B384 0%, #F2EBD3 18%, #B0A06A 34%, #FAF5E3 50%,
    #BDAB7A 64%, #F2EBD3 82%, #C3B384 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.45));
}
@keyframes silver-sheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 250% 50%; }
}

/* Cinematic hero headline entrance — lines rise with a slight overshoot. */
.hero-line {
  display: block;
  opacity: 0;
  transform: translateY(46px);
  animation: hero-rise 1.15s cubic-bezier(0.22, 1.25, 0.36, 1) forwards;
}
.hero-line-2 { animation-delay: 0.16s; }
/* the metallic line needs BOTH the rise and the ongoing sheen */
.hero-line-2.metallic-gold {
  animation: hero-rise 1.15s cubic-bezier(0.22, 1.25, 0.36, 1) 0.16s forwards,
             silver-sheen 7s linear infinite 1.4s;
}
@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-line { opacity: 1; transform: none; animation: none; }
  .hero-line-2.metallic-gold { animation: none; }
}

/* Breathing glow for booking CTAs — a soft wood-toned halo that swells and
   fades, elegant but noticeable. Pauses to the normal hover state on hover. */
@keyframes breathe-glow {
  0%, 100% {
    box-shadow: 0 8px 22px -12px rgba(50, 42, 22, 0.5),
                0 0 0 0 rgba(214, 199, 156, 0);
  }
  50% {
    box-shadow: 0 8px 22px -12px rgba(50, 42, 22, 0.5),
                0 0 24px 4px rgba(214, 199, 156, 0.6);
  }
}
.btn-glow {
  animation: breathe-glow 2.8s ease-in-out infinite;
  overflow: hidden; /* clips the travelling shine */
  isolation: isolate;
}
.btn-glow:hover {
  animation: none; /* let the normal hover shadow take over */
}

/* A diagonal light glint that sweeps across, then rests — eye-catching but
   not constant. Sits above the fill, below nothing it can harm legibility of
   (passes quickly, semi-transparent). */
.btn-glow::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -160%;
  width: 55%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: shine-sweep 4.2s ease-in-out infinite;
}
.btn-glow:hover::after { animation-duration: 1.6s; } /* livelier on hover */

@keyframes shine-sweep {
  0%   { left: -160%; }
  22%  { left: 170%; }   /* the sweep itself: ~0.9s */
  100% { left: 170%; }   /* then a calm pause before the next pass */
}

@media (prefers-reduced-motion: reduce) {
  .btn-glow { animation: none; }
  .btn-glow::after { display: none; }
}

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1.5px solid currentColor;
  font-family: 'Jost', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.05rem; font-weight: 600;
  padding: 1.15rem 2.6rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-outline:hover { background-color: #1A1815; color: #FAF6F0; }
.btn-outline.on-dark:hover { background-color: #FAF6F0; color: #1A1815; }