/* ============================================================
   Safadi Center — LOGO MARK MOTION
   The four mosaic tiles of the brand icon: their colours, the
   direction each one sits in, and the motion they share.

   Its own file because the mark appears on pages that do NOT
   share a stylesheet — the -01 pages load site.css, while
   join.html / joinus.html load only their own — and one
   definition beats four copies drifting apart.

   The icon is INLINED as SVG wherever it animates: Chromium
   rasterises an SVG loaded via <img> once and freezes it, so an
   animation defined inside the file renders a single arbitrary
   frame and stops (verified in-browser). mark-icon.svg itself is
   still the static source of truth for the same artwork.

   --ease-out carries a fallback everywhere it is used: it is
   defined in site.css's :root, which join.html and joinus.html
   never load, and an undefined var would drop the declaration —
   losing the easing on exactly those two pages.
   ============================================================ */

/* transform-box:fill-box is what makes each tile scale and rotate about its
   OWN centre — without it they pivot around the SVG origin, which sits well
   outside the artwork and throws the pieces off screen.
   The intro animation is deliberately NOT here: the base tile only knows how
   to sit still and how to transition. Which logos play the intro, and when,
   is decided by the two trigger rules further down — the footer's is below
   the fold and has to wait to be scrolled to, or nobody ever sees it. */
.bi-tile {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  /* Slowed on request (was 0.45s / 0.3s) — the colour-and-float
     reaction reads better given a moment, not snapped through. */
  transition: transform 0.7s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
              filter 0.55s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* The four tiles sit in four quadrants, so each one carries the direction it
   flies in from (and drifts toward on hover) as its own pair of custom
   properties — one keyframe and one hover rule then serve all four.
   ⚠️ The trigger rules below deliberately use animation LONGHANDS, never the
   `animation` shorthand: the shorthand resets animation-delay to 0, and being
   two classes deep it outranks these delays on specificity, so the stagger
   silently died and all four tiles flew in together. It failed that way twice
   — once on rule order, once on specificity — and both times it was invisible
   by eye at 0.7s and only showed up reading getAnimations() back. */
.bi-terracotta { fill: #c84927; --bi-x:  1; --bi-y: -1; --bi-r:  14deg; animation-delay: 0.07s; }
.bi-navy       { fill: #193e5c; --bi-x:  1; --bi-y:  1; --bi-r: -14deg; animation-delay: 0.21s; }
.bi-green      { fill: #6b7961; --bi-x: -1; --bi-y:  1; --bi-r:  14deg; animation-delay: 0.14s; }
.bi-gold       { fill: #d99d30; --bi-x: -1; --bi-y: -1; --bi-r: -14deg; animation-delay: 0s;    }

/* On the DARK footer the navy tile all but disappears — #193e5c sitting on
   --ink (#24313D) is a few points of contrast — so there it takes the white
   variant of the same artwork instead. This is the "logo white.svg" master:
   the four paths are geometrically identical to the ones inlined in the
   markup, and the navy arch turning white is the only difference in it.
   Same reasoning that gave the wordmark its own -light file.
   Applied as a fill override rather than a second copy of the SVG, so the
   footer mark keeps the assemble-on-scroll and float-on-hover motion. */
.footer-lockup .bi-navy { fill: #fff; }

/* The four pieces assemble; on hover they float back apart a little and
   reassemble when the pointer leaves — the mosaic-tile motion the original
   site's hero mark used, which is why the icon was split off the wordmark in
   the first place. `backwards` (not `forwards`) holds the offset start state
   through the stagger delay and then hands the transform back to CSS, so the
   hover transition still works once the intro has finished. */
@keyframes brand-tile-in {
  from {
    opacity: 0;
    transform: translate(calc(var(--bi-x) * 32px), calc(var(--bi-y) * 32px))
               scale(0.68) rotate(var(--bi-r));
  }
  to { opacity: 1; transform: none; }
}

/* Trigger 1 — plays on load. For the marks that are on screen at load:
   the navbar on every -01 page, and the join / joinus page headers. */
.tile-intro .bi-tile {
  animation-name: brand-tile-in;
  animation-duration: 0.72s;
  animation-timing-function: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: backwards;
}

/* Trigger 2 — plays when scrolled to. The footer mark is the one instance
   below the fold, where a load-time intro would finish unseen and the logo
   would just be sitting there assembled by the time anyone reached it.
   `reveal` is the hook the site's existing IntersectionObserver watches
   (it adds `is-in`); its own fade-and-rise is cancelled just here, so the
   tiles assembling are the only motion rather than two effects at once. */
.footer-lockup.reveal { opacity: 1; transform: none; transition: none; }
.footer-lockup.is-in .bi-tile {
  animation-name: brand-tile-in;
  animation-duration: 0.72s;
  animation-timing-function: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  animation-fill-mode: backwards;
}

/* Hover: the whole lockup is the target in the navbar and footer (so the
   wordmark counts as part of the logo you are pointing at), and the mark
   itself elsewhere, where it stands alone. Colour moves too, not just
   position: each tile saturates and brightens a touch, on request — a
   filter, not four new hex values, so every tile's OWN hue intensifies
   correctly on its own (including the footer's white navy variant,
   where a filter still reads as "lit up" rather than needing a fifth
   colour picked for it). Click / keyboard-activate goes further and
   settles a shade darker plus a slight press-in scale — "confirmed",
   the same read as this site's own buttons darkening under the
   pointer, rather than just a stronger version of the hover. */
.brand:hover .bi-tile,
.footer-lockup:hover .bi-tile,
.tile-mark:hover .bi-tile {
  transform: translate(calc(var(--bi-x) * 15px), calc(var(--bi-y) * 15px));
  filter: saturate(1.4) brightness(1.08);
}
.brand:active .bi-tile,
.footer-lockup:active .bi-tile,
.tile-mark:active .bi-tile,
.brand:focus-visible .bi-tile,
.footer-lockup:focus-visible .bi-tile,
.tile-mark:focus-visible .bi-tile {
  transform: translate(calc(var(--bi-x) * 15px), calc(var(--bi-y) * 15px)) scale(0.94);
  filter: saturate(1.7) brightness(0.9);
}


/* The mark is branding first and motion second. Colour still shifts
   under reduced motion — it's a state change, not motion — only the
   position and scale settle instantly instead of easing into it. */
@media (prefers-reduced-motion: reduce) {
  .bi-tile { animation: none; transition: none; }
  .tile-intro .bi-tile,
  .footer-lockup.is-in .bi-tile { animation: none; }
  .brand:hover .bi-tile,
  .footer-lockup:hover .bi-tile,
  .tile-mark:hover .bi-tile,
  .brand:active .bi-tile,
  .footer-lockup:active .bi-tile,
  .tile-mark:active .bi-tile,
  .brand:focus-visible .bi-tile,
  .footer-lockup:focus-visible .bi-tile,
  .tile-mark:focus-visible .bi-tile { transform: none; }
}