/* ============================================================
   Sky Clinic motion layer — zipai.in.th
   Load AFTER shared.css. Pure enhancement: opacity + transform
   only, no layout properties, CLS = 0.
   ============================================================ */

:root {
  --ease-luxe: cubic-bezier(0.33, 0.9, 0.28, 1);
}

/* ---------- Scroll progress bar (fixed top, 2.5px) ---------- */
#motion-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: var(--sky, #0e6b5c);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Scroll reveal: base ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.15s var(--ease-luxe), transform 1.15s var(--ease-luxe);
}

/* ---------- Reveal variants ---------- */
.reveal-lg {
  opacity: 0;
  transform: translateY(46px);
  will-change: opacity, transform;
}
.reveal-lg.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.15s var(--ease-luxe), transform 1.15s var(--ease-luxe);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-38px);
  will-change: opacity, transform;
}
.reveal-left.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.15s var(--ease-luxe), transform 1.15s var(--ease-luxe);
}

.reveal-right {
  opacity: 0;
  transform: translateX(38px);
  will-change: opacity, transform;
}
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.15s var(--ease-luxe), transform 1.15s var(--ease-luxe);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.955) translateY(20px);
  will-change: opacity, transform;
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.15s var(--ease-luxe), transform 1.15s var(--ease-luxe);
}

/* ---------- Stagger delays ---------- */
.is-visible.delay-1,
.delay-1.is-visible { transition-delay: 0.14s; }
.is-visible.delay-2,
.delay-2.is-visible { transition-delay: 0.28s; }
.is-visible.delay-3,
.delay-3.is-visible { transition-delay: 0.42s; }

/* ---------- Hero entrance (load, not scroll) ---------- */
.hero-enter {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
}
.hero-enter.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 1.0s var(--ease-luxe), transform 1.0s var(--ease-luxe);
}

/* ---------- Card hover: translateY(-4px) + deeper shadow ---------- */
/* Only add the luxe transition here; existing per-page transforms are preserved */
.svc, .tcard, .step, .stat,
.mdcc-tile, .ba-card,
.plan-card, .skubox-hover,
.feature-card, .faq details {
  transition: transform 520ms var(--ease-luxe),
              box-shadow 520ms var(--ease-luxe);
}
/* override existing quicker hover transforms where we now own the transition */
.svc:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 64px rgba(28, 35, 33, 0.13);
}
.tcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 64px rgba(28, 35, 33, 0.13);
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 52px rgba(28, 35, 33, 0.12);
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 52px rgba(28, 35, 33, 0.12);
}
.mdcc-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(28, 35, 33, 0.12);
}
.ba-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 64px rgba(28, 35, 33, 0.13);
}

/* ---------- Image hover inside .img-zoom wrapper ---------- */
/* Only applies where overflow-hidden wrapper (.img-zoom) exists */
.img-zoom {
  overflow: hidden;
}
.img-zoom img {
  display: block;
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.img-zoom:hover img {
  transform: scale(1.05);
}

/* ---------- LINE FAB breathe: 8s loop, stops on hover ---------- */
@keyframes fab-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-0.5px) scale(1.006); }
}
.line-fab {
  animation: fab-breathe 8s ease-in-out infinite;
}
.line-fab:hover {
  animation: none;
}

/* ---------- Reduced-motion: kill switch — everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-lg,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .hero-enter {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .delay-1,
  .delay-2,
  .delay-3 {
    transition-delay: 0s !important;
  }
  .line-fab {
    animation: none !important;
  }
  #motion-progress {
    display: none !important;
  }
  .svc,
  .tcard,
  .step,
  .stat,
  .mdcc-tile,
  .ba-card,
  .plan-card,
  .feature-card,
  .faq details {
    transition: none !important;
  }
  .img-zoom img {
    transition: none !important;
  }
}