/* ==========================================================================
   EWK 2026 motion - reveal-on-scroll + button micro-interactions
   Pairs with js/ewk-2026-motion.js. Enqueue AFTER css/ewk-2026.css.

   Nothing in section 1 hides anything unless the JS has run: every rule is
   gated on html.ewk-motion (added synchronously by the first line of the
   script) and on (prefers-reduced-motion: no-preference). No JS, a blocked
   script, a 404, reduced motion, the block editor, wp-admin: the page
   renders exactly as it does today.

   Only opacity and transform are animated. Never height, margin, display.
   The JS removes .ewk-reveal again once the transition has finished, so no
   transform, transition or stacking context from this file lingers on an
   element after its entrance - Stackable hover effects, sticky / fixed
   descendants and z-index tricks go back to their untouched behaviour.
   ========================================================================== */

:root {
  --ewk-reveal-duration: 600ms;     /* the JS reads this for its cleanup timers */
  --ewk-reveal-distance: 18px;
  --ewk-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* ease-out, settles softly */
  --ewk-reveal-delay: 0ms;          /* set per element by the JS (stagger) */
  --ewk-motion-safety: 2500ms;      /* pre-paint hide gives up after this if the JS never runs */
}


/* --------------------------------------------------------------------------
   1. Reveal on scroll
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* The transition lives on .ewk-reveal, the hidden state on
     .ewk-reveal:not(.is-inview). Adding .is-inview simply drops the hidden
     declarations, so the element transitions to whatever opacity/transform
     its own CSS gives it (normally 1 / none) - we never force values that
     could stomp on a block's own transform. */
  html.ewk-motion .ewk-reveal {
    transition:
      opacity   var(--ewk-reveal-duration) var(--ewk-reveal-ease) var(--ewk-reveal-delay),
      transform var(--ewk-reveal-duration) var(--ewk-reveal-ease) var(--ewk-reveal-delay);
  }

  html.ewk-motion .ewk-reveal:not(.is-inview) {
    opacity: 0;
    transform: translateY(var(--ewk-reveal-distance));
  }

  /* Optional pre-paint hide. Only active when the head snippet documented
     in the JS has added html.ewk-motion-pending. Opacity only (no
     transform), on a superset of what the JS will pick, so the first paint
     already has the first screen hidden and the deferred script can take
     over without a visible flash. The keyframe is the safety net: if the
     script never arrives, everything shows after --ewk-motion-safety.
     Keep this list in step with the one in @media print below. */
  html.ewk-motion-pending #site-content :is(
      .stk-block-column, .wp-block-column, .wp-block-genesis-blocks-gb-column,
      .stk-block-heading, .wp-block-heading, h1, h2, h3,
      .stk-block-image, figure, .ewk-frame,
      .stk-block-button-group, .wp-block-buttons, .wp-block-button,
      .stk-block-text, p.wp-block-paragraph, .wp-block-list,
      .gform_wrapper, .wp-block-post, .search-result,
      .ewk-closer-item, .ewk-lozenge, .ewk-benefit-card, .ewk-promo-card,
      .ewk-prog-pair, .ewk-cta__card, .ewk-reveal-unit, [data-ewk-reveal]
  ) {
    opacity: 0;
    animation: ewk-motion-safety 1ms linear var(--ewk-motion-safety) forwards;
  }

  @keyframes ewk-motion-safety {
    to { opacity: 1; }
  }
}

/* The block editor (and its iframe) loads front-end styles: never hide
   anything there, whatever classes end up on <html>. */
.editor-styles-wrapper .ewk-reveal,
.block-editor-page .ewk-reveal,
.wp-admin .ewk-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media print {
  html.ewk-motion .ewk-reveal,
  html.ewk-motion-pending #site-content :is(
      .stk-block-column, .wp-block-column, .wp-block-genesis-blocks-gb-column,
      .stk-block-heading, .wp-block-heading, h1, h2, h3,
      .stk-block-image, figure, .ewk-frame,
      .stk-block-button-group, .wp-block-buttons, .wp-block-button,
      .stk-block-text, p.wp-block-paragraph, .wp-block-list,
      .gform_wrapper, .wp-block-post, .search-result,
      .ewk-closer-item, .ewk-lozenge, .ewk-benefit-card, .ewk-promo-card,
      .ewk-prog-pair, .ewk-cta__card, .ewk-reveal-unit, [data-ewk-reveal]
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* --------------------------------------------------------------------------
   2. Button micro-interactions
   Lift 1px + a slightly stronger shadow on hover, scale(.98) on press,
   150ms. Pure CSS, so it does not need the JS gate; under reduced motion
   none of this applies and the buttons keep only their existing colour
   change on hover.

   Stackable buttons that carry one of Stackable's own transform hover
   effects (stk--hover-effect-lift / -scale / -shrink ...) are left to
   Stackable, except the header CTA, which is restyled on purpose below.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  .stk-button:where(:not([class*="stk--hover-effect-lift"]):not([class*="stk--hover-effect-scale"]):not([class*="stk--hover-effect-shrink"])),
  .wp-block-button__link,
  .ewk-btn > a,
  .ewk-btn .stk-button,
  a.ewk-btn,
  .gform_wrapper .gform_button {
    transition:
      transform        150ms ease,
      box-shadow       150ms ease,
      background-color 150ms ease,
      border-color     150ms ease,
      color            150ms ease;
  }

  .stk-button:where(:not([class*="stk--hover-effect-lift"]):not([class*="stk--hover-effect-scale"]):not([class*="stk--hover-effect-shrink"])):hover,
  .wp-block-button__link:hover,
  .ewk-btn > a:hover,
  .ewk-btn .stk-button:hover,
  a.ewk-btn:hover,
  .gform_wrapper .gform_button:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(11, 26, 48, 0.4);
  }

  .stk-button:where(:not([class*="stk--hover-effect-lift"]):not([class*="stk--hover-effect-scale"]):not([class*="stk--hover-effect-shrink"])):active,
  .wp-block-button__link:active,
  .ewk-btn > a:active,
  .ewk-btn .stk-button:active,
  a.ewk-btn:active,
  .gform_wrapper .gform_button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px -4px rgba(11, 26, 48, 0.35);
    transition-duration: 80ms;
  }

  /* Header CTA ("Get Started"). Stackable gives it stk--hover-effect-scale-more;
     keep a touch of that scale so it does not feel smaller than before. */
  .header-primary .header-cta .stk-button,
  .header-primary .header-cta .wp-block-button__link {
    transition:
      transform        150ms ease,
      box-shadow       150ms ease,
      background-color 150ms ease,
      border-color     150ms ease,
      color            150ms ease;
  }
  .header-primary .header-cta .stk-button:hover,
  .header-primary .header-cta .wp-block-button__link:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
  }
  .header-primary .header-cta .stk-button:active,
  .header-primary .header-cta .wp-block-button__link:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px -4px rgba(0, 0, 0, 0.4);
    transition-duration: 80ms;
  }
}