/* ==========================================================================
   MARK One – light motion layer (separate copy of the site, for comparison).
   1) reveal: photos / panels fade in and rise a little, photos settle from a slight zoom
   2) headings: on desktop every line slides up out of a mask, line after line
   3) hero: very slow zoom of the picture, title and button fade in
   Everything is off for visitors who ask for reduced motion, and the page stays complete without JS (js/motion.js sets html.js-motion).
   ========================================================================== */
@layer motion {
  @media (prefers-reduced-motion: no-preference) {

    /* this layer replaces the older scroll-driven "rise" of some panels */
    html.js-motion .card, html.js-motion .mosaic .panel, html.js-motion .whatis .panel, html.js-motion .apps .panel,
    html.js-motion .ind .panel, html.js-motion .war .panel, html.js-motion .hc, html.js-motion .hp { animation: none; }

    /* ---- 1) reveal ---- */
    html.js-motion .rv { opacity: 0; translate: 0 26px; }
    html.js-motion .rv.in { opacity: 1; translate: 0 0;
      transition: opacity 1s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), translate 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
    html.js-motion .rv.panel > picture > img { scale: 1.07; }
    html.js-motion .rv.panel.in > picture > img { scale: 1; transition: scale 1.9s cubic-bezier(.2, .65, .2, 1) var(--d, 0ms); }

    /* ---- 2) headings, line by line (desktop: the lines are the designer's own line breaks) ---- */
    html.js-motion .ln, html.js-motion .lni { display: inline; }
    @media (min-width: 1100px) {
      html.js-motion .sp .ln { display: block; clip-path: inset(-.16em -3em -.22em -3em); }
      html.js-motion .sp .lni { display: block; translate: 0 118%; }
      html.js-motion .sp.in .lni { translate: 0 0; transition: translate 1.15s cubic-bezier(.2, .75, .2, 1) calc(var(--d, 0ms) + var(--i, 0) * 120ms); }
    }

    /* ---- 3) hero ---- */
    .hero__img img, .hw-hero__img img { animation: mo-zoom 16s cubic-bezier(.2, .6, .2, 1) both; }
    .hero .hero__title, .hero .hero__sub { animation: mo-in 1.1s cubic-bezier(.2, .7, .2, 1) .3s both; }
    .hero .btn-order { animation: mo-in .9s cubic-bezier(.2, .7, .2, 1) .65s both; }
    @keyframes mo-zoom { from { scale: 1.07; } to { scale: 1; } }
    @keyframes mo-in { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
  }
}