/* =============================================================
   LUXURY DENTAL CLINIC — ADVANCED INTERACTION SYSTEM 2026
   Staggered Reveal · Smooth Parallax · Magnetic · Hover · Fade
   ============================================================= */

/* ----------------------------------------------------------
   1. PAGE TRANSITION OVERLAY
   ---------------------------------------------------------- */
#ldc-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 9999990;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
}

#ldc-overlay.ldc-hidden {
  opacity: 0;
}

#ldc-overlay.ldc-visible {
  opacity: 1;
  pointer-events: all;
}

/* ----------------------------------------------------------
   2. STAGGERED REVEAL BASE
   Elementos que emergen con scroll secuencial
   ---------------------------------------------------------- */
.ldc-reveal {
  opacity: 0;
  will-change: opacity, transform;
}

.ldc-reveal[data-ldc-dir="up"] {
  transform: translateY(44px);
}

.ldc-reveal[data-ldc-dir="down"] {
  transform: translateY(-28px);
}

.ldc-reveal[data-ldc-dir="left"] {
  transform: translateX(-44px);
}

.ldc-reveal[data-ldc-dir="right"] {
  transform: translateX(44px);
}

.ldc-reveal[data-ldc-dir="scale"] {
  transform: scale(0.88);
  transform-origin: center bottom;
}

.ldc-reveal[data-ldc-dir="fade"] {
  transform: none;
}

/* Estado visible — la transición sólo activa cuando se añade la clase */
.ldc-reveal.ldc-in {
  opacity: 1;
  transform: translate(0, 0) scale(1);
  transition:
    opacity  0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--ldc-delay, 0ms);
}

/* ----------------------------------------------------------
   3. ORGANIC HOVER — CARDS DE SERVICIOS
   ---------------------------------------------------------- */
.card {
  transition:
    transform  0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  will-change: transform;
  backface-visibility: hidden;
}

.card:hover {
  transform: translateY(-11px) !important;
  box-shadow:
    0 24px 56px rgba(57, 173, 255, 0.13),
    0 6px 18px rgba(0, 0, 0, 0.07) !important;
}

/* Zoom sutil en imagen de la card */
.card .card-img-top {
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center;
  overflow: hidden;
}

.card:hover .card-img-top {
  transform: scale(1.05);
}

/* ----------------------------------------------------------
   4. PORTFOLIO — ZOOM SOBRE IMAGEN DE FONDO
   ---------------------------------------------------------- */
.portfolio-img-wrapper {
  overflow: hidden;
}

.portfolio-img-wrapper .img-thumb {
  transition: transform 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.portfolio-img-wrapper:hover .img-thumb {
  transform: scale(1.07);
}

/* ----------------------------------------------------------
   5. BLOG — ZOOM Y ELEVACIÓN
   ---------------------------------------------------------- */
.blog-img-wrapper {
  overflow: hidden;
}

.blog-img-wrapper .img-thumb {
  transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.blog-img-wrapper:hover .img-thumb {
  transform: scale(1.06);
}

/* ----------------------------------------------------------
   6. TEAM — ELEVACIÓN SUAVE
   ---------------------------------------------------------- */
.team-wrapper {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.team-wrapper:hover {
  transform: translateY(-9px);
}

.team-img-wrapper img {
  transition: filter 0.5s ease;
}

.team-wrapper:hover .team-img-wrapper img {
  filter: brightness(1.06) saturate(1.1);
}

/* ----------------------------------------------------------
   7. RESEÑAS GOOGLE — ELEVACIÓN + SOMBRA AZUL
   ---------------------------------------------------------- */
.google-review-card {
  transition:
    transform  0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s ease;
  will-change: transform;
}

.google-review-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 20px 48px rgba(57, 173, 255, 0.11),
    0 4px 14px rgba(0, 0, 0, 0.06) !important;
}

/* ----------------------------------------------------------
   8. CAJAS DE CONTACTO — ELEVACIÓN
   ---------------------------------------------------------- */
.contact-box {
  transition:
    transform  0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 0.5s ease;
  will-change: transform;
}

.contact-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(57, 173, 255, 0.12) !important;
}

/* ----------------------------------------------------------
   9. ICON FEATURES (sección About) — ELEVACIÓN + ÍCONO BOUNCE
   ---------------------------------------------------------- */
.icon-feature-horizontal {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.icon-feature-horizontal:hover {
  transform: translateY(-5px);
}

.icon-feature-horizontal .icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-feature-horizontal:hover .icon {
  transform: scale(1.18) rotate(-6deg);
}

/* ----------------------------------------------------------
   10. CONTADORES — ELEVACIÓN + ÍCONO ESCALA
   ---------------------------------------------------------- */
.counter-section .col-md-3 {
  transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.counter-section .col-md-3:hover {
  transform: translateY(-5px);
}

.counter-section > .col-md-3 > i {
  display: inline-block;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.counter-section .col-md-3:hover > i {
  transform: scale(1.22);
}

/* ----------------------------------------------------------
   11. NAVEGACIÓN — MICRO-INTERACCIÓN UNDERLINE
   ---------------------------------------------------------- */
.navbar-nav > li > a {
  position: relative;
  transition:
    letter-spacing 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.25s ease !important;
}

.navbar-nav > li > a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: #39adff;
  transform: translateX(-50%);
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  border-radius: 2px;
}

.navbar-nav > li > a:hover::after,
.navbar-nav > li.active > a::after {
  width: 62%;
}

.navbar-nav > li > a:hover {
  letter-spacing: 0.04em;
}

/* ----------------------------------------------------------
   12. BOTONES — MAGNETIC GLOW + TRANSICIÓN EXTENDIDA
   ---------------------------------------------------------- */
.btn:not(.btn-sm):not(.close-styler):not([type="submit"]) {
  transition:
    background-color 0.25s ease,
    box-shadow       0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform        0.4s  cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  will-change: transform;
  backface-visibility: hidden;
}

.btn-primary:not(.btn-sm):not(.close-styler):hover {
  box-shadow: 0 10px 32px rgba(57, 173, 255, 0.38) !important;
}

.btn-outline.btn-primary:hover {
  box-shadow: 0 6px 24px rgba(57, 173, 255, 0.28) !important;
}

.btn-outline.btn-white:hover {
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.18) !important;
}

/* ----------------------------------------------------------
   13. ICONOS DE SECCIÓN — FLOTACIÓN CONTINUA
   ---------------------------------------------------------- */
@keyframes ldc-float {
  0%,  100% { transform: translateY(0px);  }
  50%        { transform: translateY(-8px); }
}

.ldc-icon-float {
  animation: ldc-float 3.8s ease-in-out infinite;
  display: inline-block;
}

/* ----------------------------------------------------------
   14. SCROLL TO TOP — ELEVACIÓN
   ---------------------------------------------------------- */
.scrollup {
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.scrollup:hover {
  transform: translateY(-4px) scale(1.12) !important;
}

/* ----------------------------------------------------------
   15. SEPARADOR — PULSO SUAVE
   ---------------------------------------------------------- */
@keyframes ldc-dot-pulse {
  0%,  100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(57, 173, 255, 0.3); }
  50%        { transform: scale(1.35); box-shadow: 0 0 0 7px rgba(57, 173, 255, 0);   }
}

.separator-professional .dot {
  animation: ldc-dot-pulse 2.6s ease-in-out infinite;
  background-color: #39adff !important;
}

/* ----------------------------------------------------------
   16. CURSOR AMBIENT GLOW
   ---------------------------------------------------------- */
#ldc-glow {
  position: fixed;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(57, 173, 255, 0.052) 0%,
    transparent 68%
  );
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 1;
  mix-blend-mode: screen;
  will-change: left, top;
}

/* ----------------------------------------------------------
   17. SMOOTH PARALLAX LAYER
   ---------------------------------------------------------- */
.ldc-parallax {
  will-change: transform;
  transition: transform 0s linear;
}

/* ----------------------------------------------------------
   18. WHATSAPP BUTTON — HOVER MEJORADO
   ---------------------------------------------------------- */
.whatsapp-container .whatsapp-icon {
  transition:
    transform  0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s  ease !important;
}

.whatsapp-container .whatsapp-icon:hover {
  transform: scale(1.13) !important;
  box-shadow: 0 8px 26px rgba(37, 211, 102, 0.38) !important;
  animation: none !important;
}

/* ----------------------------------------------------------
   19. FORM INPUTS — FOCUS SUAVE
   ---------------------------------------------------------- */
.form-control {
  transition:
    border-color 0.3s ease,
    box-shadow   0.3s ease !important;
}

.form-control:focus {
  border-color: #39adff !important;
  box-shadow: 0 0 0 3px rgba(57, 173, 255, 0.15) !important;
  outline: none !important;
}

/* ----------------------------------------------------------
   20. FOOTER SOCIAL ICONS
   ---------------------------------------------------------- */
.social-icons a {
  transition:
    transform  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    color      0.25s ease,
    opacity    0.25s ease;
  display: inline-block;
}

.social-icons a:hover {
  transform: translateY(-4px) scale(1.15);
  color: #39adff !important;
  opacity: 1 !important;
}

/* ----------------------------------------------------------
   21. REDUCED MOTION — ACCESIBILIDAD OBLIGATORIA
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:      0.01ms !important;
    animation-iteration-count: 1   !important;
    transition-duration:     0.01ms !important;
    transition-delay:        0ms   !important;
  }

  .ldc-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  #ldc-glow,
  #ldc-overlay {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   22. AJUSTES MÓVIL
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  #ldc-glow { display: none; }

  .card:hover      { transform: none !important; }
  .team-wrapper:hover { transform: none; }

  .ldc-reveal[data-ldc-dir="up"]   { transform: translateY(26px); }
  .ldc-reveal[data-ldc-dir="scale"]{ transform: scale(0.94); }
  .ldc-reveal[data-ldc-dir="left"] { transform: translateX(-26px); }
  .ldc-reveal[data-ldc-dir="right"]{ transform: translateX(26px); }

  .navbar-nav > li > a::after { display: none; }
}