/* GrowCart Ecom premium motion layer | 2026-11-06
   No brand, typography, layout, size, content, or section-order changes.
   All effects are optional, transform/opacity-first, and progressive. */

/* Progressive scroll reveals: activated only after JS creates an observer. */
@media (prefers-reduced-motion: no-preference) {
  html.gc-premium-motion .gc-motion-item {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 650ms cubic-bezier(.16,1,.3,1),
                transform 650ms cubic-bezier(.16,1,.3,1);
    transition-delay: var(--gc-motion-delay, 0ms);
  }
  html.gc-premium-motion .gc-motion-item.gc-motion-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  html.gc-premium-motion .gc-motion-item:not(.gc-motion-in) {
    will-change: transform, opacity;
  }
  html.gc-premium-motion .gc-motion-item.gc-motion-in {
    will-change: auto;
  }

  /* Hero: independent copy timing, even where the existing hero wrapper
     has intentional .reveal overrides. */
  html.gc-premium-motion .gc-hero-motion {
    opacity: 0;
    transform: translate3d(0, 23px, 0);
    transition: opacity 640ms cubic-bezier(.16,1,.3,1),
                transform 640ms cubic-bezier(.16,1,.3,1);
    transition-delay: var(--gc-motion-delay, 0ms);
  }
  html.gc-premium-motion .gc-hero-motion.gc-motion-in {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
  html.gc-premium-motion .gc-hero-cta-motion {
    transform: translate3d(0, 13px, 0) scale(.985);
  }
  html.gc-premium-motion .gc-hero-cta-motion.gc-motion-in {
    transform: translate3d(0,0,0) scale(1);
  }
}

/* Only pointer-capable devices get hover movement. */
@media (hover:hover) and (pointer:fine) {
  html.gc-premium-motion main :is(
    a.btn, button.btn, .elementor-button, a.gc-text-cta, a.gc-about-link
  ) {
    transition: transform 200ms ease-out, box-shadow 200ms ease-out,
                opacity 200ms ease-out, background-color 200ms ease-out;
  }
  html.gc-premium-motion main :is(
    a.btn, button.btn, .elementor-button
  ):hover {
    transform: translate3d(0,-2px,0);
  }
  html.gc-premium-motion main :is(
    a.btn, button.btn, .elementor-button
  ):active {
    transform: translate3d(0,0,0) scale(.985);
  }

  /* Existing services hover treatment is preserved; these rules cover other
     WordPress templates and Elementor widgets without affecting spacing. */
  html.gc-premium-motion main :is(
    .cs-card, .case-card, .gc-blog-card, .testimonial-card, .proof-snap-card,
    .who-card, .diff-card, .component-card, .process-step,
    .team-card, .philosophy-card, .value-item, .gc-step
  ) {
    transition: transform 230ms ease-in-out, box-shadow 230ms ease-in-out;
  }
  html.gc-premium-motion main :is(
    .cs-card, .case-card, .gc-blog-card, .testimonial-card, .proof-snap-card,
    .who-card, .diff-card, .component-card, .process-step,
    .team-card, .philosophy-card, .value-item, .gc-step
  ):hover {
    transform: translate3d(0,-3px,0);
    box-shadow: 0 15px 30px -21px rgba(4,0,55,.32);
  }
  /* Existing service-card shadow and lift remain intact. */
  html.gc-premium-motion main :is(
    .service-card, .gc-service-card
  ) :is(.service-icon, .icon-wrap, .icon, svg) {
    transition: transform 230ms ease-in-out;
    transform-origin: center;
  }
  html.gc-premium-motion main :is(
    .service-card, .gc-service-card
  ):hover :is(.service-icon, .icon-wrap, .icon, svg) {
    transform: scale(1.045);
  }
  html.gc-premium-motion main :is(
    .cs-card-media, .case-card-media, .gc-blog-card__media, .project-media, .portfolio-thumb
  ) img {
    transition: transform 270ms ease-in-out;
  }
  html.gc-premium-motion main :is(
    .cs-card, .case-card, .gc-blog-card, .project-card, .portfolio-card
  ):hover :is(
    .cs-card-media, .case-card-media, .gc-blog-card__media, .project-media, .portfolio-thumb
  ) img {
    transform: scale(1.035);
  }

  /* FAQ micro-feedback. Leave native <details> / existing accordion state
     and height rules untouched. */
  html.gc-premium-motion main :is(
    .gc-faq-item summary h3, .gc-about-faq-item summary h3
  ) {
    transition: transform 180ms ease-out, opacity 180ms ease-out;
  }
  html.gc-premium-motion main :is(
    .gc-faq-item summary, .gc-about-faq-item summary
  ):hover h3 {
    transform: translate3d(2px,0,0);
  }
  html.gc-premium-motion main :is(
    .faq-q, .faq-item .faq-q
  ) {
    transition: opacity 180ms ease-out;
  }
  html.gc-premium-motion main :is(.faq-q, .faq-item .faq-q):hover {
    opacity: .82;
  }

  /* Footer links animate an underline on interaction. */
  html.gc-premium-motion footer.site-footer a {
    transition: opacity 180ms ease-in-out, transform 180ms ease-in-out;
  }
  html.gc-premium-motion footer.site-footer a:hover {
    opacity: .82;
  }
}

/* Navbar: supports existing premium pill, no geometry or color changes. */
html.gc-premium-motion header#siteHeader :is(
  .nav-link, .nav-dropdown-menu a, .btn-primary
) {
  transition-duration: 200ms;
  transition-timing-function: ease-in-out;
}
html.gc-premium-motion main :is(input, textarea, select):focus-visible,
html.gc-premium-motion main :is(a, button, summary):focus-visible {
  outline-offset: 3px;
}

/* Tablet: shorter travel, fewer movements. */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html.gc-premium-motion .gc-motion-item,
  html.gc-premium-motion .gc-hero-motion {
    transform: translate3d(0, 14px, 0);
    transition-duration: 490ms;
    transition-delay: min(var(--gc-motion-delay, 0ms), 220ms);
  }
  html.gc-premium-motion .gc-motion-item.gc-motion-in,
  html.gc-premium-motion .gc-hero-motion.gc-motion-in {
    transform: translate3d(0,0,0);
  }
}
/* Mobile: visibility-first, no card zoom or elaborate motion. */
@media (max-width: 767px) {
  html.gc-premium-motion .gc-motion-item,
  html.gc-premium-motion .gc-hero-motion {
    transition-duration: 360ms;
    transition-delay: 0ms;
  }
  html.gc-premium-motion .gc-hero-cta-motion {
    transform: translate3d(0,10px,0) scale(.99);
  }
  html.gc-premium-motion .gc-hero-cta-motion.gc-motion-in {
    transform: none;
  }
  html.gc-premium-motion main :is(
    .cs-card-media, .case-card-media, .gc-blog-card__media, .project-media, .portfolio-thumb
  ) img {
    transition:none;
  }
}

/* Accessibility override always wins, including animations already running. */
@media (prefers-reduced-motion: reduce) {
  html.gc-premium-motion .gc-motion-item,
  html.gc-premium-motion .gc-hero-motion {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  html.gc-premium-motion main :is(
    .service-card, .gc-service-card, .cs-card, .case-card,
    .testimonial-card, .proof-snap-card, .diff-card,
    .who-card, .component-card, .process-step, .team-card, .gc-step,
    .btn, .elementor-button, .faq-q
  ),
  html.gc-premium-motion footer.site-footer a {
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
}


/* Tooltip and lead-form state transitions only (no changes to colors or geometry). */
html.gc-premium-motion :is(
  [role="tooltip"], .tooltip, .elementor-tooltip
) {
  transition: opacity 180ms ease-in-out, transform 180ms ease-in-out;
}
html.gc-premium-motion main :is(
  input:not([type="hidden"]), textarea, select
) {
  transition: border-color 180ms ease-in-out, box-shadow 180ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  html.gc-premium-motion :is(
    [role="tooltip"], .tooltip, .elementor-tooltip
  ),
  html.gc-premium-motion main :is(
    input:not([type="hidden"]), textarea, select
  ) {
    transition:none !important;
  }
}