/* =====================================================================
   Dental Insight — Animated / 3D Visual Enhancement Layer
   Loaded after the main stylesheet, so these rules take priority.
   Safe to remove: delete the enqueue call in functions.php to revert.
===================================================================== */

/* ---------- 1. New colour palette (overrides theme variables) ---------- */
:root {
  --theme-primary-color: #0e9f8e;      /* deep teal – trustworthy, clinical, fresh   */
  --theme-primary-color-dark: #0a7d70; /* darker teal for gradients / hover          */
  --theme-accent-color: #ff8a65;       /* warm coral accent, used sparingly           */
  --theme-header-bg: #f2fbfa;
  --theme-heading-color: #06283a;      /* deep navy, softer than pure black           */
  --theme-text-color: #5c6b70;
  --theme-primary-fade: #e6f8f6;
  --theme-footer-color: #06283a;
  --post-bg-color: #ffffff;
  --slider-overlay: linear-gradient(120deg, rgba(6,40,58,.72), rgba(14,159,142,.55));
}

/* ---------- 2. Global polish ---------- */
body { overflow-x: hidden; }

a, .box, .home-btn a, .box-button a, #services-box .box i {
  transition: all .35s cubic-bezier(.25,.8,.25,1);
}

/* ============================ SLIDER ================================= */
#slider { position: relative; perspective: 1200px; }

#slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--slider-overlay);
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

#slider img {
  transform: scale(1.02);
  transition: transform 6s ease;
}
.carousel-item.active img { transform: scale(1.12); }

/* Floating soft blobs for depth */
#slider { overflow: hidden; }
#slider::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  animation: enh-float 7s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes enh-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-20px, 30px, 0) scale(1.08); }
}

/* Glass hero caption card, gently tilts in 3D via JS (enh-tilt) */
#slider .carousel-caption {
  z-index: 3;
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 45px;
  background: rgba(6, 40, 58, .28);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform-style: preserve-3d;
  will-change: transform;
  animation: enh-rise 1s cubic-bezier(.25,.8,.25,1) both;
}

@keyframes enh-rise {
  from { opacity: 0; transform: translateY(40px) rotateX(8deg); }
  to   { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

#slider .carousel-caption h2 {
  background: linear-gradient(90deg, #ffffff, #d7fff8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

#slider .slider-excerpt { color: rgba(255,255,255,.9); }

/* Animated gradient button with shine sweep */
.home-btn a, .box-button a {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--theme-primary-color), var(--theme-primary-color-dark));
  box-shadow: 0 8px 20px -6px rgba(14,159,142,.55);
  isolation: isolate;
}
.box-button a { background: #ffffff; color: var(--theme-primary-color); box-shadow: 0 6px 16px -8px rgba(6,40,58,.25); }
.home-btn a::after, .box-button a::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
  z-index: -1;
}
.home-btn a:hover::after, .box-button a:hover::after { left: 130%; }
.home-btn a:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--theme-primary-color-dark), var(--theme-primary-color));
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -8px rgba(14,159,142,.7);
}
.box-button a:hover { transform: translateY(-3px); }

/* Carousel arrows */
#slider .carousel-control-next-icon,
#slider .carousel-control-prev-icon {
  background: rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,.3);
}
#slider .carousel-control-next-icon:hover,
#slider .carousel-control-prev-icon:hover {
  background: var(--theme-primary-color);
}

/* ========================== SERVICES / 3D CARDS ======================= */
#services-box { position: relative; background: linear-gradient(180deg, #ffffff 0%, var(--theme-primary-fade) 100%); }

#services-box h3 {
  position: relative;
  color: var(--theme-heading-color);
}
#services-box h3::after {
  content: "";
  display: block;
  width: 70px; height: 4px;
  margin: 14px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--theme-primary-color), var(--theme-accent-color));
}

/* card 3D stage */
#services-box .row { perspective: 1400px; }

.box {
  position: relative;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(6,40,58,.06);
  box-shadow: 0 10px 25px -12px rgba(6,40,58,.18);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .15s ease, box-shadow .35s ease, background .35s ease;
}

.box:hover {
  background: linear-gradient(160deg, var(--theme-primary-color), var(--theme-primary-color-dark));
  box-shadow: 0 25px 40px -18px rgba(14,159,142,.55);
}

/* keep default JS-driven rotateX/rotateY, this just adds lift on hover fallback */
.box:hover { transform: translateY(-6px) scale(1.02); }

#services-box .box i {
  background: linear-gradient(135deg, var(--theme-primary-fade), #ffffff);
  color: var(--theme-primary-color);
  box-shadow: inset 0 0 0 1px rgba(14,159,142,.15);
  transform: translateZ(35px);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}
.box:hover i {
  background: rgba(255,255,255,.15);
  color: #fff;
  transform: translateZ(55px) rotate(8deg);
}

.box h4, .box p, .box .box-button { transform: translateZ(25px); }

/* ---------- 3. Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  #slider img,
  #slider .carousel-caption,
  #slider::after,
  .box,
  .home-btn a::after,
  .box-button a::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 4. Small screens: tone the tilt effects down ---------- */
@media (max-width: 767px) {
  #slider .carousel-caption { padding: 26px 22px; }
  .box:hover { transform: translateY(-4px) scale(1.01); }
}