/*!
 * it-logo-motion-v1.css
 * One behaviour for the logo, on every page that carries it.
 *
 * Three different hovers had grown up across the site: the full lift on the
 * blog and the guides, a one pixel nudge on the home page and the tools, and
 * nothing at all on the trade pages. Four pages painted the logo as a CSS
 * background image, where the background shorthand in the hover rule wiped it
 * out and left a dark gap. Those four now use the same inline lockup as
 * everything else, and this file settles the motion.
 *
 * The selectors lead with the element name so they outrank the older rules
 * wherever they happen to sit in the cascade. Nothing here uses !important,
 * so a page can still override it deliberately.
 *
 * The mark moves and the wordmark stays put. Lifting the whole lockup reads
 * as the header wobbling; lifting the mark alone reads as the logo answering.
 */

a.brand .lk-mark,
a.au-brand > svg,
a.ap-brand > svg,
a.sb-brand > svg {
  transition: transform .28s cubic-bezier(.34, 1.32, .5, 1), filter .28s ease;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* hover and keyboard focus get the same answer, because a keyboard user
   should see what a mouse user sees */
a.brand:hover .lk-mark,
a.brand:focus-visible .lk-mark,
a.au-brand:hover > svg,
a.au-brand:focus-visible > svg,
a.ap-brand:hover > svg,
a.ap-brand:focus-visible > svg,
a.sb-brand:hover > svg,
a.sb-brand:focus-visible > svg {
  transform: translateY(-2px) rotate(-4deg) scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(242, 98, 7, .34));
}

/* the press: it settles back and dips under its resting size, quickly, so a
   tap feels like it landed on something */
a.brand:active .lk-mark,
a.au-brand:active > svg,
a.ap-brand:active > svg,
a.sb-brand:active > svg {
  transform: translateY(0) rotate(0) scale(.94);
  filter: none;
  transition-duration: .09s;
}

/* background-color rather than the background shorthand, so a logo painted as
   a background image is never erased by its own hover state */
a.brand,
a.au-brand,
a.ap-brand,
a.sb-brand {
  transition: background-color .18s ease;
}

a.brand:focus-visible,
a.au-brand:focus-visible,
a.ap-brand:focus-visible,
a.sb-brand:focus-visible {
  outline: 2px solid #F26207;
  outline-offset: 3px;
}

/* The wordmark never fades or shifts. It was doing both on a few pages. */
a.brand .lk-word,
a.brand .lk-word b,
a.brand .lk-word i {
  opacity: 1;
  transition: none;
}

/* Reduced motion keeps the feedback and drops the movement, rather than
   removing the response altogether: the mark still answers, with colour. */
@media (prefers-reduced-motion: reduce) {
  a.brand .lk-mark,
  a.au-brand > svg,
  a.ap-brand > svg,
  a.sb-brand > svg {
    transition: filter .2s ease;
  }

  a.brand:hover .lk-mark,
  a.brand:focus-visible .lk-mark,
  a.brand:active .lk-mark,
  a.au-brand:hover > svg,
  a.au-brand:focus-visible > svg,
  a.ap-brand:hover > svg,
  a.ap-brand:focus-visible > svg,
  a.sb-brand:hover > svg,
  a.sb-brand:focus-visible > svg,
  a.sb-brand:active > svg {
    transform: none;
    filter: drop-shadow(0 0 8px rgba(242, 98, 7, .45));
  }
}

/* A few pages carry an older, narrower rule scoped to the header
   (header.site .brand:hover .lk-mark{transform:translateY(-1px)}). It has the
   same specificity as the rules above and sits later in the document, so it
   was winning on those pages and the mark only nudged. Repeating the set with
   the header in the selector settles it without !important. */
header a.brand .lk-mark,
header.site a.brand .lk-mark {
  transition: transform .28s cubic-bezier(.34, 1.32, .5, 1), filter .28s ease;
  transform-origin: 50% 60%;
}

header a.brand:hover .lk-mark,
header a.brand:focus-visible .lk-mark,
header.site a.brand:hover .lk-mark,
header.site a.brand:focus-visible .lk-mark {
  transform: translateY(-2px) rotate(-4deg) scale(1.06);
  filter: drop-shadow(0 4px 10px rgba(242, 98, 7, .34));
}

header a.brand:active .lk-mark,
header.site a.brand:active .lk-mark {
  transform: translateY(0) rotate(0) scale(.94);
  filter: none;
  transition-duration: .09s;
}

@media (prefers-reduced-motion: reduce) {
  header a.brand .lk-mark,
  header.site a.brand .lk-mark {
    transition: filter .2s ease;
  }
  header a.brand:hover .lk-mark,
  header a.brand:focus-visible .lk-mark,
  header a.brand:active .lk-mark,
  header.site a.brand:hover .lk-mark,
  header.site a.brand:focus-visible .lk-mark,
  header.site a.brand:active .lk-mark {
    transform: none;
    filter: drop-shadow(0 0 8px rgba(242, 98, 7, .45));
  }
}