/* Shared interaction layer: scoped reusable motion + hover polish only */

:root {
  --ix-navy: #142e49;
  --ix-orange: #f19e3b;
  --ix-blue: #3b82f6;
  --ix-blue-glow: rgba(59, 130, 246, 0.22);
}

.hover-lift,
.service-card,
.team-card,
.page-card,
.trust-card,
.service-preview-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.hover-lift:hover,
.hover-lift:focus-visible,
.service-card:hover,
.service-card:focus-visible,
.team-card.hover-lift:hover,
.team-card.hover-lift:focus-visible,
.page-card:hover,
.page-card:focus-visible,
.trust-card:hover,
.trust-card:focus-visible,
.service-preview-card:hover,
.service-preview-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(20, 46, 73, 0.22);
  box-shadow: 0 14px 32px rgba(20, 46, 73, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.24), 0 0 22px var(--ix-blue-glow);
}

.hover-lift::before,
.team-card.hover-lift::before,
.service-card::before,
.page-card::before,
.service-preview-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ix-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.hover-lift:hover::before,
.hover-lift:focus-visible::before,
.team-card.hover-lift:hover::before,
.team-card.hover-lift:focus-visible::before,
.service-card:hover::before,
.service-card:focus-visible::before,
.page-card:hover::before,
.page-card:focus-visible::before,
.service-preview-card:hover::before,
.service-preview-card:focus-visible::before {
  transform: scaleX(1);
}

.icon-lg,
.icon-md,
.service-card .icon-lg,
.service-card .icon-md {
  animation: ix-icon-float 4.5s ease-in-out infinite;
}

.image-placeholder,
.hero-visual .image-placeholder,
.local-visual .image-placeholder,
.about-story-logo {
  animation: ix-image-float 6.5s ease-in-out infinite;
}

.btn-primary {
  position: relative;
  overflow: hidden;
}

/* Normalize shared button metrics + desktop wrapping safety across templates */
.btn {
  min-height: 54px;
  padding: 14px 32px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .btn {
    width: auto;
  }
}

.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
}

.btn-primary:hover::after,
.btn-primary:focus-visible::after {
  left: 150%;
}

.gradient-text,
.text-orange.gradient-text,
.section-title .gradient-text {
  color: var(--ix-orange);
  -webkit-text-fill-color: var(--ix-orange);
  background: none;
  animation: none;
}

/* Single-source hover polish for shared card patterns */
.service-card,
.page-card,
.team-card,
.service-preview-card {
  position: relative;
  border-top: 4px solid var(--ix-orange);
}

.service-card:hover h3,
.service-card:focus-visible h3,
.team-card.hover-lift:hover h3,
.team-card.hover-lift:focus-visible h3,
.page-card:hover h3,
.page-card:focus-visible h3,
.service-preview-card:hover h3,
.service-preview-card:focus-visible h3 {
  color: var(--ix-blue);
}

/* Keep homepage/about team cards visually consistent without layout changes */
.team-card img,
.team-card .image-placeholder-profile {
  width: 100%;
  display: block;
  object-fit: cover;
}

@keyframes ix-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes ix-image-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes ix-mobile-gentle-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -5px, 0); }
}

@keyframes ix-mobile-shimmer {
  0%, 84%, 100% { transform: translate3d(-135%, 0, 0) skewX(-20deg); opacity: 0; }
  88%, 96% { opacity: 0.4; }
  92% { transform: translate3d(165%, 0, 0) skewX(-20deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .service-card,
  .team-card,
  .page-card,
  .trust-card,
  .service-preview-card,
  .icon-lg,
  .icon-md,
  .image-placeholder,
  .about-story-logo,
  .btn-primary::after,
  .gradient-text,
  .hero-visual img,
  .svc-hero-visual img,
  .image-placeholder img,
  .workflow-visual img,
  .local-visual img,
  .team-card img,
  .nav-phone::before,
  .btn-primary::before,
  .faq-item > .faq-question::after,
  .faq-accordion-item > summary::after,
  .blog-faq summary::after,
  .is-scroll-active,
  .is-scroll-active::before {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

.scroll-reveal,
.scroll-reveal-soft {
  opacity: 0;
  transform: translateY(10px) scale(0.995);
  transition: opacity 420ms ease, transform 420ms ease;
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.scroll-reveal.is-visible,
.scroll-reveal-soft.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (max-width: 768px) {
  .scroll-reveal,
  .scroll-reveal-soft {
    transition-duration: 380ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal.is-visible,
  .scroll-reveal-soft,
  .scroll-reveal-soft.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}


/* Unified card + heading rhythm and blue-emphasis hover polish across templates */
.blog-category-card,
.blog-card,
.blog-faq details,
.faq-card,
.service-hub-card,
.trust-card {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.blog-category-card:hover,
.blog-card:hover,
.blog-faq details:hover,
.faq-card:hover,
.service-hub-card:hover,
.trust-card:hover,
.blog-faq details[open] {
  border-color: rgba(59, 130, 246, 0.42);
  box-shadow: 0 14px 32px rgba(20, 46, 73, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.24), 0 0 22px var(--ix-blue-glow);
}

.blog-category-card:hover h3,
.blog-card:hover .blog-card-title a,
.blog-faq details:hover summary,
.blog-faq details[open] summary,
.faq-card:hover h3,
.service-hub-card:hover h3 {
  color: var(--ix-blue);
}

/* Preserve orange resting accents while improving hover contrast */
.blog-category-card:hover,
.blog-faq details[open],
.blog-faq details:hover {
  border-bottom-color: rgba(59, 130, 246, 0.7);
}

.section-title,
.page-hero-inner h1,
.blog-hero h1,
.blog-post-hero h1 {
  margin-bottom: 1.5rem;
}

.section-intro,
.blog-hero-intro {
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .btn {
    white-space: normal;
  }
}


/* Expanded selector coverage for existing template card patterns */
:is(.faq-card, .faq-decision-card, .faq-accordion-item, .minimal-panel, .blog-card, .blog-category-card) {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

:is(.faq-decision-card, .faq-accordion-item, .minimal-panel, .service-hub-card, .blog-card, .blog-category-card) {
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  :is(.faq-card, .faq-decision-card, .faq-accordion-item, .minimal-panel, .service-hub-card, .blog-card, .blog-category-card):hover,
  :is(.faq-card, .faq-decision-card, .faq-accordion-item, .minimal-panel, .service-hub-card, .blog-card, .blog-category-card):focus-visible {
    transform: translateY(-3px);
    border-color: rgba(20, 46, 73, 0.22);
    box-shadow: 0 12px 28px rgba(20, 46, 73, 0.11), 0 0 0 1px rgba(59, 130, 246, 0.22), 0 0 18px var(--ix-blue-glow);
  }
}

/* Mobile-safe interaction feedback without hover dependency */
@media (hover: none), (pointer: coarse) {
  :is(.service-card, .team-card, .page-card, .trust-card, .service-preview-card, .service-hub-card, .faq-card, .faq-decision-card, .faq-accordion-item, .minimal-panel, .blog-card, .blog-category-card):active,
  :is(.service-card, .team-card, .page-card, .trust-card, .service-preview-card, .service-hub-card, .faq-card, .faq-decision-card, .faq-accordion-item, .minimal-panel, .blog-card, .blog-category-card):focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(20, 46, 73, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.2);
    border-color: rgba(20, 46, 73, 0.2);
  }

  .btn-primary:active::after,
  .btn-primary:focus-visible::after {
    left: 150%;
  }
}


@media (max-width: 768px) {
  :is(.hero-visual img, .svc-hero-visual img, .image-placeholder img, .workflow-visual img, .local-visual img, .about-story-logo, .team-card img) {
    animation: ix-mobile-gentle-float 8s ease-in-out infinite;
    will-change: transform;
  }

  :is(.btn-primary, .nav-phone) {
    position: relative;
    overflow: hidden;
  }

  :is(.btn-primary, .nav-phone)::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 45%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
    transform: translate3d(-135%, 0, 0) skewX(-20deg);
    opacity: 0;
    pointer-events: none;
    animation: ix-mobile-shimmer 9s ease-in-out infinite;
  }

  :is(.btn, .service-card, .page-card, .team-card, .trust-card, .faq-question, .service-link):active {
    transform: scale(0.985);
  }

  :is(.btn, .service-card, .page-card, .team-card, .trust-card, .service-link):active {
    transition-duration: 0.16s;
  }

  .faq-item > .faq-question::after,
  .faq-accordion-item > summary::after,
  .blog-faq summary::after {
    transition: transform 0.3s ease;
  }

  .faq-item[open] > .faq-question::after,
  .faq-accordion-item[open] > summary::after {
    transform: translateY(-50%) rotate(45deg);
  }

  .blog-faq details[open] summary::after {
    transform: translateY(-50%) rotate(90deg);
  }
}

@media (max-width: 768px) {
  :is(.service-card, .page-card, .trust-card, .service-preview-card, .faq-item, .problem-card, .switch-card, .help-card, .team-card) {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  }

  :is(.service-card, .page-card, .trust-card, .service-preview-card, .faq-item, .problem-card, .switch-card, .help-card, .team-card).is-scroll-active {
    border-color: rgba(59, 130, 246, 0.42);
    box-shadow: 0 12px 28px rgba(20, 46, 73, 0.11), 0 0 0 1px rgba(59, 130, 246, 0.22), 0 0 18px var(--ix-blue-glow);
    transform: translateY(-2px);
  }

  :is(.service-card, .page-card, .service-preview-card, .team-card.hover-lift).is-scroll-active::before {
    transform: scaleX(1);
  }

  :is(.service-card, .page-card, .service-preview-card, .faq-item, .problem-card, .switch-card, .help-card).is-scroll-active h3,
  .trust-card.is-scroll-active h3,
  .team-card.hover-lift.is-scroll-active h3,
  .faq-item.is-scroll-active .faq-question {
    color: var(--ix-blue);
  }
}