/* Pure Prestige — Luxury Beauty Salon Styles */
@keyframes chevronBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* Reveal animations */
.reveal-section { opacity: 0; transform: translateY(30px); transition: opacity 500ms ease, transform 500ms ease; }
.reveal-section.is-visible { opacity: 1; transform: translateY(0); }
.reveal-hero { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease 0.3s, transform 500ms ease 0.3s; }
.reveal-hero.is-visible { opacity: 1; transform: translateY(0); }
.hero-word { opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 500ms ease; }
.hero-word.is-visible { opacity: 1; transform: translateY(0); }
.hero-word:nth-child(1) { transition-delay: 0.1s; }
.hero-word:nth-child(2) { transition-delay: 0.3s; }

/* Header */
#site-header { background: transparent; }
#site-header.is-solid { background: #1A1A1A; }
#site-header.is-solid .nav-link,
#site-header.is-solid #menu-toggle .hamburger-line { color: white; }
#site-header.is-solid .mobile-link { color: white; }

/* Mobile menu */
#mobile-menu.open { pointer-events: auto; opacity: 1; }
.mobile-link { display: block; color: white; text-decoration: none; transition: color 500ms ease; }
.mobile-link:hover { color: #C9A84C; }

/* Hamburger */
.hamburger-line { display: block; width: 20px; height: 1px; background: white; transition: all 500ms ease; }
.hamburger-line:nth-child(2) { margin-top: 4px; }
#menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
#menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }

/* Scroll indicator */
.scroll-indicator { animation: chevronBounce 2s infinite; }
.chevron { display: inline-block; width: 20px; height: 20px; border-right: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }

/* Hero media fallback */
.hero-media { background: linear-gradient(135deg, #1A1A1A 0%, #2C2C2C 100%); }
.hero-media::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,26,26,0.7) 0%, rgba(44,44,44,0.4) 100%);
  z-index: 1;
}
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('../img/hero-bg.webp'); background-size: cover; background-position: center; background-attachment: fixed;
  opacity: 0; transition: opacity 500ms ease;
  z-index: 0;
}
.hero-media.loaded::after { opacity: 1; }

/* About media fallback */
.about-media { position: relative; background: linear-gradient(135deg, #E8E2D9 0%, #F5F0EA 100%); }
.about-media::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('../img/about.webp'); background-size: cover; background-position: center;
  opacity: 0; transition: opacity 500ms ease;
}
.about-media.loaded::before { opacity: 1; }

/* Service tabs */
.service-tab {
  background: none; border: none; padding: 8px 16px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.2em; color: #1A1A1A;
  cursor: pointer; transition: color 500ms ease, border-color 500ms ease;
  border-bottom: 1px solid transparent;
}
.service-tab:hover { color: #C9A84C; }
.service-tab.is-active { color: #1A1A1A; border-bottom-color: #C9A84C; }

/* Service cards */
.service-card {
  padding: 20px; background: #F5F0EA; border: 1px solid transparent;
  transition: border-color 500ms ease, transform 500ms ease;
}
.service-card:hover { border-color: #C9A84C; transform: translateY(-2px); }
.service-card h3 { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 300; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 8px 0; color: #1A1A1A; }
.service-card .price { font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; color: #C9A84C; margin: 0 0 8px 0; }
.service-card p { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300; color: #888888; margin: 0; }

/* Portfolio grid */
.portfolio-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-auto-flow: dense;
}
@media (min-width: 640px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}
.portfolio-item {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #2C2C2C;
  transition: opacity 500ms ease, transform 500ms ease; opacity: 0; transform: scale(0.95);
}
.portfolio-item.is-visible { opacity: 1; transform: scale(1); }
.portfolio-item.portrait { aspect-ratio: 3 / 4; }
.portfolio-item img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 500ms ease; display: block;
}
.portfolio-item:hover img { transform: scale(1.03); }

/* Form fields */
.form-field { display: block; }
.form-field span {
  display: block; margin-bottom: 8px;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.18em; color: #1A1A1A;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; padding: 12px 16px; border: 1px solid #E8E2D9; background: white;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 300; color: #1A1A1A;
  transition: border-color 500ms ease;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: #C9A84C; }

/* Social icons */
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid #C9A84C;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.15em; color: #C9A84C;
  text-decoration: none; transition: background-color 500ms ease, color 500ms ease;
}
.social-icon:hover { background-color: #C9A84C; color: white; }

/* Footer links */
.footer-link { display: block; color: white; text-decoration: none; transition: color 500ms ease; }
.footer-link:hover { color: #C9A84C; }

/* Booking success state */
#booking-success.transition-in { opacity: 1; transition: opacity 500ms ease; }