/* ==========================================================================
   Spectrum IT Hub — icon interaction layer
   --------------------------------------------------------------------------
   Hover and scroll behaviour for the inline SVG icons across the site.

   WHY CSS AND NOT `style-hover`
   The templating system's `style-hover` attribute compiles to a real :hover
   rule, but only for the element it sits on — it cannot reach children
   (HANDOFF.md §4). Icons almost always need to react to their *card* or *link*
   being hovered, not themselves, so those effects have to live here.

   NO JS PARTNER ANY MORE
   This was one half of a pair with icon-fx.js, which staged icons for the
   scroll-in animations. That mechanism is gone (see the note further down)
   and the script is retired to `_bin/`. Everything here is pure CSS, so it
   cannot leave an icon in a broken state: icons paint from first paint and
   only react to hover.
   ========================================================================== */


/* --- Base ---------------------------------------------------------------
   `!important` on the transition only: some icons carry an inline
   `transition: color` that would otherwise win and block the transform. */
svg:not([width="0"]) {
  transition:
    transform 340ms cubic-bezier(.16, 1, .3, 1),
    color 240ms ease,
    opacity 240ms ease !important;
  transform-box: fill-box;
  transform-origin: center;
}

/* Keep the sprite sheet and the hero globe out of all of this. */
svg[width="0"], gold-globe svg { transition: none !important; }


/* --- Hover --------------------------------------------------------------
   The icon reacts to its interactive ancestor being hovered, not itself. */
a:hover      svg:not([width="0"]),
button:hover svg:not([width="0"]),
li:hover     > svg,
[style*="cursor: pointer"]:hover svg:not([width="0"]) {
  transform: translateY(-2px) scale(1.12);
}

/* Bordered cards are the site's dominant container; their icons lift too. */
[style*="border: 1px solid"]:hover > svg,
[style*="border: 1px solid"]:hover > * > svg {
  transform: translateY(-2px) scale(1.1);
}

/* The hamburger's bars are spans, not SVG — nudge them for parity. */
.mnav-toggle span { transition: transform 220ms cubic-bezier(.16,1,.3,1); }
.mnav-toggle:hover span:first-child { transform: translateX(2px); }
.mnav-toggle:hover span:last-child  { transform: translateX(-2px); }


/* --- Numbered rows (the 9 pages that have no icons) ----------------------
   The seven service pages plus Careers, Contact and Register use numbered
   "01 / 02 / ..." rows instead of icons — a deliberate typographic choice, so
   no iconography is invented here. They still get the same motion language:
   the number leads, the row follows. */
[style*="gap: 18px"][style*="align-items: baseline"] {
  transition: background 240ms ease, padding-left 260ms cubic-bezier(.16,1,.3,1);
}

[style*="gap: 18px"][style*="align-items: baseline"] > span:first-child {
  transition: transform 260ms cubic-bezier(.16,1,.3,1), opacity 220ms ease;
}

/* !important because these rows carry an inline `padding: 18px 0`, which
   would otherwise win. Same constraint as responsive.css — see its header. */
[style*="gap: 18px"][style*="align-items: baseline"]:hover {
  padding-left: 8px !important;
}

[style*="gap: 18px"][style*="align-items: baseline"]:hover > span:first-child {
  transform: translateX(3px) scale(1.08);
}

/* Plain bullet lists get a gentler version of the same idea. */
li { transition: transform 220ms cubic-bezier(.16,1,.3,1); }
li:hover { transform: translateX(3px); }


/* --- Scroll-in animations: REMOVED --------------------------------------
   There used to be two here: stroked icons drew themselves on, and <use>
   icons popped in. Both worked by hiding the icon first and revealing it when
   icon-fx.js marked it, and BOTH HAVE NOW FAILED IN PRODUCTION FOUR TIMES —
   About's Vision rings, the footer flip tiles, About's partner chips and
   Contact's three cards.

   The failure mode is what makes it unacceptable rather than merely buggy: a
   stroke held at dashoffset does not render un-animated, it renders as
   nothing — except the `stroke-linecap="round"` caps, which paint as small
   dots. On Contact those dots sat inside a 40x40 gold plate, so the card
   showed a bordered square containing two specks. Nothing appears in the
   console, so it can only be found by eye.

   The requirement now is that an icon is painted at first paint, always. No
   rule in this file may hide an icon, which is the only way to guarantee
   that — a reveal that has to fire correctly is a reveal that can fail to.
   `icon-fx.js` has been retired to `_bin/` along with it; the hover
   behaviour above is pure CSS and is unaffected.

   To bring the effect back, restore both files from `_bin/` and re-add the
   script tag to the pages. Do not do it without a first-paint-visible base
   state. */


/* --- Accessibility ------------------------------------------------------
   All of the above is decorative. Anyone who has asked for reduced motion
   gets the finished state immediately, with no transition at all. (icon-fx.js
   also checks this and marks icons as already-in, so this is belt and braces.) */
@media (prefers-reduced-motion: reduce) {
  svg:not([width="0"]) { transition: none !important; }

  a:hover svg, button:hover svg, li:hover > svg,
  [style*="cursor: pointer"]:hover svg,
  [style*="border: 1px solid"]:hover > svg,
  [style*="border: 1px solid"]:hover > * > svg {
    transform: none;
  }

  [style*="gap: 18px"][style*="align-items: baseline"],
  [style*="gap: 18px"][style*="align-items: baseline"] > span:first-child,
  li { transition: none !important; }

  [style*="gap: 18px"][style*="align-items: baseline"]:hover { padding-left: 0 !important; }
  [style*="gap: 18px"][style*="align-items: baseline"]:hover > span:first-child,
  li:hover { transform: none; }

}