/* ============================================================
   GLAMOUR GIRL — GSAP Premium Visual Effects
   ============================================================ */

/* ---- Page Transition Overlay ---- */
#gg-page-transition {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #886c55 0%, #d5b398 55%, #aa896e 100%);
  z-index: 999990;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  will-change: transform;
  /* Starts covering the screen; GSAP slides it away on load */
}

.gg-transition-logo img {
  width: clamp(80px, 20vw, 120px);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.gg-transition-dots {
  display: flex;
  gap: 10px;
}

.gg-transition-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  animation: gg-dot-bounce 1s ease-in-out infinite;
}

.gg-transition-dots span:nth-child(2) { animation-delay: 0.18s; }
.gg-transition-dots span:nth-child(3) { animation-delay: 0.36s; }

@keyframes gg-dot-bounce {
  0%, 80%, 100% { transform: translateY(0);   opacity: 0.65; }
  40%            { transform: translateY(-9px); opacity: 1;    }
}

/* ---- Scroll Progress Bar ---- */
.gg-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, #886c55, #d5b398, #aa896e);
  z-index: 99999;
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

/* ---- Service Card Shimmer ---- */
.service-card {
  --shimmer-x: 50%;
  --shimmer-y: 50%;
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(
    180px circle at var(--shimmer-x) var(--shimmer-y),
    rgba(213, 179, 152, 0.25),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 3;
}

.service-card:hover::after {
  opacity: 1;
}

/* ---- Logo Item Hover Glow ---- */
.logo-item {
  position: relative;
}

.logo-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(213, 179, 152, 0.35), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  border-radius: 16px;
  pointer-events: none;
}

.logo-item:hover::after { opacity: 1; }

/* ---- Section title clip-path support ---- */
.section-title h1,
.section-title h2 {
  will-change: clip-path, transform, opacity;
}

/* ---- About image container parallax ---- */
.about-img-container {
  will-change: transform;
}

/* ---- Magnetic button feel ---- */
.btn-hero,
.service-cta .btn-brand {
  will-change: transform;
  transform-style: preserve-3d;
}

/* ---- Testimonial card hover lift ---- */
.testimonial-card {
  will-change: transform;
}

/* ---- Section line transform origin ---- */
#service .section-title .line,
#gallery .section-title .line,
#testimonials .section-title .line,
#partners .section-title .line,
#about-us .section-title .line {
  transform-origin: left center;
  will-change: transform;
}

/* ---- Swiper gallery opacity will-change ---- */
#gallery .mySwiper {
  will-change: transform, opacity;
}

/* ---- Footer entrance will-change ---- */
.footer-brand, .footer-contact, .footer-hours {
  will-change: transform, opacity;
}

/* ---- Decorative glow on hero content (additive) ---- */
.hero-content::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 179, 152, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ---- Smooth rendering ---- */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Gallery page filter button hover ---- */
.gallery-filter-btn {
  will-change: transform;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease !important;
}

.gallery-filter-btn:hover {
  transform: translateY(-3px) !important;
}

/* ---- Price item hover (services page) ---- */
.price-item {
  transition: transform 0.25s ease, background 0.25s ease !important;
}

.price-item:hover {
  transform: translateX(6px) !important;
}

/* ---- Contact form input focus glow ---- */
.contact-form input:focus,
.contact-form textarea:focus,
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(170, 137, 110, 0.18) !important;
  border-color: #aa896e !important;
  transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* ---- Navbar entrance ---- */
.navbar {
  will-change: transform, background;
}