/* ============================================
   ANIMATIONS
   Scroll entrance animations + hover
   micro-interactions (whimsy layer).

   All values reference :root --zs-* tokens.
   ============================================ */


/* ============================================
   SCROLL ENTRANCE ANIMATIONS
   JS adds .zs-anim-init on load, then
   .zs-anim-in when element enters viewport.
   ============================================ */

.zs-anim-init {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--zs-transition-slow) var(--zs-ease-out),
              transform var(--zs-transition-slow) var(--zs-ease-out);
}

.zs-anim-init.zs-anim-in {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered entrance delays */
.zs-anim-init[data-delay="1"] { transition-delay: 0.08s; }
.zs-anim-init[data-delay="2"] { transition-delay: 0.16s; }
.zs-anim-init[data-delay="3"] { transition-delay: 0.24s; }
.zs-anim-init[data-delay="4"] { transition-delay: 0.32s; }
.zs-anim-init[data-delay="5"] { transition-delay: 0.40s; }
.zs-anim-init[data-delay="6"] { transition-delay: 0.48s; }

/* Alternative: CSS-only stagger for grids */
.zs-anim-init:nth-child(1) { transition-delay: 0s; }
.zs-anim-init:nth-child(2) { transition-delay: 0.08s; }
.zs-anim-init:nth-child(3) { transition-delay: 0.16s; }
.zs-anim-init:nth-child(4) { transition-delay: 0.24s; }
.zs-anim-init:nth-child(5) { transition-delay: 0.32s; }
.zs-anim-init:nth-child(6) { transition-delay: 0.40s; }

/* Slide-from-left variant */
.zs-anim-init.zs-anim-slide-left {
  transform: translateX(-24px);
}

.zs-anim-init.zs-anim-slide-left.zs-anim-in {
  transform: translateX(0);
}

/* Slide-from-right variant */
.zs-anim-init.zs-anim-slide-right {
  transform: translateX(24px);
}

.zs-anim-init.zs-anim-slide-right.zs-anim-in {
  transform: translateX(0);
}

/* Scale-in variant */
.zs-anim-init.zs-anim-scale {
  transform: scale(0.95);
}

.zs-anim-init.zs-anim-scale.zs-anim-in {
  transform: scale(1);
}


/* ============================================
   CARD HOVER LIFTS
   ============================================ */

.zs-service-card {
  transition: transform var(--zs-transition-base),
              box-shadow var(--zs-transition-base),
              border-color var(--zs-transition-base);
}

.zs-service-card:hover {
  transform: translateY(-3px);
}

.zs-testimonial-card {
  transition: transform var(--zs-transition-base),
              box-shadow var(--zs-transition-base);
}

.zs-testimonial-card:hover {
  transform: translateY(-3px);
}

.zs-portfolio-card {
  transition: transform var(--zs-transition-base),
              box-shadow var(--zs-transition-slow);
}

.zs-portfolio-card:hover {
  transform: translateY(-4px);
}

.zs-pricing-card {
  transition: transform var(--zs-transition-base),
              box-shadow var(--zs-transition-base);
}

.zs-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--zs-shadow-lg);
}


/* ============================================
   BUTTON PRESS
   ============================================ */

.zs-btn:active,
.wp-block-button__link:active {
  transform: scale(0.97) !important;
  transition-duration: 0.08s !important;
}


/* ============================================
   NAV UNDERLINE REVEAL
   (Desktop: center-expand, Mobile: left-expand)
   Defined in components.css; this file adds
   the keyframe for gradient shimmer variant.
   ============================================ */


/* ============================================
   FAQ ACCORDION
   ============================================ */

/* Summary +/- icon rotation */
.zs-faq-section details summary::after {
  transition: transform var(--zs-transition-base);
}

.zs-faq-section details[open] summary::after {
  transform: rotate(45deg);
}

.zs-faq-section details[open] summary {
  color: var(--zs-accent);
}

/* Subtle bg highlight when open */
.zs-faq-section details[open] {
  background: var(--zs-bg-alt);
  border-radius: var(--zs-radius);
  padding: 0 var(--zs-space-md);
  margin-left: calc(var(--zs-space-md) * -1);
  margin-right: calc(var(--zs-space-md) * -1);
}


/* ============================================
   FOOTER LINK SHIFT
   ============================================ */

.zs-footer a {
  transition: color var(--zs-transition-fast),
              padding-left var(--zs-transition-fast);
}

.zs-footer ul li a:hover {
  color: var(--zs-secondary-light);
  padding-left: 4px;
}

.zs-footer-socials a {
  transition: color var(--zs-transition-fast),
              transform var(--zs-transition-fast);
}

.zs-footer-socials a:hover {
  color: #fff;
  transform: translateY(-2px);
}


/* ============================================
   DARK MODE TOGGLE ROTATION
   ============================================ */

.zs-theme-toggle {
  transition: all var(--zs-transition-base);
}

.zs-theme-toggle:hover {
  transform: rotate(15deg);
}


/* ============================================
   TESTIMONIAL STAR GLOW
   ============================================ */

.zs-stars {
  transition: text-shadow var(--zs-transition-base);
}

.zs-testimonial-card:hover .zs-stars {
  text-shadow: 0 0 8px var(--zs-secondary-light);
}


/* ============================================
   IMAGE ZOOM ON HOVER
   ============================================ */

.zs-portfolio-card img {
  transition: transform var(--zs-transition-slow);
}

.zs-portfolio-card:hover img {
  transform: scale(1.04);
}

.zs-two-col figure {
  overflow: hidden;
  border-radius: var(--zs-radius-lg);
}

.zs-two-col img {
  transition: transform var(--zs-transition-slow);
}

.zs-two-col figure:hover img {
  transform: scale(1.03);
}


/* ============================================
   GRADIENT SHIMMER
   ============================================ */

@keyframes zs-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.zs-shimmer {
  background-size: 200% 200%;
  animation: zs-gradient-shift 6s ease infinite;
}


/* ============================================
   PAGE ENTRANCE
   ============================================ */

@keyframes zs-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .zs-anim-init {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .zs-service-card:hover,
  .zs-testimonial-card:hover,
  .zs-portfolio-card:hover,
  .zs-pricing-card:hover {
    transform: none;
  }

  .zs-portfolio-card:hover img,
  .zs-two-col figure:hover img {
    transform: none;
  }

  .zs-theme-toggle:hover {
    transform: none;
  }

  .zs-shimmer {
    animation: none;
  }
}