/* ============================================================================
Grosso University v2 - icon animation layer
----------------------------------------------------------------------------
ONE stylesheet for the whole 30-icon set. Pairs with src/runtime/icons.js.
THE INVARIANT THIS FILE IS BUILT AROUND, and the reason it looks the way it
does: an icon is ``, and
the referenced lives in a SHADOW TREE. No selector in this file can
reach the paths inside it - `.gu-icon path` matches nothing. The ONLY channel
into that tree is CSS INHERITANCE, and in SVG the inherited properties that
matter are `stroke`, `fill`, `stroke-width`, `stroke-dasharray` and
`stroke-dashoffset`.
So: whole-element `transform`/`opacity` for movement, INHERITED
`stroke-dashoffset` for the draw-on. There is no third option short of
inlining 30 copies of every glyph on every page, which is what the sprite
exists to avoid.
THREE ANIMATIONS, all of them decoration:
1. hover/focus - :hover AND :focus-visible on the icon or its control
2. in-view - CSS view() timeline where supported, WAAPI + IO otherwise
3. state/active - a loop on [data-state="active"], for live things
THE HARD RULES, enforced at the bottom of this file:
- prefers-reduced-motion: reduce turns EVERY one of them off, and pins the
icon at its final state. Not slower. Off.
- Only transform, opacity and stroke-* are animated, so nothing here can
move a neighbor. No width, height, margin, or inset is touched.
- The icon is complete before any animation runs and stays complete if none
ever does. With CSS off it is a plain SVG; with JS off it is a plain SVG.
============================================================================ */
/* ---------------------------------------------------------------------------
1. The element
---------------------------------------------------------------------------
Sized by --gu-icon-size so a caller sets ONE value and never touches width or
height separately - two properties that can disagree are two properties that
will. Default 1em ties the icon to the text it sits beside.
The declarations below ARE the final state. Every animation in this file
starts somewhere else and ends here, so an interrupted, blocked, cancelled or
never-started animation leaves a correct icon. */
.gu-icon {
--gu-icon-size: 1em;
--gu-icon-dash: 120; /* see the note on gu-draw before changing this */
display: inline-block;
inline-size: var(--gu-icon-size);
block-size: var(--gu-icon-size);
vertical-align: -0.125em;
flex: none;
color: inherit; /* the symbol's stroke="currentColor" resolves here */
opacity: 1;
transform: none;
stroke-dasharray: none;
stroke-dashoffset: 0;
transform-origin: 50% 50%;
transition: transform var(--gu-dur-base, 240ms) var(--gu-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
/* A control that wraps an icon opts its icon into hover/focus by carrying this
class - or by being a real link/button, which is the common case. */
.gu-ico-host { display: inline-flex; align-items: center; gap: 0.5em; }
/* The armed (pre-reveal) state for the WAAPI path in section 4. src/runtime/icons.js
adds this class; the declaration lives here so the reduced-motion block at the
bottom can neutralize it in one place.
IT IS DECLARED HERE, ABOVE THE HOVER RULES, DELIBERATELY. Several hover
variants are single-class selectors of the same specificity as this one, so
whichever came LAST in the file would win - and with this rule last, hovering
an armed icon painted the armed transform instead of the hover transform. It
only shows up on an icon that is armed and interactive at the same time
(keyboard focus reaching a below-fold link before its reveal has run), which
is exactly the combination that is easy to never test. Source order is the
fix; raising specificity on seven hover rules to beat one pre-state is not. */
.gu-icon.is-armed {
opacity: 0;
transform: translateY(5px) scale(0.92);
stroke-dasharray: var(--gu-icon-dash);
stroke-dashoffset: var(--gu-icon-dash);
}
/* ---------------------------------------------------------------------------
2. Keyframes
---------------------------------------------------------------------------
Every one of these ends on the base state above, and NONE of them uses
`forwards`. A finished animation therefore hands the element back to the
cascade rather than pinning a computed value on it - which is what lets the
reduced-motion block below win by simply existing. */
/* The draw-on. One dash pattern for every subpath, because `