/* ZELQIVRA static site.
   The only style rules that do not come from the approved stylesheet. */

/* 1. A placeholder that keeps its space in the multi-column footer is removed from the
      single-column phone footer, where an empty block would read as a gap. */
@media (max-width: 640px) {
  .zq-collapse-narrow { display: none; }
}

/* 2. Scroll reveal. The approved pages carried these start states as inline styles written
      by the application framework, which then animated them. Here site.js arms them with
      the "zq-motion" class and adds "zq-in" at the same moments. The numbers are the
      approved component's own (components/motion/Reveal.tsx):
        section      18px, 0.50s
        group item   16px, 0.45s, 60ms apart after 40ms
        hero visual  14px, 0.55s after 0.08s, never faded
        easing       cubic-bezier(0.22, 1, 0.36, 1)
      Without the class nothing is hidden. Under reduced motion the approved stylesheet's
      own rule on [data-reveal] and [data-hero-accent] keeps everything visible and at rest. */
html.zq-motion [data-zq-motion="reveal"] { opacity: 0; transform: translateY(18px); }
html.zq-motion [data-zq-motion="item"] { opacity: 0; transform: translateY(16px); }
html.zq-motion [data-zq-motion="hero"] { transform: translateY(14px); }

html.zq-motion [data-zq-motion="reveal"].zq-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
html.zq-motion [data-zq-motion="item"].zq-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
html.zq-motion [data-zq-motion="hero"].zq-in {
  transform: none;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}