/* =========================================================
   PARAM DENTAL CLINIC - FINAL ANIMATIONS
   Hero Load + Scroll Reveal + Screen-Outside Entry
========================================================= */

:root{
  --reveal-duration: 1.15s;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}

/* =========================================================
   BASE
========================================================= */
html{
  scroll-behavior: smooth;
}
body{
  overflow-x: hidden;
}

/* =========================================================
   1) HERO LOAD ANIMATIONS
========================================================= */
.hero-section,
.hero-banner{
  position: relative;
  overflow: hidden;
}

.hero-mini-card,
.hero-badge,
.hero-top-badge{
  opacity: 0;
  transform: translateY(60px) scale(.92);
  animation: heroBadgeIn .9s ease forwards;
}

.hero-mini-card:nth-child(1),
.hero-badge:nth-child(1),
.hero-top-badge:nth-child(1){ animation-delay: .15s; }

.hero-mini-card:nth-child(2),
.hero-badge:nth-child(2),
.hero-top-badge:nth-child(2){ animation-delay: .35s; }

.hero-title,
.hero-section h1{
  opacity: 0;
  transform: translateY(90px);
  animation: heroTitleIn 1.1s var(--reveal-ease) forwards;
  animation-delay: .35s;
}

.hero-subtitle,
.hero-section .lead,
.hero-section p{
  opacity: 0;
  transform: translateY(70px);
  animation: heroTextIn .95s ease forwards;
  animation-delay: .6s;
}

.hero-btn-group .btn,
.hero-section .btn{
  opacity: 0;
  transform: translateY(50px) scale(.95);
  animation: heroBtnIn .85s ease forwards;
}
.hero-btn-group .btn:nth-child(1),
.hero-section .btn:nth-child(1){ animation-delay: .85s; }
.hero-btn-group .btn:nth-child(2),
.hero-section .btn:nth-child(2){ animation-delay: 1s; }
.hero-btn-group .btn:nth-child(3),
.hero-section .btn:nth-child(3){ animation-delay: 1.15s; }

.hero-image,
.hero-image-wrap,
.hero-doctor,
.hero-visual{
  opacity: 0;
  transform: translateX(120vw) scale(.92);
  animation: heroImageIn 1.2s var(--reveal-ease) forwards;
  animation-delay: .45s;
}

.hero-feature-card,
.stat-box{
  opacity: 0;
  transform: translateY(70px) scale(.94);
  animation: heroCardIn .85s ease forwards;
}

.hero-feature-card:nth-child(1),
.hero-stats .col-6:nth-child(1) .stat-box{ animation-delay: 1.05s; }
.hero-feature-card:nth-child(2),
.hero-stats .col-6:nth-child(2) .stat-box{ animation-delay: 1.18s; }
.hero-feature-card:nth-child(3),
.hero-stats .col-6:nth-child(3) .stat-box{ animation-delay: 1.3s; }

/* =========================================================
   2) GLOBAL REVEAL SYSTEM
   .show class lagte hi animate
========================================================= */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-rotate,
.reveal-down{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform var(--reveal-duration) var(--reveal-ease),
    opacity 1s ease;
}

/* ---------- SCREEN-OUTSIDE ENTRY ---------- */
.reveal-up{
  transform: translateY(140px);
}

.reveal-down{
  transform: translateY(-140px);
}

.reveal-left{
  transform: translateX(-120vw);
}

.reveal-right{
  transform: translateX(120vw);
}

.reveal-zoom{
  transform: scale(.6);
}

.reveal-rotate{
  transform: translateX(-100vw) rotate(-12deg) scale(.88);
}

/* show state */
.reveal-up.show,
.reveal-left.show,
.reveal-right.show,
.reveal-zoom.show,
.reveal-rotate.show,
.reveal-down.show{
  opacity: 1;
  transform: translate(0,0) scale(1) rotate(0);
}

/* stagger delays */
.stagger-1{ transition-delay: .08s; }
.stagger-2{ transition-delay: .18s; }
.stagger-3{ transition-delay: .28s; }
.stagger-4{ transition-delay: .38s; }
.stagger-5{ transition-delay: .48s; }
.stagger-6{ transition-delay: .58s; }

/* speed helpers */
.reveal-fast{ transition-duration: .75s !important; }
.reveal-slow{ transition-duration: 1.35s !important; }

/* =========================================================
   3) FLOAT / PULSE
   NOTE: float ko reveal wale same element par mat lagana.
   Float child/icon par lagana.
========================================================= */
.float-soft{
  animation: floatSoft 4.8s ease-in-out infinite;
}
.float-soft-delay{
  animation: floatSoft 5.6s ease-in-out infinite .8s;
}
.pulse-soft{
  animation: pulseSoft 2.6s ease-in-out infinite;
}

/* =========================================================
   4) OPTIONAL ENHANCED CARD LOOK
========================================================= */
.reveal-up.service-card.show,
.reveal-up.doctor-card.show,
.reveal-up.pricing-card.show,
.reveal-up.testimonial-card.show,
.reveal-up.about-info-card.show,
.reveal-up.why-choose-card.show,
.reveal-up.process-step.show,
.reveal-up.gallery-card.show,
.reveal-up.before-after-card.show,
.reveal-up.contact-card.show,
.reveal-up.emergency-item.show{
  animation: cardPop .9s ease both;
}

/* =========================================================
   5) KEYFRAMES
========================================================= */
@keyframes heroBadgeIn{
  from{
    opacity: 0;
    transform: translateY(60px) scale(.92);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroTitleIn{
  from{
    opacity: 0;
    transform: translateY(90px);
    filter: blur(4px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes heroTextIn{
  from{
    opacity: 0;
    transform: translateY(70px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroBtnIn{
  from{
    opacity: 0;
    transform: translateY(50px) scale(.95);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroImageIn{
  from{
    opacity: 0;
    transform: translateX(120vw) scale(.92);
  }
  to{
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes heroCardIn{
  from{
    opacity: 0;
    transform: translateY(70px) scale(.94);
  }
  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes floatSoft{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

@keyframes pulseSoft{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.05); }
}

@keyframes cardPop{
  0%{
    transform: translateY(30px) scale(.96);
    opacity: 0;
  }
  70%{
    transform: translateY(-6px) scale(1.01);
    opacity: 1;
  }
  100%{
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* =========================================================
   6) MOBILE TUNING
========================================================= */
@media (max-width: 991.98px){
  :root{
    --reveal-duration: .95s;
  }

  .reveal-left{ transform: translateX(-130%); }
  .reveal-right{ transform: translateX(130%); }
  .reveal-up{ transform: translateY(90px); }
  .reveal-down{ transform: translateY(-90px); }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-zoom,
  .reveal-rotate,
  .reveal-down{
    opacity: 1 !important;
    transform: none !important;
  }
}

.hero-animate{
  opacity: 0;
  animation: heroFancyIn 1s cubic-bezier(.2,.65,.2,1) forwards;
}

@keyframes heroFancyIn{
  0%{
    opacity:0;
    transform:translateY(28px) scale(.96);
    filter:blur(4px);
  }
  60%{
    opacity:1;
    transform:translateY(-4px) scale(1.01);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

/* =========================
   DOCTORS SECTION SPECIAL ANIMATION
========================= */

.doctor-slide-left,
.doctor-slide-right,
.doctor-pop-up{
  opacity: 0;
  transition: all 1s cubic-bezier(.2,.65,.2,1);
  will-change: transform, opacity;
}

/* Screen ke left bahar se */
.doctor-slide-left{
  transform: translateX(-180px) scale(.92);
}

/* Screen ke right bahar se */
.doctor-slide-right{
  transform: translateX(180px) scale(.92);
}

/* Bottom + zoom pop */
.doctor-pop-up{
  transform: translateY(120px) scale(.82);
}

/* Observer active hote hi */
.reveal-active.doctor-slide-left,
.reveal-active.doctor-slide-right,
.reveal-active.doctor-pop-up{
  opacity: 1 !important;
  transform: translate(0,0) scale(1) !important;
}
/* =========================================================
   CONTACT + FOOTER + FLOATING + MODAL + TOAST ANIMATIONS
========================================================= */

/* CONTACT SECTION */
.contact-section{
  position: relative;
  overflow: hidden;
}

.contact-card{
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 16px 45px rgba(13, 110, 253, 0.08);
  border: 1px solid rgba(13, 110, 253, 0.08);
  transition: transform .4s ease, box-shadow .4s ease, border-color .4s ease;
  position: relative;
  overflow: hidden;
}

.contact-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,110,253,0.05), rgba(32,201,151,0.05));
  opacity: 0;
  transition: opacity .4s ease;
}

.contact-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 24px 60px rgba(13, 110, 253, 0.14);
  border-color: rgba(13, 110, 253, 0.18);
}

.contact-card:hover::before{
  opacity: 1;
}

.contact-card > *{
  position: relative;
  z-index: 2;
}

.contact-card .icon{
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(13,110,253,0.12), rgba(32,201,151,0.14));
  color: #0d6efd;
  font-size: 1.6rem;
  box-shadow: 0 12px 28px rgba(13, 110, 253, 0.10);
  transition: transform .4s ease, box-shadow .4s ease;
}

.contact-card:hover .icon{
  transform: rotate(-6deg) scale(1.08);
  box-shadow: 0 18px 36px rgba(13, 110, 253, 0.16);
}

.contact-card h5{
  margin-bottom: 10px;
  font-weight: 700;
}

.contact-card p{
  margin-bottom: 0;
  color: #5f6b7a;
  line-height: 1.7;
}

/* FOOTER */
.footer-section{
  position: relative;
  background:
    radial-gradient(circle at top left, rgba(13,110,253,0.18), transparent 30%),
    radial-gradient(circle at bottom right, rgba(32,201,151,0.16), transparent 30%),
    #0f172a;
  color: rgba(255,255,255,0.82);
  padding: 80px 0 30px;
  overflow: hidden;
}

.footer-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  pointer-events: none;
}

.footer-brand,
.footer-widget{
  position: relative;
  z-index: 2;
}

.footer-logo{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(0,0,0,0.25);
}

.footer-brand p{
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  margin-bottom: 18px;
}

.footer-widget h5{
  color: #fff;
  margin-bottom: 20px;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.footer-widget h5::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d6efd, #20c997);
}

.footer-widget ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-widget ul li{
  margin-bottom: 12px;
}

.footer-widget ul li a,
.footer-contact li{
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: all .35s ease;
}

.footer-widget ul li a:hover{
  color: #fff;
  padding-left: 6px;
}

.footer-contact li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.7;
}

.footer-contact li i{
  color: #20c997;
  margin-top: 4px;
}

.footer-socials{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-socials a{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .35s ease, background .35s ease, box-shadow .35s ease;
}

.footer-socials a:hover{
  transform: translateY(-6px) scale(1.06);
  background: linear-gradient(135deg, #0d6efd, #20c997);
  box-shadow: 0 16px 34px rgba(13, 110, 253, 0.28);
}

.footer-divider{
  border-color: rgba(255,255,255,0.12);
  margin: 32px 0 24px;
}

/* FLOATING ACTION BUTTONS */
.floating-actions{
  position: fixed;
  right: 18px;
  bottom: 22px;
  z-index: 1055;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fab{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
  position: relative;
  overflow: hidden;
}

.fab::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
  opacity: 0;
  transition: opacity .35s ease;
}

.fab:hover{
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 18px 38px rgba(0,0,0,0.24);
  filter: saturate(1.08);
}

.fab:hover::before{
  opacity: 1;
}

.fab-whatsapp{ background: linear-gradient(135deg, #1dbf73, #25d366); }
.fab-call{ background: linear-gradient(135deg, #0d6efd, #3b82f6); }
.fab-book{ background: linear-gradient(135deg, #ff9f1a, #ffc107); color: #212529; }
.fab-top{ background: linear-gradient(135deg, #212529, #495057); }

/* subtle pulse on whatsapp + call */
.fab-whatsapp,
.fab-call{
  animation: fabPulse 2.4s infinite;
}

@keyframes fabPulse{
  0%{ box-shadow: 0 0 0 0 rgba(37,211,102,0.35), 0 14px 30px rgba(0,0,0,0.16); }
  70%{ box-shadow: 0 0 0 14px rgba(37,211,102,0), 0 14px 30px rgba(0,0,0,0.16); }
  100%{ box-shadow: 0 0 0 0 rgba(37,211,102,0), 0 14px 30px rgba(0,0,0,0.16); }
}

/* stagger pop when page loads */
.fab-pop{
  animation: fabEntry .75s cubic-bezier(.2,.9,.2,1) both;
}
.floating-actions .fab:nth-child(1){ animation-delay: .15s; }
.floating-actions .fab:nth-child(2){ animation-delay: .28s; }
.floating-actions .fab:nth-child(3){ animation-delay: .41s; }
.floating-actions .fab:nth-child(4){ animation-delay: .54s; }

@keyframes fabEntry{
  0%{
    opacity: 0;
    transform: translateX(40px) scale(.75);
  }
  100%{
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* GALLERY MODAL */
.gallery-modal-content{
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #0f172a;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}

.gallery-modal-content img{
  transition: transform .5s ease;
}

.gallery-modal-content:hover img{
  transform: scale(1.02);
}

.gallery-close-btn{
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  padding: 10px;
}

/* TOAST */
.toast-container-custom{
  z-index: 1080;
}

#appointmentToast{
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
  overflow: hidden;
}

/* RESPONSIVE */
@media (max-width: 991.98px){
  .footer-section{
    padding-top: 70px;
  }
}

@media (max-width: 575.98px){
  .floating-actions{
    right: 12px;
    bottom: 14px;
    gap: 10px;
  }

  .fab{
    width: 50px;
    height: 50px;
    font-size: 1.1rem;
  }

  .contact-card{
    border-radius: 20px;
  }

  .contact-card .icon{
    width: 64px;
    height: 64px;
    border-radius: 18px;
    font-size: 1.4rem;
  }

  .footer-logo{
    width: 56px;
    height: 56px;
  }
}