/* ============================================
   OPLIVE - CUSTOM ANIMATIONS CSS
   ============================================ */

/* ---- Keyframe Definitions ---- */

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

@keyframes floatX {
  0%,
  100% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(10px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 150, 255, 0.25);
  }
  50% {
    box-shadow: 0 0 24px 10px rgba(0, 150, 255, 0.18);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes scale-in {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slide-up-fade {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-left-fade {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slide-right-fade {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes fadeInStagger {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dot-ping {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.6;
  }
}

@keyframes number-pop {
  0% {
    transform: scale(0.5) rotate(-10deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.15) rotate(4deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes underline-grow {
  0% {
    width: 0;
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

@keyframes card-rise {
  0% {
    transform: translateY(50px) scale(0.97);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes icon-bounce {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  30% {
    transform: translateY(-8px) rotate(-6deg);
  }
  60% {
    transform: translateY(-4px) rotate(4deg);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes avatar-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.04);
  }
}

@keyframes metr-spin {
  0% {
    transform: rotate(-5deg) scale(1);
  }
  50% {
    transform: rotate(5deg) scale(1.06);
  }
  100% {
    transform: rotate(-5deg) scale(1);
  }
}

/* ---- Hero Section ---- */
.hero-section .main-hero-title h2 {
  animation: slide-left-fade 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-section .main-hero-title p {
  animation: slide-up-fade 1s 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero-section .doctor-top {
  animation: slide-left-fade 0.7s 0.1s both;
}

.hero-section .mobilemokup img {
  animation: floatY 4s ease-in-out infinite;
}

.hero-section .scope img {
  animation: floatX 3.5s ease-in-out infinite;
}

.hero-section .download-app-parent {
  animation: bounce-in 0.8s 0.6s both;
  transition: transform 0.3s;
}
.hero-section .download-app-parent:hover {
  transform: scale(1.07);
}

.hero-section .count-user {
  animation: slide-up-fade 0.8s 0.8s both;
}

.hero-section .count-user img {
  animation: avatar-float 3s ease-in-out infinite;
}

/* ---- Dot badges ---- */
.doctor-top img {
  animation: dot-ping 1.8s ease-in-out infinite;
  display: inline-block;
}

/* ---- Step section ---- */
.stepr-main .step-inside {
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.stepr-main .step-inside:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.stepr-main .step-inside img {
  transition: transform 0.4s;
}
.stepr-main .step-inside:hover img {
  transform: scale(1.15) rotate(-4deg);
}
.stepr-main h4 {
  animation: slide-up-fade 0.6s both;
}
.stepr-main p {
  animation: slide-up-fade 0.7s 0.1s both;
}

/* ---- Why Choose Section ---- */
.why-choose .why-c-title h2 {
  animation: slide-left-fade 0.8s both;
}

.why-choose .feature-item {
  opacity: 0;
  animation: card-rise 0.65s forwards;
  transition:
    background 0.3s,
    box-shadow 0.3s,
    transform 0.3s;
}
.why-choose .feature-item:hover {
  transform: translateX(6px);
}
.why-choose .feature-item:nth-child(1) {
  animation-delay: 0.1s;
}
.why-choose .feature-item:nth-child(2) {
  animation-delay: 0.25s;
}
.why-choose .feature-item:nth-child(3) {
  animation-delay: 0.4s;
}

.why-choose .feature-item img {
  transition: transform 0.35s;
}
.why-choose .feature-item:hover img {
  transform: scale(1.2) rotate(8deg);
  animation: icon-bounce 0.7s ease-in-out;
}

.why-choose .showcase-box img {
  animation: floatY 5s ease-in-out infinite;
  transition: transform 0.3s;
}
.why-choose .showcase-box img:hover {
  transform: scale(1.03);
}

/* ---- Expert Section ---- */
.expert-sec .feature-number {
  animation: number-pop 0.6s both;
  transition:
    transform 0.3s,
    color 0.3s;
}
.expert-sec .feature-item {
  opacity: 0;
  animation: card-rise 0.6s forwards;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.expert-sec .feature-item:hover {
  transform: translateX(8px);
}
.expert-sec .feature-item:nth-child(1) {
  animation-delay: 0.05s;
}
.expert-sec .feature-item:nth-child(2) {
  animation-delay: 0.15s;
}
.expert-sec .feature-item:nth-child(3) {
  animation-delay: 0.25s;
}
.expert-sec .feature-item:nth-child(4) {
  animation-delay: 0.35s;
}
.expert-sec .feature-item:nth-child(5) {
  animation-delay: 0.45s;
}

.expert-sec .phone-wrapper-1 img {
  animation: floatY 4.5s ease-in-out infinite;
}

/* ---- OP Booking Section ---- */
.op-bk-main .dr-img-in img {
  animation: scale-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  transition: transform 0.4s;
}
.op-bk-main .dr-img-in img:hover {
  transform: scale(1.04);
}

.op-bk-main .metr img {
  animation: metr-spin 4s ease-in-out infinite;
}

.op-bk-main .features-bk {
  opacity: 0;
  animation: slide-left-fade 0.6s forwards;
  transition: transform 0.3s;
}
.op-bk-main .features-bk:hover {
  transform: translateX(6px);
}
.op-bk-main .features-bk:nth-child(1) {
  animation-delay: 0.1s;
}
.op-bk-main .features-bk:nth-child(3) {
  animation-delay: 0.25s;
}
.op-bk-main .features-bk:nth-child(5) {
  animation-delay: 0.4s;
}

.op-bk-main .icon-bkg {
  transition: transform 0.35s;
  animation: pulse-glow 2.5s ease-in-out infinite;
}
.op-bk-main .features-bk:hover .icon-bkg {
  transform: scale(1.15) rotate(-8deg);
}

/* ---- Benefits Section ---- */
.benefits-s .med-card {
  overflow: hidden;
  transition:
    transform 0.4s,
    box-shadow 0.4s;
}
.benefits-s .med-card:hover {
  transform: scale(1.025);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.benefits-s .med-card img {
  transition: transform 0.5s;
}
.benefits-s .med-card:hover img {
  transform: scale(1.08);
}

.benefits-s .med-feature {
  opacity: 0;
  animation: fadeInStagger 0.55s forwards;
  transition: transform 0.3s;
}
.benefits-s .med-feature:hover {
  transform: translateX(5px);
}
/* Stagger for all med-features */
.benefits-s .col-md-6:nth-child(1) .med-feature:nth-child(1) {
  animation-delay: 0.1s;
}
.benefits-s .col-md-6:nth-child(1) .med-feature:nth-child(2) {
  animation-delay: 0.2s;
}
.benefits-s .col-md-6:nth-child(1) .med-feature:nth-child(3) {
  animation-delay: 0.3s;
}
.benefits-s .col-md-6:nth-child(2) .med-feature:nth-child(1) {
  animation-delay: 0.2s;
}
.benefits-s .col-md-6:nth-child(2) .med-feature:nth-child(2) {
  animation-delay: 0.35s;
}
.benefits-s .col-md-6:nth-child(2) .med-feature:nth-child(3) {
  animation-delay: 0.45s;
}

.benefits-s .med-number {
  transition:
    transform 0.3s,
    color 0.3s;
}
.benefits-s .med-feature:hover .med-number {
  transform: scale(1.3);
}

/* ---- Health / Security Section ---- */
.helth-s .sec-card {
  opacity: 0;
  animation: card-rise 0.65s forwards;
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.helth-s .sec-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 100, 255, 0.12);
}
.helth-s .col-lg-6:nth-child(1) .sec-card {
  animation-delay: 0.05s;
}
.helth-s .col-lg-6:nth-child(2) .sec-card {
  animation-delay: 0.18s;
}
.helth-s .col-lg-6:nth-child(3) .sec-card {
  animation-delay: 0.3s;
}
.helth-s .col-lg-6:nth-child(4) .sec-card {
  animation-delay: 0.42s;
}

.helth-s .sec-icon {
  transition: transform 0.35s;
  animation: icon-bounce 3s ease-in-out infinite;
}
.helth-s .sec-card:hover .sec-icon {
  transform: scale(1.25) rotate(10deg);
}

/* ---- Testimonial Section ---- */
.ts-section-1 .ts-profile img {
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.ts-section-1 .ts-profile img:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 18px rgba(0, 100, 255, 0.2);
}

.ts-section-1 .ts-review {
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.ts-section-1 .ts-review:hover {
  transform: translateY(-6px);
}

.ts-section-1 .ts-quote img {
  animation: floatY 3s ease-in-out infinite;
}

.ts-section-1 .ts-arrow-btn {
  transition:
    transform 0.3s,
    background 0.3s;
}
.ts-section-1 .ts-arrow-btn:hover {
  transform: scale(1.15);
}

/* ---- App Download Section ---- */
.app-section .app-mkp-img img {
  animation: floatY 4s ease-in-out infinite;
  transition: transform 0.4s;
}
.app-section .app-mkp-img img:hover {
  transform: scale(1.04) translateY(-10px);
}

.app-section .app-points .point-in {
  opacity: 0;
  animation: slide-left-fade 0.55s forwards;
  transition: transform 0.3s;
}
.app-section .app-points .point-in:hover {
  transform: translateX(5px);
}
.app-section .app-points:nth-child(1) .point-in:nth-child(1) {
  animation-delay: 0.1s;
}
.app-section .app-points:nth-child(1) .point-in:nth-child(2) {
  animation-delay: 0.2s;
}
.app-section .app-points:nth-child(2) .point-in:nth-child(1) {
  animation-delay: 0.25s;
}
.app-section .app-points:nth-child(2) .point-in:nth-child(2) {
  animation-delay: 0.35s;
}
.app-section .app-points:nth-child(3) .point-in:nth-child(1) {
  animation-delay: 0.4s;
}
.app-section .app-points:nth-child(3) .point-in:nth-child(2) {
  animation-delay: 0.5s;
}

.app-section .app-points .point-in img {
  transition: transform 0.35s;
}
.app-section .app-points .point-in:hover img {
  transform: rotate(20deg) scale(1.2);
}

.app-section .download-on-stor a img {
  transition:
    transform 0.35s,
    box-shadow 0.35s;
}
.app-section .download-on-stor a img:hover {
  transform: translateY(-5px) scale(1.07);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.app-section .count-user img {
  animation: avatar-float 3s ease-in-out infinite;
}

/* ---- Header / Navbar ---- */
.main-navbardesign .brand-logo {
  transition: transform 0.35s;
}
.main-navbardesign .brand-logo:hover {
  transform: scale(1.08);
}

.navbar-ui li a {
  position: relative;
  transition: color 0.3s;
}
.navbar-ui li a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s;
  border-radius: 2px;
}
.navbar-ui li a:hover::after {
  width: 100%;
}

.frame-parent .download-app-parent {
  transition:
    transform 0.3s,
    box-shadow 0.3s;
}
.frame-parent .download-app-parent:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 24px rgba(0, 100, 255, 0.2);
}

/* ---- Footer ---- */
.op-footer .op-logo img {
  transition:
    transform 0.35s,
    filter 0.3s;
}
.op-footer .op-logo img:hover {
  transform: scale(1.06);
  filter: brightness(1.2);
}

.op-footer .op-links li a {
  position: relative;
  transition:
    padding-left 0.3s,
    color 0.3s;
}
.op-footer .op-links li a::before {
  content: "→";
  position: absolute;
  left: -18px;
  opacity: 0;
  transition:
    opacity 0.3s,
    left 0.3s;
}
.op-footer .op-links li a:hover {
  padding-left: 16px;
}
.op-footer .op-links li a:hover::before {
  opacity: 1;
  left: 0;
}

.op-footer .op-social a {
  transition:
    transform 0.35s,
    color 0.3s;
  display: inline-block;
}
.op-footer .op-social a:hover {
  transform: translateY(-5px) scale(1.2);
}

.op-footer .op-subscribe-box button {
  transition:
    transform 0.3s,
    background 0.3s;
}
.op-footer .op-subscribe-box button:hover {
  transform: scale(1.12) rotate(10deg);
}

/* ---- Section titles animated underline ---- */
.why-c-title h2 span {
  position: relative;
  display: inline-block;
}
.why-c-title h2 span::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
  width: 0;
  animation: underline-grow 1.2s 0.5s forwards;
}

/* ---- Back-to-top button ---- */
.progress-wrap {
  transition: transform 0.3s;
}
.progress-wrap:hover {
  transform: scale(1.15);
}

/* ---- Scroll-triggered animations via IntersectionObserver ---- */
.anim-trigger {
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.anim-trigger.is-hidden {
  opacity: 0;
  transform: translateY(30px);
}
.anim-trigger.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children when parent enters viewport */
.stagger-parent .stagger-child {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.stagger-parent.stagger-visible .stagger-child:nth-child(1) {
  transition-delay: 0.05s;
  opacity: 1;
  transform: none;
}
.stagger-parent.stagger-visible .stagger-child:nth-child(2) {
  transition-delay: 0.15s;
  opacity: 1;
  transform: none;
}
.stagger-parent.stagger-visible .stagger-child:nth-child(3) {
  transition-delay: 0.25s;
  opacity: 1;
  transform: none;
}
.stagger-parent.stagger-visible .stagger-child:nth-child(4) {
  transition-delay: 0.35s;
  opacity: 1;
  transform: none;
}
.stagger-parent.stagger-visible .stagger-child:nth-child(5) {
  transition-delay: 0.45s;
  opacity: 1;
  transform: none;
}
.stagger-parent.stagger-visible .stagger-child:nth-child(6) {
  transition-delay: 0.55s;
  opacity: 1;
  transform: none;
}