/* Glilot site — shared motion layer (enqueued on every template; behaviour in assets/js/site-motion.js).

   Motion vocabulary taken from the /lp/ theme (glilot-lp):
   - text / cards reveal: opacity 0 -> 1 and a 26px rise (y: 26, GSAP), 1.05s power3.out
     (= cubic-bezier(0.215, 0.61, 0.355, 1)), stagger 0.09s, IntersectionObserver
     rootMargin "0px 0px -12% 0px"  (lp.js startRevealAnimations);
     phones: the reveal line sits above the fixed contact bar (bar top - 40px, at most 85% of
     the viewport) and starts that cross it together are queued at least 0.18s apart (as the
     home scene's card queue, home-scroll.js), so reveals play in sight and visibly chain;
   - media reveal: clip-path wipe inset(0 0 0 100%) -> inset(0), 1.15s cubic-bezier(0.22, 1, 0.36, 1)
     (lp style.css .lp-section-two::before / .lp-pinned-bg__desktop-img--section-*);
   - emblem: hero spin 18s linear infinite (glilot-not-found-rotate), scroll rotation 48deg over
     3209px desktop / 180deg over 3738px mobile (lp.js stamp rotation, measured on /lp/);
   - accordion: height 0.52s cubic-bezier(0.22, 1, 0.36, 1), answer opacity 0.26s ease-out and
     translateY(-3.077vw @390 = 12px) 0.42s, both delayed 0.18s (lp style.css section seven);
   - arrow nudge: translateX(-0.208vw) 0.6s ease (lp .lp-button img), mobile -4px.

   Rules of this layer:
   - Only transform-family properties (translate / rotate), opacity, clip-path and the accordion
     height are animated. Individual `translate` / `rotate` properties are used so an element's
     own `transform` (flips, -50% centring, the 404 stamp's base angle) is never replaced.
   - The hidden-before-reveal state exists only under html.glilot-motion, which the head gate
     (functions.php glilot_site_motion_gate) sets when JS runs and motion is allowed. No JS or
     prefers-reduced-motion: everything is visible and static.
   - The resting state is the static layout: when an animation ends nothing is left inline. */

/* ---------- Reveal targets (keep in sync with SELECTORS in assets/js/site-motion.js) ----------
   Never revealed: [data-motion="off"] subtrees and the first three home sections (hero, location,
   specialties intro), which become one pinned scroll-scrubbed video scene (home-scroll.js). */
@media (prefers-reduced-motion: no-preference) {
  html.glilot-motion main :is(h1, h2, h3, p, li, blockquote, form, [data-motion-text], [data-motion-arrow], [data-motion-card], [data-motion-media]):not([data-motion="off"], [data-motion-in]):not(:is([data-motion="off"], .glilot-home-hero, .glilot-home-location, .glilot-home-specialties-intro, [data-motion-card], [data-motion-text], [data-motion-media], .site-faq, form, header, nav, [data-mobile-bar], a, button, summary, label, li, blockquote, dl) *),
  html.glilot-motion main .site-faq > .site-faq__item:not([data-motion-in]):not(:is([data-motion="off"], .glilot-home-hero, .glilot-home-location, .glilot-home-specialties-intro, [data-motion-card], [data-motion-text], [data-motion-media]) *),
  html.glilot-motion main [data-motion-after]:not([data-motion-in]),   /* late reveal (site-motion.js 5.) */
  html.glilot-motion main [data-motion-panel]:not([data-motion-in]),
html.glilot-motion main :is([data-h="h1"], [data-h="h2"], [data-h="h3"], p, li, blockquote, form, [data-motion-text], [data-motion-arrow], [data-motion-card], [data-motion-media]):not([data-motion="off"], [data-motion-in]):not(:is([data-motion="off"], .glilot-home-hero, .glilot-home-location, .glilot-home-specialties-intro, [data-motion-card], [data-motion-text], [data-motion-media], .site-faq, form, header, nav, [data-mobile-bar], a, button, summary, label, li, blockquote, dl) *) {  /* section entrance panel (6.) */
    opacity: 0;
  }
}

/* ---------- Groups with their own choreography (site-motion.js 6-9) ----------
   6. data-motion-entrance (section) + data-motion-panel: [data-motion-media] first (its usual
      wipe / fade), the panel from +0.45s.
      Desktop: clip wipe inset from its anchored edge, 1.15s cubic-bezier(0.22, 1, 0.36, 1) (= the
      lp media wipe); texts from 60% of it: title first, the next block 0.18s later, then 0.09s.
      Mobile: the home scroll scene's panel opening (home-scroll.css .is-panel), on entry instead
      of scroll: the sheet slides up from the section's bottom edge, translate 0.9s
      cubic-bezier(0.215, 0.61, 0.355, 1), no fade, clipped at that edge; texts from +0.45s in
      0.09s steps (scene delays 0.45 / 0.54 / 0.63s). Every text: fade + 26px rise, 1.05s power3.out.
      The texts include the scope's Q&A rows; a heading with data-motion-lines enters line by line.
      Without a rendered image the texts start at once.
   7. data-motion-trio (only the three [data-motion-trio-item] are owned): centre fade 1.15s; sides from +0.55s, translate from the centre's x
      (tucked behind it, the centre paints above) to 0, opacity in the first 12%, 1.15s.
   8. data-motion-scatter: cards in visual order, 0.09s stagger, fade + 52px (2 x 26 @1920/@390)
      from their side of the group (middle column: from below; one column: alternating sides).
   9. data-motion-swap (desktop): the rules below exist only while site-motion.js runs the pin
      (.is-motion-swap); without it the items stay the static stack. */
@media (min-width: 768px) {
  .is-motion-swap > [data-motion-swap-stage] {
    position: sticky;           /* top + height set by site-motion.js */
    overflow: hidden;
    background: #fff;
  }
  .is-motion-swap [data-motion-swap-item] {
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;    /* the item below shows while the next one crossfades in */
  }
}

/* ---------- Emblem ring (functions.php glilot_site_emblem) ---------- */
.glilot-emblem-stack {
  position: relative;
  display: block;
}
.glilot-emblem-stack > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
@keyframes glilot-emblem-spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-emblem="spin"] {
    animation: glilot-emblem-spin 18s linear infinite;
  }
}
html.brave-capturing [data-emblem],
html.glilot-motion-complete [data-emblem] {   /* capture / verification: resting angle */
  animation: none !important;
  rotate: none !important;
}

/* ---------- Arrow nudge on hover / keyboard focus (glilot_site_arrow_button) ----------
   The CTA fill / colour states live in the shared CTA component (style.css .glilot-cta), which
   also transitions the icon filter with this same 0.6s translate. */
[data-motion-arrow-icon] {
  transition: translate 0.6s ease;
}
[data-motion-arrow]:hover [data-motion-arrow-icon],
[data-motion-arrow]:focus-visible [data-motion-arrow-icon] {
  translate: -0.208333vw 0;                 /* 4 / 1920 (lp -0.208vw) */
}
@media (max-width: 767px) {
  [data-motion-arrow]:hover [data-motion-arrow-icon],
  [data-motion-arrow]:focus-visible [data-motion-arrow-icon] {
    translate: -1.025641vw 0;               /* 4 / 390 (lp mobile -4px) */
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion-arrow-icon] {
    transition: none;
  }
  [data-motion-arrow]:hover [data-motion-arrow-icon],
  [data-motion-arrow]:focus-visible [data-motion-arrow-icon] {
    translate: none;
  }
}