/* ═══════════════════════════════════════════════════════════════════════
   header.css — the Nino logo.

   Owned by component/header.cpt.php, which links it through the
   HEADER_CSS_LOADED guard. It lives in component/css/ rather than /style/
   because `component/` is a whole-dir symlink on the tools side, so this file
   is reachable on grxnd3r.com and tools.grxnd3r.com alike with nothing to keep
   in sync — the invariant component/check-component-css.php enforces.

   The rest of the bar's chrome (.site-nav, the glass material, .nav-section,
   .nav-social, the compact morph) stays in style/main.css, which is itself a
   symlink shared by both sites and therefore already common.

   WHAT THIS REPLACED, AND WHY
   ---------------------------
   The identity used to be the word "Nino" set in --font-display with a pink
   gradient swept through it by a 7s `navShine` keyframe. Three things were
   wrong with it:

     * --font-display names Satoshi, and *no page on either site loads Satoshi*
       — head-assets.cpt.php ships Erode + Inter + JetBrains Mono only. The
       wordmark silently rendered in whatever system sans the OS supplied, so
       it looked different on every machine.
     * The sweep spends most of its cycle mid-gradient, which is why a random
       screenshot catches a pink "N" and a white "ino" — it reads as a broken
       render, not as a glint.
     * `-webkit-text-fill-color: transparent` beats `color`, so the four
       page-scoped `color: var(--ed-ink) !important` overrides in
       portfolio.css / photography.css / 404.css / tools' editorial.css never
       actually took. Four copies of a rule, none of them doing anything.

   The replacement is drawn, not typeset: the word "Nino" in Erode outlines,
   knocked out of a squircle plate. Pure `currentColor` geometry, so the
   editorial pages tint it by setting `color` on .site-nav and need no override
   at all, and nothing depends on a webfont having loaded.
   ═══════════════════════════════════════════════════════════════════════ */

.nav-logo {
    /* Everything below is derived from this one number, so the responsive
       steps and the compact morph only have to change --logo-size. */
    --logo-size: 30px;

    /* 70 ÷ 32 — the art's viewBox. The plate is square at rest and this wide
       once the word is out. */
    --logo-open: 2.1875;

    display: inline-flex;
    align-items: center;
    /* Air between the identity and the section icons. Without it the plate
       sits one .nav-breadcrumb gap from "Home" and reads as a sixth nav item —
       most obviously on a phone, where the labels are gone and the plate is
       the same size as the icons beside it. */
    margin-right: 10px;
    text-decoration: none;
    /* `inherit`, not --text-primary. The editorial pages recolour the bar with
       `.page-*--editorial .site-nav { color: var(--ed-ink) }` but leave
       --text-primary at its near-white :root value, so binding to the token
       would paint a white logo onto cream paper. Inheriting is also what makes
       the four deleted page overrides unnecessary. */
    color: inherit;
    border-radius: var(--radius-md);
}

/* The window. It is the only thing that resizes: the art inside keeps a fixed
   width throughout, so the letterforms never scale, stretch or reflow — the
   plate simply uncovers more of a drawing that was always there.

   Rounding lives here rather than on the <rect> so the right-hand corners stay
   round at every width. Animating the rect's own `rx`/`width` would mean
   leaning on SVG2 geometry-as-CSS, which is younger than this needs to be. */
.nav-logo-plate {
    display: block;
    width: var(--logo-size);
    height: var(--logo-size);
    flex: none;
    overflow: hidden;
    border-radius: calc(var(--logo-size) * 0.28);
    /* Deliberately NOT --ease-smooth. That curve is cubic-bezier(.22,1,.36,1)
       and lands ~85% of its travel in the first fifth of its duration, which is
       right for the bar's morph — a shape settling into place — but reads as a
       snap on a reveal this short: the plate is open before the eye registers
       that it moved. --ease-default is the symmetric one, so the word slides
       out at a legible, even pace.

       Out is quicker than in: the reveal is the gesture worth watching, the
       retreat is just tidying up after the pointer has already left. */
    transition: width 240ms var(--ease-default);
}

.nav-logo:hover .nav-logo-plate,
.nav-logo:focus-visible .nav-logo-plate {
    width: calc(var(--logo-size) * var(--logo-open));
    transition: width 380ms var(--ease-default);
}

/* "ino" cannot just wait in place for the edge to pass it. Erode sets the i
   only 26 font units after the N — a fraction of the tile's padding — so with
   the word drawn as one static block the closed plate cuts through the i and
   the mark reads "Ni". Parking the tail 7 user units right of home clears the
   closed edge with about a pixel to spare.

   It walks 7 units back while the edge travels 38, so the counter-motion is
   roughly a fifth of the opening. It also finishes ~80ms early on purpose: the
   letters are home before the opening edge sweeps across the "o", so the last
   and most visible part of the reveal is a plain wipe over type that has
   already stopped moving. Run the two at the same duration and the edge
   catches the tail mid-stride, which is what makes the o look sheared.

   Lengths on an SVG child are user units, which is why this is `7px` and not a
   fraction of --logo-size: the art's coordinate system is fixed no matter what
   the plate is scaled to. */
.nav-logo-tail {
    transform: translateX(7px);
    transition: transform 200ms var(--ease-default);
}

.nav-logo:hover .nav-logo-tail,
.nav-logo:focus-visible .nav-logo-tail {
    transform: none;
    transition: transform 300ms var(--ease-default);
}

.nav-logo-art {
    display: block;
    width: calc(var(--logo-size) * var(--logo-open));
    height: var(--logo-size);
    flex: none;
    /* The art overhangs the plate by ~36px at rest, straight across "Home".
       The <a> itself is only as wide as the plate, so the anchor never covers
       the nav — but the overhanging SVG box would, and it must not eat those
       clicks. */
    pointer-events: none;
}

.nav-logo:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

/* Compact bar and phones keep the plate at a smaller size rather than folding
   it away, which is the point of having a mark: the pill and the phone bar
   both keep an anchor on their left. The old `.nav-name` collapsed to nothing
   in both states and left them without one. */
.site-nav--compact .nav-logo {
    --logo-size: 26px;
}

@media (max-width: 768px) {
    .nav-logo {
        --logo-size: 26px;
        margin-right: 8px;
    }
}

/* Reduced motion keeps the reveal — it is information, not decoration — and
   drops only the travel. */
@media (prefers-reduced-motion: reduce) {
    .nav-logo-plate,
    .nav-logo:hover .nav-logo-plate,
    .nav-logo:focus-visible .nav-logo-plate,
    .nav-logo-tail,
    .nav-logo:hover .nav-logo-tail,
    .nav-logo:focus-visible .nav-logo-tail {
        transition: none;
    }
}