/* ------------------------------------------------------------------
   enhance.css - premium motion layer for jsmiledentalclinic.com
   Loaded after Tailwind on every page. Purely additive: it styles
   elements the pages already have (.card-lift, .img-zoom, gold CTAs)
   plus two elements enhance.js creates (progress bar). Remove this
   file and enhance.js and the site returns to its previous state.

   Per DESIGN.md: restraint over flash. Gold stays a signal.
   ------------------------------------------------------------------ */

/* 1 - thin gold reading-progress line under the very top edge */
#enhanceProgress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #E8B43A, #C48E20);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 80;
  pointer-events: none;
}

/* 2 - card depth: pointer tilt is driven by enhance.js through
   --tx/--ty custom properties; this only supplies the 3D context and
   a slightly warmer resting shadow so the lift reads as physical. */
.card-lift {
  transform-style: preserve-3d;
  transform: perspective(900px)
             rotateX(var(--tx, 0deg))
             rotateY(var(--ty, 0deg));
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1),
              box-shadow 420ms cubic-bezier(.16, 1, .3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .card-lift:hover {
    box-shadow: 0 24px 48px -24px rgba(14, 14, 14, .22),
                0 6px 18px -8px rgba(196, 142, 32, .14);
  }
}

/* 3 - light sweep across photos on hover (before/after gallery,
   dentist portraits, any .img-zoom container) */
@media (hover: hover) and (pointer: fine) {
  .img-zoom { position: relative; }
  .img-zoom::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg,
      transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
    transform: translateX(-130%);
    transition: transform 900ms cubic-bezier(.22, .68, .22, 1);
    pointer-events: none;
    z-index: 2;
  }
  .img-zoom:hover::after { transform: translateX(130%); }
}

/* 4 - gold CTAs: js adds .en-magnet and moves them via --mx/--my.
   The transform composes translate + a gentle press state. */
.en-magnet {
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1),
              box-shadow 260ms ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .en-magnet:hover {
    box-shadow: 0 14px 30px -14px rgba(232, 180, 58, .55);
  }
}
.en-magnet:active { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(.97); }

/* everything off for people who ask for less motion */
@media (prefers-reduced-motion: reduce) {
  #enhanceProgress { display: none; }
  .card-lift {
    transform: none !important;
    transition-duration: .01ms !important;
  }
  .img-zoom::after { display: none; }
  .en-magnet {
    transform: none !important;
    transition-duration: .01ms !important;
  }
}