/*
 * ui.logo.css - the animated Ravenbreath header mark on the Artists' Nook.
 * ---------------------------------------------------------------------------
 * Ported 2026-09-25 from www.Ravenbreath.com (public/assets/css/page.css, the
 * .site-logo block) to sit in artist-header.php where the h1/h2 title stack
 * was. The renderer (assets/js/ui.logo.js) and the layers (/assets/logo/) are
 * byte-identical to www's - only the sizes below are this header's.
 *
 * The mark is a crop of the 2048x682 raven-and-wordmark loop, 3100x492 of it
 * (the canvas runs well past the lettering to give the raven flying room; that
 * right-hand third is transparent), so the box keeps that ratio and CSS only
 * sets the HEIGHT. The poster <img> is the same crop as a still, shown until
 * every layer has loaded (and forever if JS is off or a layer fails); the
 * canvas then cross-fades over it. ui.logo.js sizes the canvas from the box's
 * rect with separate x/y scales, so the box must never be forced off-ratio -
 * no min/max-height on .site-logo-mark, ever.
 *
 * Loaded by php/partials/blocks/artist-header.php, so it rides every Nook page
 * and never citadel.
 */

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--net-text-primary);
    flex-shrink: 0;
    min-width: 0;
}
.site-logo:hover, .site-logo:focus { color: var(--net-text-primary); text-decoration: none; }

/* Same size as www and chat: 120px on a desktop screen (owner, 2026-09-25:
   "the one on Artist nook looks small again. lets size it the same as the
   others"). Fluid below ~1260px so the mark and the profile menu share the
   row, floor 72px. The 8px bleed on each side hands 16px back to the header
   padding, so the header is 128px on desktop (was 80px with the title stack). */
.site-logo { --logo-mark-height: clamp(72px, calc((100vw - 500px) / 6.3), 120px); --logo-mark-bleed: 8px; }
.site-logo-mark {
    position: relative;
    display: block;
    height: var(--logo-mark-height);
    aspect-ratio: 3100 / 492;
    flex-shrink: 0;
    /* The smoke at the top and the perch at the bottom of the crop are soft
       edges, so the mark can borrow a little of the header's padding on each
       side instead of pushing the whole bar taller. */
    margin: calc(-1 * var(--logo-mark-bleed)) 0;
}
.site-logo-poster, .site-logo-anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity 0.4s ease;
}
.site-logo-anim { opacity: 0; }
.site-logo.is-animated .site-logo-anim   { opacity: 1; }
.site-logo.is-animated .site-logo-poster { opacity: 0; }

/* The Nook's name beside the mark, the way www captions a section ("The
   People"). The wordmark already says Ravenbreath, so this is a caption, not
   the title - ARTIST_SITE_TITLE, one home, may be renamed. */
.site-logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--net-text-secondary);
    font-variant: small-caps;
    letter-spacing: 0.08em;
    white-space: nowrap;
    padding-top: 0.35em;
    align-self: flex-start;
}

/* ===========================================================================
   Narrower screens. Breakpoints follow ui.responsive.css / ui.artist-
   responsive.css (768 / 480), with www's 900 step above them.
   =========================================================================== */

/* 72px sits inside the 80px the header already was (56px of layout). */
@media (max-width: 900px) {
    .site-logo { --logo-mark-height: 72px; }
}

/* The hamburger appears and header padding drops to 8px (ui.responsive.css);
   www's own step for this width. 64px - 16px bleed = 48px of layout, a hair
   over the 44px profile button, so the header is 64px. */
@media (max-width: 768px) {
    .site-logo { --logo-mark-height: 64px; }
    .site-logo-text { font-size: 0.95rem; }
}

/* Below 600px a fixed height no longer fits beside the hamburger and the
   profile menu (the mark is 6.3x as wide as it is tall), so the mark becomes
   WIDTH-driven: the link takes whatever the row has left (flex-basis 0 so its
   own content never sets the row) and the aspect ratio picks the height. The
   caption goes - the wordmark is the brand and the name is one tap away on
   the profile menu's My Profile. */
@media (max-width: 600px) {
    .site-logo { flex: 1 1 0; }
    .site-logo-mark { width: 100%; height: auto; }
    .site-logo-text { display: none; }
}