/* ==========================================================================
   KWN mobile scroll reveal

   Desktop keeps WOW.js (main.js only inits it above 767px). Mobile had no
   animation at all, killed in three layers:
     1. js/main.js:28      -> WOW never initialises below 768px
     2. js/scroll-animations.js -> bails out on compact viewports
     3. style.css ~4207    -> .wow/.scroll-reveal forced to opacity:1,
                              transform:none, transition:none, animation:none
        plus the blanket * { animation/transition/transform: none !important }

   This file re-enables motion on mobile without touching either main
   stylesheet, and without the fragility of WOW's CSS-driven hiding.

   Safety properties:
   - Nothing is hidden until JS adds .kwn-reveal-on to <html>. If JS fails or
     is blocked, every element stays visible.
   - Only opacity and transform animate. Neither affects layout, so this
     cannot introduce CLS (which is what the mobile kill switch was aiming at).
   - Reveals are one-way: elements do not re-hide when scrolled past, which
     avoids flicker during fast flick-scrolling on phones.

   Specificity note: the kill rules above are (0,1,0) to (0,1,1) with
   !important. The selectors here reach (0,2,1) or higher, so they win.
   ========================================================================== */

@media (max-width: 768px) {

  html.kwn-reveal-on .kwn-reveal {
    transition:
      opacity 0.34s cubic-bezier(0.16, 0.84, 0.34, 1),
      transform 0.34s cubic-bezier(0.16, 0.84, 0.34, 1) !important;
    animation: none !important;
  }

  html.kwn-reveal-on .kwn-reveal:not(.kwn-reveal-in) {
    opacity: 0 !important;
    /* Kept small on purpose: long travel feels sluggish on a phone. */
    transform: translateY(14px) !important;
    visibility: visible !important;
  }

  html.kwn-reveal-on .kwn-reveal.kwn-reveal-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
  }

  /* Headings and eyebrows read better sliding from the side. */
  html.kwn-reveal-on .kwn-reveal-lead:not(.kwn-reveal-in) {
    transform: translateY(10px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  html.kwn-reveal-on .kwn-reveal,
  html.kwn-reveal-on .kwn-reveal:not(.kwn-reveal-in),
  html.kwn-reveal-on .kwn-reveal.kwn-reveal-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }
}