/* ==========================================================
   Custom effects layer. Does NOT define colors - theme colors
   stay in css/style.css. Only motion, spacing and layout here.
   ========================================================== */

/* Scroll reveal: elements start hidden only when JS is running */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js .reveal.delay-1 { transition-delay: 0.15s; }
.js .reveal.delay-2 { transition-delay: 0.3s; }
.js .reveal.delay-3 { transition-delay: 0.45s; }

/* Service cards lift slightly on hover */
.ts-service-box {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.ts-service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Image zoom inside service cards */
.ts-service-image-wrapper {
  overflow: hidden;
}
.ts-service-image-wrapper img {
  transition: transform 0.6s ease;
}
.ts-service-box:hover .ts-service-image-wrapper img {
  transform: scale(1.06);
}

/* Link cards in "Other Work Categories" */
.service-link-card {
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-link-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}

/* Services dropdown: scrollable, fades in */
.service-dropdown {
  max-height: 70vh;
  overflow-y: auto;
  min-width: 260px;
  animation: menuFadeIn 0.3s ease both;
}
@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Gentle pulse on the quote button */
.header-get-a-quote .btn {
  animation: softPulse 2.5s ease-in-out infinite;
}
@keyframes softPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .ts-service-box,
  .ts-service-image-wrapper img,
  .service-link-card,
  .service-dropdown,
  .header-get-a-quote .btn {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}