/**
 * Motion CSS — UX polish: no pre-hide flash, soft hovers only.
 */

/* —— Header —— */
.header {
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.header.ws-header-scrolled.fixed-header {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

/* —— Buttons —— */
.page-home .ws-hero-cta,
.page-home .about-btn,
.page-service .about-btn,
.header .header-button a,
.theme-btn-main {
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    border-color 0.28s ease,
    transform 0.28s ease,
    opacity 0.28s ease;
}

.page-home .ws-hero-cta:hover,
.page-home .about-btn:hover,
.page-service .about-btn:hover,
.header .header-button a:hover {
  transform: translateY(-1px);
}

.page-home .ws-hero-cta:active,
.page-home .about-btn:active,
.page-service .about-btn:active,
.header .header-button a:active {
  transform: translateY(0);
}

.cta-area .tw-btn-circle,
.page-service .cta-area .tw-btn-circle {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.cta-area .tw-btn-circle:hover,
.page-service .cta-area .tw-btn-circle:hover {
  transform: scale(1.03);
}

/* —— Service cards —— */
.page-home .service-main-card-items-2 .service-image {
  overflow: hidden;
  border-radius: 12px;
}
.page-home .service-main-card-items-2 .service-image img {
  transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home .service-main-card-items-2:hover .service-image img {
  transform: scale(1.03);
}
.page-home .service-main-card-items-2 .left-content h3 a {
  transition: opacity 0.25s ease;
}
.page-home .service-main-card-items-2:hover .left-content h3 a {
  opacity: 0.75;
}

/* —— Portfolio thumbs —— */
.page-home .project-top-section-2 .project-image {
  overflow: hidden;
  border-radius: 12px;
}
.page-home .project-top-section-2 .project-image img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-home .project-top-section-2 .project-image:hover img {
  transform: scale(1.03);
}
.page-home .project-top-section-2 .project-title .cont a {
  transition: opacity 0.25s ease;
}
.page-home .project-top-section-2 .project-title .cont:hover a {
  opacity: 0.72;
}

/* Calm infinite column on reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-home .project-top-section-2 .project-right-image {
    animation: none !important;
  }
}

/* —— Service page cards —— */
.page-service .ws-service-related-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.page-service .ws-service-related-card:hover {
  transform: translateY(-3px);
}

.page-service .ws-service-why .ws-why-card {
  transition: transform 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 2rem;
  height: 100%;
}
.page-service .ws-service-why .ws-why-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.22);
}

/* —— Hero media crop only —— */
.page-home .ws-hero-media,
.page-service .ws-service-hero__media {
  overflow: hidden;
}

.page-home .hero-new-2 .social-link a {
  transition: opacity 0.25s ease;
}

/* —— FAQ —— */
.page-service .faq-three-accordion-item,
.faq-three-accordion-item {
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.faq-three-area .accordion-collapse {
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .page-home .ws-hero-cta,
  .page-home .about-btn,
  .page-service .about-btn,
  .header .header-button a,
  .cta-area .tw-btn-circle,
  .page-home .service-main-card-items-2 .service-image img,
  .page-home .project-top-section-2 .project-image img,
  .page-service .ws-service-related-card {
    transition: none !important;
    transform: none !important;
  }
}