/**
 * GCT Effects Layer — pure CSS, no external deps
 * Entrance, hover, micro-interactions for elements
 */

:root {
  --gct-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --gct-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --gct-duration: 300ms;
  --gct-duration-slow: 500ms;
  --gct-lift: 0 12px 28px rgba(15, 23, 42, 0.12);
  --gct-lift-sm: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* —— Entrance on scroll (Intersection-ready class) —— */
.gct-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--gct-duration-slow) var(--gct-ease-out),
              transform var(--gct-duration-slow) var(--gct-ease-out);
}
.gct-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.gct-reveal--left { transform: translateX(-24px); }
.gct-reveal--left.is-visible { transform: translateX(0); }
.gct-reveal--right { transform: translateX(24px); }
.gct-reveal--right.is-visible { transform: translateX(0); }
.gct-reveal--scale { transform: scale(0.96); }
.gct-reveal--scale.is-visible { transform: scale(1); }

/* —— Cards / Grid items —— */
.w-grid-item,
.w-blog-post,
.w-pricing-item,
.w-person,
.w-iconbox.style_circle,
.w-iconbox.style_outlined {
  transition: transform var(--gct-duration) var(--gct-ease),
              box-shadow var(--gct-duration) var(--gct-ease);
}
.w-grid-item:hover,
.w-blog-post:hover,
.w-pricing-item:hover,
.w-person:hover {
  transform: translateY(-4px);
  box-shadow: var(--gct-lift);
}

/* —— Buttons —— */
.w-btn,
.button,
input[type=submit],
.woocommerce a.button,
.woocommerce button.button {
  transition: transform 0.15s var(--gct-ease),
              box-shadow var(--gct-duration) var(--gct-ease),
              background-color var(--gct-duration) var(--gct-ease),
              color var(--gct-duration) var(--gct-ease) !important;
  position: relative;
  overflow: hidden;
}
.w-btn:hover,
.button:hover,
input[type=submit]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--gct-lift-sm);
}
.w-btn:active,
.button:active {
  transform: translateY(0);
}

/* Ripple pseudo (CSS-only light flash) */
.w-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), rgba(255,255,255,0.35), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--gct-ease);
  pointer-events: none;
}
.w-btn:active::after {
  opacity: 1;
  transition: opacity 0s;
}

/* —— Iconbox —— */
.w-iconbox .w-iconbox-icon {
  transition: transform var(--gct-duration) var(--gct-ease),
              background-color var(--gct-duration) var(--gct-ease),
              color var(--gct-duration) var(--gct-ease);
}
.w-iconbox:hover .w-iconbox-icon {
  transform: scale(1.08) rotate(-3deg);
}

/* —— Images —— */
.w-image img,
.w-grid-item .post_image img,
.w-blog-post-preview img {
  transition: transform var(--gct-duration-slow) var(--gct-ease);
}
.w-grid-item:hover .post_image img,
.w-blog-post:hover .w-blog-post-preview img,
.w-image.with_hover:hover img {
  transform: scale(1.04);
}

/* —— Tabs / Accordion —— */
.w-tabs-item,
.w-tabs-section-title {
  transition: color var(--gct-duration) var(--gct-ease),
              background-color var(--gct-duration) var(--gct-ease),
              border-color var(--gct-duration) var(--gct-ease);
}

/* —— Flipbox —— */
.w-flipbox-front,
.w-flipbox-back {
  transition: transform 0.6s var(--gct-ease);
}

/* —— Counter —— */
.w-counter-value {
  transition: color var(--gct-duration) var(--gct-ease);
}

/* —— Separator —— */
.w-separator {
  transition: opacity var(--gct-duration) var(--gct-ease);
}

/* —— Message / Alert —— */
.w-message {
  animation: gct-slide-in 0.35s var(--gct-ease-out) both;
}
@keyframes gct-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* —— Socials —— */
.w-socials-item a,
.w-sharing-item {
  transition: transform 0.2s var(--gct-ease), opacity 0.2s var(--gct-ease);
}
.w-socials-item a:hover,
.w-sharing-item:hover {
  transform: translateY(-2px) scale(1.06);
}

/* —— Focus visible (a11y) —— */
a:focus-visible,
button:focus-visible,
.w-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-content-primary, #2563eb);
  outline-offset: 2px;
}

/* —— Smooth scroll —— */
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gct-reveal,
  .w-grid-item,
  .w-btn,
  .w-iconbox .w-iconbox-icon,
  .w-image img,
  .w-message {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}