/* =========================================================
   Granate Dental — Subtle Animations
   ========================================================= */

/* Button ripple */
.btn { overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-expand .55s linear;
  background: rgba(255,255,255,.25);
  pointer-events: none;
}
@keyframes ripple-expand {
  to { transform: scale(4); opacity: 0; }
}

/* Animated underline on nav */
/* (handled in style.css via ::after pseudo) */

/* Image reveal on scroll */
.img-reveal-wrap { overflow: hidden; border-radius: inherit; }
.img-reveal-wrap img {
  transform: scale(1.08);
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
}
.img-reveal-wrap.visible img { transform: scale(1); }

/* Gallery shimmer on hover */
.gallery-item::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-15deg);
  transition: left .55s ease;
  pointer-events: none;
}
.gallery-item:hover::after { left: 125%; }

/* Floating booking button pulse ring */
.float-booking { position: fixed; }
.float-booking::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--primary);
  opacity: 0;
  animation: ring-pulse 2.8s ease-in-out infinite 1.2s;
}
@keyframes ring-pulse {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* Section title gradient em */
.section-title em,
.hero__title em,
.cta-booking__title em {
  background: linear-gradient(135deg, var(--primary) 0%, #e85370 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

/* Subtle bg breathe on alt sections */
.section--alt {
  position: relative;
}
.section--alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(200,31,55,.04) 0%, transparent 70%);
  pointer-events: none;
}

/* Doctor card: subtle 3D on hover */
.doctor-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Service card active line */
.service-card--featured .service-card__link {
  color: rgba(255,255,255,.85) !important;
}

/* Smooth scroll progress */
.scroll-progress { transition: width .08s linear; }