/* ==========================================================================
   Birla Dental Clinic — animations.css
   Hero Section & Features Strip — Enhanced Animations & Effects
   ========================================================================== */

/* ==========================================================================
   1. HERO — ENTRY ANIMATIONS (copy side)
   ========================================================================== */

/* Staggered fade-up for each copy element on page load */
.hero-anim-eyebrow {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp .7s cubic-bezier(.22,1,.36,1) .3s forwards;
}
.hero-anim-h1 {
  opacity: 0;
  transform: translateY(22px);
  animation: heroFadeUp .8s cubic-bezier(.22,1,.36,1) .5s forwards;
}
.hero-anim-lede {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp .7s cubic-bezier(.22,1,.36,1) .7s forwards;
}
.hero-anim-badges {
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUp .6s cubic-bezier(.22,1,.36,1) .88s forwards;
}
.hero-anim-actions {
  opacity: 0;
  transform: translateY(14px);
  animation: heroFadeUp .6s cubic-bezier(.22,1,.36,1) 1.05s forwards;
}

@keyframes heroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Visual (images) side — slides in from right */
.hero-visual-anim {
  opacity: 0;
  transform: translateX(40px);
  animation: heroSlideLeft .9s cubic-bezier(.22,1,.36,1) .4s forwards;
}
@keyframes heroSlideLeft {
  to { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   2. HERO — EXTRA GLOW ORBS
   ========================================================================== */

.hero-glow-3 {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,125,193,.12), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
  animation: glowFloat3 20s ease-in-out infinite -6s;
}
.hero-glow-4 {
  position: absolute;
  bottom: 10%;
  right: 20%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,97,.08), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: glowFloat3 15s ease-in-out infinite -10s reverse;
}
@keyframes glowFloat3 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(-20px, 30px) scale(1.08); }
  66%      { transform: translate(30px, -15px) scale(.95); }
}

/* ==========================================================================
   3. HERO — ANIMATED RINGS (desktop only)
   ========================================================================== */

.hero-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,169,97,.18);
  pointer-events: none;
  z-index: 0;
}
.hero-ring.r1 {
  width: 320px; height: 320px;
  top: -60px; right: -80px;
  animation: ringExpand 8s ease-in-out infinite;
}
.hero-ring.r2 {
  width: 200px; height: 200px;
  bottom: 10%; left: -40px;
  border-color: rgba(14,125,193,.15);
  animation: ringExpand 11s ease-in-out infinite -4s;
}
@keyframes ringExpand {
  0%,100% { transform: scale(1);   opacity: .7; }
  50%      { transform: scale(1.12); opacity: .3; }
}

@media (max-width: 980px) {
  .hero-ring { display: none; }
  .hero-glow-3, .hero-glow-4 { display: none; }
}

/* ==========================================================================
   4. HERO — DIAMOND PARTICLES
   ========================================================================== */

.hero-diamond {
  border-radius: 0 !important;
  transform: rotate(45deg);
  opacity: .5 !important;
  background: var(--gold) !important;
}
.hero-diamond.d1 {
  top: 15%; right: 12%;
  width: 7px !important; height: 7px !important;
  animation: diamondFloat1 10s ease-in-out infinite !important;
}
.hero-diamond.d2 {
  bottom: 30%; left: 22%;
  width: 5px !important; height: 5px !important;
  animation: diamondFloat2 13s ease-in-out infinite -3s !important;
}
.hero-diamond.d3 {
  top: 55%; right: 24%;
  width: 6px !important; height: 6px !important;
  animation: diamondFloat3 9s ease-in-out infinite -5s !important;
}
@keyframes diamondFloat1 {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity: .4; }
  50%      { transform: rotate(225deg) translate(20px,-18px); opacity: .9; }
}
@keyframes diamondFloat2 {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity: .5; }
  50%      { transform: rotate(225deg) translate(-15px,22px); opacity: 1; }
}
@keyframes diamondFloat3 {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity: .4; }
  50%      { transform: rotate(225deg) translate(18px,14px); opacity: .85; }
}

@media (max-width: 980px) {
  .hero-diamond { display: none; }
}

/* ==========================================================================
   5. HERO — TRUST BADGES ROW
   ========================================================================== */

.hero-trust-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px 6px 10px;
  border: 1px solid rgba(201,169,97,.35);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .01em;
  background: rgba(201,169,97,.06);
  backdrop-filter: blur(6px);
  transition: all .3s ease;
}
.hero-trust-badge svg {
  width: 14px; height: 14px;
  stroke: var(--gold);
  flex-shrink: 0;
}
.hero-trust-badge:hover {
  background: rgba(201,169,97,.15);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .hero-trust-badges { gap: 8px; }
  .hero-trust-badge { font-size: 11px; padding: 5px 10px 5px 8px; }
}

/* ==========================================================================
   6. HERO — CALL LINK (replaces Watch Our Story)
   ========================================================================== */

.hero-call-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: all .3s ease;
}
.hero-call-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--gold);
  transition: all .35s cubic-bezier(.4,0,.2,1);
  position: relative;
}
.hero-call-icon-wrap svg {
  width: 18px; height: 18px;
}
/* Pulse ring around call icon */
.hero-call-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(201,169,97,.4);
  animation: callRingPulse 2.2s ease-out infinite;
}
@keyframes callRingPulse {
  0%   { transform: scale(.85); opacity: .8; }
  100% { transform: scale(1.35); opacity: 0; }
}
.hero-call-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.hero-call-info small {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hero-call-info strong {
  font-size: 14.5px;
  color: rgba(255,255,255,.9);
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.hero-call-link:hover .hero-call-icon-wrap {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  transform: scale(1.08);
}
.hero-call-link:hover .hero-call-info strong {
  color: #fff;
}

/* ==========================================================================
   7. HERO — FLOATING STAT CARDS ON IMAGE VISUAL
   ========================================================================== */

.hero-stat-card {
  position: absolute;
  z-index: 4;
  background: rgba(11,37,69,.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(201,169,97,.35);
  border-radius: 16px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(201,169,97,.08);
}

/* Years card — top-left of visual */
.hsc-years {
  top: -18px;
  left: -24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  opacity: 0;
  border-top: 2px solid var(--gold);
  animation: statCardFloat 6s ease-in-out infinite, statCardEnter .7s ease 1.2s forwards;
}
.hsc-num {
  font-family: 'DM Serif Display', serif;
  font-size: 26px;
  color: var(--gold);
  line-height: 1;
}
.hsc-num sup {
  font-size: 14px;
}
.hsc-lbl {
  font-size: 11px;
  color: rgba(255,255,255,.92);
  font-weight: 600;
  line-height: 1.3;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .02em;
}

/* Patients card — bottom-right */
.hsc-patients {
  bottom: 24px;
  right: -18px;
  animation: statCardFloat2 8s ease-in-out infinite -3s, statCardEnter .7s ease 1.4s forwards;
  opacity: 0;
}
.hsc-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(201,169,97,.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hsc-icon svg {
  width: 18px; height: 18px;
  stroke: var(--gold);
}

@keyframes statCardEnter {
  to { opacity: 1; }
}
@keyframes statCardFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes statCardFloat2 {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

@media (max-width: 980px) {
  .hsc-years { top: -10px; left: -10px; padding: 8px 12px; }
  .hsc-patients { bottom: 12px; right: -10px; }
  .hsc-num { font-size: 20px; }
}
@media (max-width: 600px) {
  .hero-stat-card { display: none; }
}

/* ==========================================================================
   8. FEATURES STRIP — STAGGERED ENTRY + ENHANCED HOVER
   ========================================================================== */

/* Staggered slide-up on page load */
.feat-anim {
  opacity: 0;
  transform: translateY(16px);
  animation: featFadeUp .55s cubic-bezier(.22,1,.36,1) calc(1.3s + var(--feat-delay)) forwards;
}
@keyframes featFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Stronger icon hover — bounce scale */
.feat-item .feat-icon {
  transition: background .3s ease, color .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.feat-item:hover .feat-icon {
  background: var(--primary);
  color: #fff;
  transform: rotate(-8deg) scale(1.12);
  box-shadow: 0 8px 20px -4px rgba(14,125,193,.35);
}

/* Left border accent reveal on hover */
.feat-item {
  position: relative;
  overflow: hidden;
}
.feat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 0;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height .3s cubic-bezier(.22,1,.36,1);
}
.feat-item:hover::before {
  height: 60%;
}

/* Strong text lift on hover */
.feat-item .feat-text strong {
  transition: color .25s ease;
}
.feat-item:hover .feat-text strong {
  color: var(--primary);
}

/* Bottom glow on strip container */
.features-strip-wrap {
  position: relative;
}
.features-strip-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: .25;
}

/* ==========================================================================
   9. HERO — CONTINUOUS SCAN LINE ON IMAGES (subtle effect)
   ========================================================================== */

.hero-oval-main::after {
  content: '';
  position: absolute;
  left: 0; top: -10%;
  width: 100%; height: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  animation: scanLine 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes scanLine {
  0%   { top: -10%; opacity: .6; }
  50%  { top: 80%;  opacity: .3; }
  100% { top: 110%; opacity: 0; }
}

/* ==========================================================================
   10. HERO — SCROLL CUE (bottom of hero, desktop)
   ========================================================================== */

.hero-scroll-hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 3;
  opacity: 0;
  animation: heroFadeUp .5s ease 1.8s forwards;
}
.hero-scroll-hint span {
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
}
.hero-scroll-hint-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, rgba(201,169,97,.6), transparent);
  animation: scrollLineGrow 2s ease-in-out infinite;
}
@keyframes scrollLineGrow {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  100% { transform: scaleY(1); transform-origin: top; opacity: 0; }
}

@media (max-width: 980px) {
  .hero-scroll-hint { display: none; }
}


/* ==========================================================================
   ABOUT SECTION — SCROLL ENTRY ANIMATIONS
   ========================================================================== */

/* Base hidden state */
.about-anim-ready {
  opacity: 0;
  will-change: opacity, transform;
}

/* Image 1 — slides from left */
.about-img-1.about-anim-ready  { transform: translateX(-50px); }
.about-img-1.about-anim-in     { opacity: 1; transform: translateX(0); transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1); }

/* Image 2 — slides from bottom-right */
.about-img-2.about-anim-ready  { transform: translate(30px, 40px); }
.about-img-2.about-anim-in     { opacity: 1; transform: translate(0,0); transition: opacity .8s ease .15s, transform .9s cubic-bezier(.22,1,.36,1) .15s; }

/* Experience badge — pops in */
.about-experience.about-anim-ready  { transform: scale(.6) translateY(20px); }
.about-experience.about-anim-in     { opacity: 1; transform: scale(1) translateY(0); transition: opacity .6s ease .35s, transform .7s cubic-bezier(.34,1.56,.64,1) .35s; }

/* Content block (right column) — slides from right */
.about-content-wrap.about-anim-ready { transform: translateX(40px); }
.about-content-wrap.about-anim-in    { opacity: 1; transform: translateX(0); transition: opacity .8s ease .1s, transform .9s cubic-bezier(.22,1,.36,1) .1s; }

/* About feat cards — already handled by reveal-ready/revealed */
.about-feat.about-anim-ready { transform: translateY(20px); }
.about-feat.about-anim-in    { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .7s cubic-bezier(.22,1,.36,1); }

/* Doctor card */
.about-doctor.about-anim-ready { transform: translateY(18px); }
.about-doctor.about-anim-in    { opacity: 1; transform: translateY(0); transition: opacity .6s ease .2s, transform .7s cubic-bezier(.22,1,.36,1) .2s; }

/* Stagger about-feat items */
.about-feat:nth-child(1).about-anim-in { transition-delay: 0s; }
.about-feat:nth-child(2).about-anim-in { transition-delay: .1s; }
.about-feat:nth-child(3).about-anim-in { transition-delay: .18s; }
.about-feat:nth-child(4).about-anim-in { transition-delay: .26s; }

/* Enhanced about images — floating parallax feel */
.about-img-1 {
  transition: box-shadow .4s ease;
}
.about-img-1:hover {
  box-shadow: 0 40px 80px -20px rgba(11,37,69,.35);
}
.about-img-2:hover {
  box-shadow: 0 40px 80px -20px rgba(11,37,69,.4);
}

/* Continuous subtle float on experience badge */
.about-experience {
  animation: badgeRotateFloat 8s ease-in-out infinite;
}

/* Section bg decorative rotating ring */
.about-section-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(201,169,97,.15);
  pointer-events: none;
  animation: ringExpand 14s ease-in-out infinite;
}


/* ==========================================================================
   SERVICES SECTION — STAGGERED CARD ENTRANCE
   ========================================================================== */

.svc-hidden {
  opacity: 0;
  transform: translateY(36px) scale(.97);
}
.svc-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .6s ease calc(var(--svc-i, 0) * 0.07s),
              transform .7s cubic-bezier(.22,1,.36,1) calc(var(--svc-i, 0) * 0.07s);
}

/* Section heading fade-up */
.services .section-head-center {
  opacity: 0;
  transform: translateY(24px);
  animation: heroFadeUp .7s cubic-bezier(.22,1,.36,1) .1s forwards;
  animation-play-state: paused;
}
.services.in-view .section-head-center {
  animation-play-state: running;
}

/* Number badge that appears on hover (top-right of card) */
.service-hover-num {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(11,37,69,.6);
  backdrop-filter: blur(6px);
  color: rgba(255,255,255,.9);
  font-size: 11px;
  font-weight: 700;
  display: grid; place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .04em;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  z-index: 10;
}
.service:hover .service-hover-num {
  opacity: 1;
  transform: scale(1);
}

/* Shine sweep on service card hover */
.service::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.07) 50%, transparent 70%);
  pointer-events: none;
  z-index: 2;
  transition: left .7s cubic-bezier(.2,.8,.2,1);
}
.service:hover::after { left: 130%; }


/* ==========================================================================
   STATS BAND — STAGGERED ENTRANCE (replaces old stat-hidden/visible)
   ========================================================================== */

.stat-hidden {
  opacity: 0;
  transform: translateY(44px) scale(.92);
}
.stat-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .65s ease calc(var(--stat-i, 0) * 0.12s),
              transform .7s cubic-bezier(.22,1,.36,1) calc(var(--stat-i, 0) * 0.12s);
}

/* Glitter sparkles that float in the stats band */
.stats-band-sparkle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  pointer-events: none;
  animation: sparkleFloat 5s ease-in-out infinite;
}
.stats-band-sparkle.sp1 { width:5px;height:5px; top:20%;left:10%; animation-delay:0s; }
.stats-band-sparkle.sp2 { width:4px;height:4px; top:60%;left:30%; animation-delay:-1.5s; }
.stats-band-sparkle.sp3 { width:6px;height:6px; top:30%;right:15%; animation-delay:-3s; }
.stats-band-sparkle.sp4 { width:3px;height:3px; bottom:25%;right:35%; animation-delay:-2s; }
@keyframes sparkleFloat {
  0%,100% { transform: translateY(0) scale(1); opacity:.4; }
  50%      { transform: translateY(-18px) scale(1.5); opacity:1; }
}

/* Gold divider line between stat items (desktop) */
.stat-item + .stat-item {
  border-left: 1px solid rgba(255,255,255,.1) !important;
}

/* Stat icon hover: gold with glow */
.stat-item:hover .stat-icon {
  background: rgba(201,169,97,.9);
  box-shadow: 0 0 0 8px rgba(201,169,97,.15), 0 8px 24px rgba(201,169,97,.3);
  transform: rotate(360deg) scale(1.12);
  transition: transform .6s cubic-bezier(.34,1.56,.64,1), background .35s ease, box-shadow .35s ease;
}


/* ==========================================================================
   DOCTORS SECTION — STAGGERED ENTRANCE + EFFECTS
   ========================================================================== */

.doc-hidden {
  opacity: 0;
  transform: translateY(48px) scale(.95);
}
.doc-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .7s ease calc(var(--doc-i, 0) * 0.1s),
              transform .75s cubic-bezier(.22,1,.36,1) calc(var(--doc-i, 0) * 0.1s);
}

/* Section head — slide up */
.doctors-head {
  opacity: 0;
  transform: translateY(22px);
}
.doctors-head.in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}

/* Doctor photo: subtle brightness lift */
.doctor-photo img {
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .4s ease, brightness .4s ease;
}
.doctor:hover .doctor-photo img {
  filter: saturate(1.1) brightness(1.05);
}

/* Photo shimmer on hover */
.doctor-photo::before {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  pointer-events: none;
  z-index: 3;
  transition: left .8s cubic-bezier(.2,.8,.2,1);
}
.doctor:hover .doctor-photo::before { left: 140%; }

/* Doctor name: letter-spacing expand on hover */
.doctor-name {
  transition: color .3s ease, letter-spacing .3s ease;
}
.doctor:hover .doctor-name {
  color: var(--primary);
  letter-spacing: .01em;
}

/* Role badge: gold on hover */
.doctor:hover .doctor-role {
  background: rgba(201,169,97,.15);
  color: var(--gold);
  transition: background .3s ease, color .3s ease;
}

/* Doctors section background animation */
.doctors {
  position: relative;
}
.doctors::before {
  animation: statsOrb1 16s ease-in-out infinite;
}
.doctors::after {
  animation: statsOrb2 20s ease-in-out infinite;
}



/* ==========================================================================
   APPOINTMENT CTA — ENTRY + ENHANCED EFFECTS
   ========================================================================== */

/* Text block slides from left, buttons from right — already in styles.css  */
/* Here we enhance the existing cta-visible system with extra flourishes     */

/* Animated gold border line under h2 */
.appt-cta-grid > div:first-child h2 {
  position: relative;
}
.appt-cta-grid > div:first-child h2::after {
  content: '';
  position: absolute;
  bottom: -10px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(201,169,97,.3));
  border-radius: 2px;
  transition: width .9s cubic-bezier(.22,1,.36,1) .6s;
}
.appointment-cta.cta-visible .appt-cta-grid > div:first-child h2::after {
  width: 80px;
}

/* Floating particles inside CTA */
.cta-particle-1, .cta-particle-2, .cta-particle-3 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.cta-particle-1 {
  width: 180px; height: 180px;
  top: -50px; left: 40%;
  background: radial-gradient(circle, rgba(255,255,255,.04), transparent 70%);
  animation: ctaPart1 14s ease-in-out infinite;
}
.cta-particle-2 {
  width: 120px; height: 120px;
  bottom: -20px; left: 20%;
  background: radial-gradient(circle, rgba(201,169,97,.08), transparent 70%);
  animation: ctaPart2 11s ease-in-out infinite -4s;
}
.cta-particle-3 {
  width: 80px; height: 80px;
  top: 30%; right: 30%;
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
  animation: ctaPart3 9s ease-in-out infinite -7s;
}
@keyframes ctaPart1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-30px, 20px) scale(1.2); }
}
@keyframes ctaPart2 {
  0%,100% { transform: translate(0,0); }
  50%      { transform: translate(20px,-30px) scale(1.15); }
}
@keyframes ctaPart3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-15px, -15px) scale(1.3); }
}

/* Button: white btn shimmer effect */
.btn-white {
  position: relative; overflow: hidden;
}
.btn-white::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(14,125,193,.1), transparent);
  transition: left .6s ease;
}
.btn-white:hover::after { left: 130%; }

/* Gold btn: pulsing glow ring */
.btn-gold {
  position: relative;
}
.btn-gold::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(201,169,97,.4);
  opacity: 0;
  animation: btnGoldRing 2.5s ease-out infinite;
}
@keyframes btnGoldRing {
  0%   { transform: scale(.95); opacity: .7; }
  100% { transform: scale(1.12); opacity: 0; }
}


/* ==========================================================================
   GALLERY — STAGGERED ENTRANCE + FILTER EFFECTS
   ========================================================================== */

/* Section heading and filters slide up */
.gallery .section-head-center {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.gallery .section-head-center.in-view {
  opacity: 1; transform: translateY(0);
}
.gallery-filters {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease .2s, transform .7s cubic-bezier(.22,1,.36,1) .2s;
}
.gallery-filters.in-view {
  opacity: 1; transform: translateY(0);
}

/* Staggered item entrance (overrides opacity:0 from styles.css) */
.gm-item {
  opacity: 0;
  transform: scale(.94) translateY(20px);
}
.gm-item.gm-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity .6s ease calc(var(--gm-i, 0) * 0.08s),
              transform .7s cubic-bezier(.22,1,.36,1) calc(var(--gm-i, 0) * 0.08s),
              box-shadow .4s ease;
}

/* Filter button: active bounce */
.gf-btn {
  position: relative; overflow: hidden;
}
.gf-btn::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.7,0,.3,1);
  z-index: -1;
}
.gf-btn.active::after { transform: scaleX(1); }
.gf-btn.active { color: #fff; border-color: var(--primary); }

/* Image: Ken Burns subtle slow zoom (continuous, not just hover) */
.gm-item img {
  animation: gmKenBurns 10s ease-in-out infinite alternate;
}
.gm-item:hover img {
  animation: none;
  transform: scale(1.07);
}
@keyframes gmKenBurns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.04) translate(-1%, -1%); }
}

/* Overlay slide up with blur */
.gm-overlay {
  backdrop-filter: blur(2px);
}

/* Zoom button: scale-in on hover with spring */
.gm-zoom {
  transition: opacity .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease;
}
.gm-item:hover .gm-zoom {
  opacity: 1;
  transform: scale(1);
}

/* Gold corner accent on gm-tall item */
.gm-item.gm-tall::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 60px; height: 60px;
  background: linear-gradient(135deg, rgba(201,169,97,.3), transparent);
  z-index: 2; pointer-events: none;
  border-radius: 20px 0 0 0;
}


/* ==========================================================================
   TESTIMONIALS — STAGGERED ENTRANCE + ENHANCED EFFECTS
   ========================================================================== */

/* Staggered entrance (replaces fixed tc-visible from styles.css) */
.testi-card.tc-hidden {
  opacity: 0;
  transform: translateY(44px) scale(.96);
}
.testi-card.tc-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity .7s ease calc(var(--tc-i, 0) * 0.13s),
              transform .75s cubic-bezier(.22,1,.36,1) calc(var(--tc-i, 0) * 0.13s);
}
/* Keep middle card elevated after visible */
.testi-card:nth-child(2).tc-visible {
  transform: translateY(-8px) scale(1);
}

/* Section heading fade up */
.testimonials .section-head-center {
  opacity: 0;
  transform: translateY(22px);
}
.testimonials .section-head-center.testi-head-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}

/* Quote mark: always softly visible, bigger pulse on hover */
.testi-quote-mark {
  opacity: .14;
  transition: opacity .4s ease, transform .4s ease;
}

/* Stars: continuous subtle shimmer when card visible */
.testi-card.tc-visible .testi-stars svg {
  animation: starShimmer 3s ease-in-out infinite;
}
.testi-card.tc-visible .testi-stars svg:nth-child(1) { animation-delay: 0s; }
.testi-card.tc-visible .testi-stars svg:nth-child(2) { animation-delay: .15s; }
.testi-card.tc-visible .testi-stars svg:nth-child(3) { animation-delay: .3s; }
.testi-card.tc-visible .testi-stars svg:nth-child(4) { animation-delay: .45s; }
.testi-card.tc-visible .testi-stars svg:nth-child(5) { animation-delay: .6s; }
@keyframes starShimmer {
  0%,100% { filter: brightness(1); transform: scale(1); }
  50%      { filter: brightness(1.3); transform: scale(1.08); }
}
/* Override: hover star animation takes priority */
.testi-card:hover .testi-stars svg { animation: starPop .5s cubic-bezier(.2,.8,.2,1) forwards; }

/* Author photo: always has subtle gold ring after card loads */
.testi-card.tc-visible .testi-author-photo {
  border-color: rgba(201,169,97,.35);
  transition: border-color .35s ease .6s, box-shadow .35s ease .6s, transform .35s ease;
}


/* ==========================================================================
   FAQ — IMAGE SLIDE-IN + ITEMS STAGGER + HELP BANNER
   ========================================================================== */

/* FAQ image: hidden, slide from left */
.faq-anim-ready {
  opacity: 0;
  transform: translateX(-40px);
}
.faq-anim-ready.faq-anim-in {
  opacity: 1; transform: translateX(0);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}

/* FAQ items: staggered slide from right */
.faq-item-ready {
  opacity: 0;
  transform: translateX(30px);
}
.faq-item-ready.faq-anim-in {
  opacity: 1; transform: translateX(0);
  transition: opacity .6s ease calc(var(--faq-i, 0) * 0.1s),
              transform .7s cubic-bezier(.22,1,.36,1) calc(var(--faq-i, 0) * 0.1s);
}

/* FAQ help banner */
.faq-help-ready {
  opacity: 0;
  transform: translateY(16px);
}
.faq-help-ready.faq-anim-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s ease .45s, transform .7s cubic-bezier(.22,1,.36,1) .45s;
}

/* FAQ image: hover scale + brightness */
.faq-image img {
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .5s ease;
}
.faq-image:hover img {
  transform: scale(1.04);
  filter: brightness(1.06) saturate(1.08);
}

/* FAQ image: gold shimmer on hover */
.faq-image::before {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(201,169,97,.08), transparent);
  pointer-events: none; z-index: 3;
  transition: left .9s cubic-bezier(.2,.8,.2,1);
}
.faq-image:hover::before { left: 140%; }

/* FAQ item open: left accent line pulse */
.faq-item.open {
  border-left: 3px solid var(--primary);
}
.faq-item.open .faq-q-num {
  color: var(--primary);
  transition: color .3s ease;
}

/* FAQ q hover: number grows */
.faq-q:hover .faq-q-num {
  transform: scale(1.1);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

/* Info card in FAQ image: slide up on load */
.faq-image-card {
  transform: translateY(10px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1) .8s, opacity .5s ease .8s;
}
.faq-anim-in .faq-image-card {
  transform: translateY(0);
  opacity: 1;
}


/* ==========================================================================
   MARQUEE BAND — ENTRANCE + HOVER EFFECTS
   ========================================================================== */

.marquee-band {
  opacity: 0;
  transform: rotate(-2deg) translateY(20px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.marquee-band.marquee-visible {
  opacity: 1;
  transform: rotate(-2deg) translateY(0);
}

/* Each marquee item: subtle letter-spacing expand on hover */
.marquee-item {
  display: inline-block;
  transition: color .3s ease, letter-spacing .4s ease, transform .3s ease;
}
.marquee-band:hover .marquee-item:hover {
  color: #fff;
  letter-spacing: .03em;
  transform: scale(1.04);
}

/* Star separator: gold pulse */
.marquee-star {
  color: var(--gold);
  opacity: .7;
  animation: marqueeStarSpin 6s linear infinite, marqueeStarPulse 3s ease-in-out infinite;
}
@keyframes marqueeStarPulse {
  0%,100% { opacity: .5; }
  50%      { opacity: 1; }
}



/* ==========================================================================
   APPOINTMENT SECTION — ENTRY ANIMATIONS + ENHANCED EFFECTS
   ========================================================================== */

/* Left info column slides from left */
.appt-anim-ready {
  opacity: 0;
  transform: translateX(-40px);
}
.appt-anim-ready.appt-anim-in {
  opacity: 1; transform: translateX(0);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}

/* Right form card slides from right */
.appt-form-anim-ready {
  opacity: 0;
  transform: translateX(40px);
}
.appt-form-anim-ready.appt-anim-in {
  opacity: 1; transform: translateX(0);
  transition: opacity .8s ease .15s, transform .9s cubic-bezier(.22,1,.36,1) .15s;
}

/* Form card: gold top glow on focus-within */
.appt-form-card:focus-within {
  box-shadow: 0 0 0 3px rgba(201,169,97,.15), 0 24px 56px -16px rgba(11,37,69,.18);
}

/* Input fields: lift + glow on focus */
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 4px rgba(14,125,193,.1) !important;
  background: #fff !important;
  transform: translateY(-1px) !important;
}

/* Label float animation on focus */
.form-field label {
  transition: color .25s ease;
}
.form-field:focus-within label {
  color: var(--primary);
}

/* Form field: valid checkmark pop */
.field-check {
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%) scale(0);
  width: 20px; height: 20px;
  background: var(--primary);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  margin-top: 10px;
}
.field-check svg {
  width: 11px; height: 11px;
  stroke: #fff;
}
.form-field.field-valid .field-check {
  transform: translateY(-50%) scale(1);
}

/* Image: continuous soft shine animation */
.appt-info-img::after {
  content: '';
  position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.06), transparent);
  border-radius: 32px;
  animation: apptImgShine 7s ease-in-out infinite 3s;
  pointer-events: none; z-index: 2;
}
@keyframes apptImgShine {
  0%   { left: -80%; }
  40%  { left: 120%; }
  100% { left: 120%; }
}

/* Floating badges: gold ring glow on hover */
.appt-floating-badge:hover .appt-fb-icon {
  box-shadow: 0 0 0 6px rgba(14,125,193,.15);
}
.appt-floating-badge:hover .appt-fb-icon.gold {
  box-shadow: 0 0 0 6px rgba(201,169,97,.2);
}

/* Form progress bar: tick glow when 100% */
.appt-form-card[data-progress="100"] .appt-form-progress-fill {
  background: linear-gradient(90deg, var(--primary), #10B981, var(--primary));
}

/* Trust row: each item fades in */
.appt-trust-item {
  opacity: 0;
  transform: translateY(8px);
  animation: heroFadeUp .5s ease forwards;
}
.appt-form-anim-ready.appt-anim-in .appt-trust-item:nth-child(1) { animation-delay: .8s; }
.appt-form-anim-ready.appt-anim-in .appt-trust-item:nth-child(2) { animation-delay: .95s; }


/* ==========================================================================
   WHY BAND — ENTRY ANIMATIONS + EFFECTS
   ========================================================================== */

/* Quote slides from left */
.why-anim-ready {
  opacity: 0;
  transform: translateX(-36px);
}
.why-anim-ready.why-anim-in {
  opacity: 1; transform: translateX(0);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22,1,.36,1);
}

/* Stats side slides from right */
.why-stats-ready {
  opacity: 0;
  transform: translateX(36px);
}
.why-stats-ready.why-anim-in {
  opacity: 1; transform: translateX(0);
  transition: opacity .8s ease .15s, transform .9s cubic-bezier(.22,1,.36,1) .15s;
}

/* Individual stat numbers: staggered pop */
.why-stat {
  opacity: 0;
  transform: translateY(20px) scale(.92);
}
.why-stats-ready.why-anim-in .why-stat {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .6s ease calc(.3s + var(--why-i, 0) * .12s),
              transform .65s cubic-bezier(.34,1.56,.64,1) calc(.3s + var(--why-i, 0) * .12s);
}

/* Stat number: gold shimmer animation */
.why-stat-num {
  background: linear-gradient(90deg, var(--gold) 0%, #fff 50%, var(--gold) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: whyStatShimmer 4s linear infinite;
}
@keyframes whyStatShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Quote mark: continuous float */
.why-quote-mark {
  animation: quoteFloat 4s ease-in-out infinite;
}

/* Gold lines top/bottom: extend on view */
.why-band::before,
.why-band::after {
  transition: background-size 1.2s ease;
}


/* ==========================================================================
   LOCATIONS SECTION — ENTRY ANIMATIONS + EFFECTS
   ========================================================================== */

/* Section heading fades up */
.loc-head-ready {
  opacity: 0;
  transform: translateY(22px);
}
.loc-head-ready.loc-anim-in {
  opacity: 1; transform: translateY(0);
  transition: opacity .7s ease, transform .8s cubic-bezier(.22,1,.36,1);
}

/* Location cards stagger in */
.loc-anim-ready {
  opacity: 0;
  transform: translateY(48px) scale(.97);
}
.loc-anim-ready.loc-anim-in {
  opacity: 1; transform: translateY(0) scale(1);
  transition: opacity .7s ease calc(var(--loc-i, 0) * 0.15s),
              transform .8s cubic-bezier(.22,1,.36,1) calc(var(--loc-i, 0) * 0.15s);
}

/* Card: continuous subtle float */
.loc-card {
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease, border-color .4s ease;
}

/* Image: Ken Burns slow zoom */
.loc-card-img img {
  animation: locKenBurns 12s ease-in-out infinite alternate;
}
.loc-card:hover .loc-card-img img {
  animation: none;
  transform: scale(1.1);
}
@keyframes locKenBurns {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.04) translate(-1%,-1%); }
}

/* Big number: continuous slow drift */
.loc-card-bignum {
  animation: locBignumDrift 12s ease-in-out infinite;
}
@keyframes locBignumDrift {
  0%,100% { transform: rotate(0) translateY(0); }
  50%     { transform: rotate(-3deg) translateY(-8px); }
}

/* Stars: continuous twinkle already in styles.css — add glow pulse */
.loc-card.loc-anim-in .loc-stars svg {
  filter: drop-shadow(0 0 5px rgba(201,169,97,.6));
}

/* Map pin: hover stop bounce, scale up */
.loc-card:hover .loc-pin-marker {
  animation: none;
  transform: translate(-50%, -75%) rotate(-45deg) scale(1.15);
  box-shadow: 0 12px 32px -4px rgba(11,37,69,.5);
}

/* "Get Directions" btn: arrow bounce on hover */
.loc-card-actions .btn-primary:hover svg {
  animation: svcArrowBounce .5s ease infinite;
}

/* Meta row icons: spin on card hover */
.loc-card:hover .loc-meta-icon {
  background: var(--primary);
  color: #fff;
  transform: rotate(-10deg) scale(1.05);
}