/* ==========================================================================
   Zambit Animations — add-on stylesheet
   Enqueue AFTER the theme stylesheet. Pairs with zambit-animations.js
   (scroll-reveal observer). Everything is opt-in via .za-* classes added
   in the block editor ("Additional CSS class(es)").
   ========================================================================== */

:root {
  --za-dur: 0.6s;
  --za-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --za-accent: #cdd936;
}

@keyframes za-rise-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes za-wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------------------
   1. SCROLL REVEAL — .za-reveal on any section/element; .za-stagger on a
   grid/row to cascade its direct children. JS adds .za-in when ~15% visible.
   Hidden state only applies when JS is present (html.za-js), so nothing
   disappears if the script fails to load. Entrances are keyframe-driven
   (fill: backwards) so they release transform/transition afterwards and
   never fight hover effects.
   -------------------------------------------------------------------------- */
.za-js .za-reveal { opacity: 0; }
.za-js .za-reveal.za-in {
  opacity: 1;
  animation: za-rise-in var(--za-dur) var(--za-ease) backwards;
}

.za-js .za-stagger > * { opacity: 0; }
.za-js .za-stagger.za-in > * {
  opacity: 1;
  animation: za-rise-in var(--za-dur) var(--za-ease) backwards;
}
.za-js .za-stagger.za-in > *:nth-child(1) { animation-delay: 0.06s; }
.za-js .za-stagger.za-in > *:nth-child(2) { animation-delay: 0.14s; }
.za-js .za-stagger.za-in > *:nth-child(3) { animation-delay: 0.22s; }
.za-js .za-stagger.za-in > *:nth-child(4) { animation-delay: 0.30s; }
.za-js .za-stagger.za-in > *:nth-child(5) { animation-delay: 0.38s; }
.za-js .za-stagger.za-in > *:nth-child(6) { animation-delay: 0.46s; }

/* --------------------------------------------------------------------------
   2. HERO INTRO — one-time, on page load (no JS needed).
   .za-hero-line on each headline line / lede / CTA row (staggered by
   .za-d1 … .za-d4). .za-wipe on the yellow highlight span: reveals
   left-to-right after the line lands.
   -------------------------------------------------------------------------- */
.za-hero-line { animation: za-rise-in 0.65s var(--za-ease) both; }
.za-d1 { animation-delay: 0.05s; }
.za-d2 { animation-delay: 0.18s; }
.za-d3 { animation-delay: 0.40s; }
.za-d4 { animation-delay: 0.55s; }
.za-wipe { animation: za-rise-in 0.65s var(--za-ease) 0.18s both, za-wipe-in 0.7s var(--za-ease) 0.55s both; }

/* --------------------------------------------------------------------------
   3. CARD LIFT — .za-card on service / audience cards. Subtle raise +
   shadow; a child .za-tick (the yellow accent bar) stretches on hover
   (transform-based, so it works even when width is set inline).
   -------------------------------------------------------------------------- */
.za-card {
  transition: transform 0.25s var(--za-ease), box-shadow 0.25s var(--za-ease),
              border-color 0.25s var(--za-ease);
}
.za-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(20, 19, 14, 0.12);
}
.za-tick {
  transform-origin: left center;
  transition: transform 0.3s var(--za-ease);
}
.za-card:hover .za-tick { transform: scaleX(1.65); }

/* --------------------------------------------------------------------------
   4. LINK NUDGE — .za-more on "learn more →" links: the arrow steps right.
   Arrow must be wrapped: <a class="za-more">learn more <span>→</span></a>
   -------------------------------------------------------------------------- */
.za-more span {
  display: inline-block;
  transition: transform 0.22s var(--za-ease);
}
.za-more:hover span { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   5. NAV UNDERLINE — .za-nav on nav links: yellow underline slides in.
   -------------------------------------------------------------------------- */
.za-nav {
  position: relative;
}
.za-nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--za-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s var(--za-ease);
}
.za-nav:hover::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   6. BUTTON PRESS — .za-btn on pill buttons: soft glow on hover, gentle
   press on click.
   -------------------------------------------------------------------------- */
.za-btn {
  transition: transform 0.2s var(--za-ease), box-shadow 0.2s var(--za-ease),
              background-color 0.2s var(--za-ease);
}
.za-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(205, 217, 54, 0.35);
}
.za-btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }

/* --------------------------------------------------------------------------
   7. TERMINAL CURSOR — .za-cursor on a span right after the wordmark:
   a blinking block underscore, old-school terminal style.
   <span class="za-cursor"></span>
   -------------------------------------------------------------------------- */
@keyframes za-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.za-cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.16em;
  margin-left: 0.18em;
  background: var(--za-accent);
  vertical-align: baseline;
  animation: za-blink 1.1s steps(1) infinite;
}

/* --------------------------------------------------------------------------
   KILL SWITCHES — add to <body> to disable a family site-wide without
   touching markup (e.g. via a body_class filter or the demo's tweaks).
   One class per numbered effect; .za-off-hover disables 3–6 at once.
   -------------------------------------------------------------------------- */
.za-off-hero .za-hero-line, .za-off-hero .za-wipe { animation: none !important; }

.za-off-reveal .za-reveal, .za-off-reveal .za-stagger > * {
  opacity: 1 !important; animation: none !important;
}

.za-off-card .za-card, .za-off-card .za-tick,
.za-off-hover .za-card, .za-off-hover .za-tick { transition: none !important; }
.za-off-card .za-card:hover, .za-off-hover .za-card:hover { transform: none; box-shadow: none; }
.za-off-card .za-card:hover .za-tick, .za-off-hover .za-card:hover .za-tick { transform: none; }

.za-off-more .za-more span, .za-off-hover .za-more span { transition: none !important; }
.za-off-more .za-more:hover span, .za-off-hover .za-more:hover span { transform: none; }

.za-off-nav .za-nav::after, .za-off-hover .za-nav::after { display: none; }

.za-off-btn .za-btn, .za-off-hover .za-btn { transition: none !important; }
.za-off-btn .za-btn:hover, .za-off-hover .za-btn:hover { transform: none; box-shadow: none; }

.za-off-cursor .za-cursor { animation: none !important; }

/* --------------------------------------------------------------------------
   ACCESSIBILITY — respect reduced-motion preference: everything renders
   in its final state, hover feedback stays but without movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .za-js .za-reveal, .za-js .za-stagger > * { opacity: 1 !important; animation: none !important; }
  .za-hero-line, .za-wipe { animation: none !important; }
  .za-cursor { animation: none !important; }
  .za-card, .za-tick, .za-more span, .za-btn, .za-nav::after { transition: none !important; }
  .za-card:hover, .za-btn:hover, .za-more:hover span { transform: none; }
  .za-card:hover .za-tick { transform: none; }
}