/*
 * ui.logo.css - the animated Ravenbreath header mark on the Citadel.
 * ---------------------------------------------------------------------------
 * Ported 2026-09-25 from the Artists' Nook (same file) to sit in
 * page-header.php LEFT of the title block, which stays centred (owner:
 * "keep The Citadel there, put the animated logo in the left"). 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/page-header.php, so it rides every Citadel page.
 */

.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; }
}

/* The Citadel keeps its title block (h1 + subtitle) top-centre: it takes the
   room between the mark and the identity block and centres in it. Three
   classes deep on purpose - ui.profile-menu.css sets the same block with two
   and loads after this file. */
/* True page centre, not the centre of what the 756px mark leaves over: the
   title floats over the header at 50%. On a wide screen that is clear of the
   wordmark (which ends ~444px in); on a narrower one it sits over the mark's
   transparent flying room, above the canvas, and the raven passes behind it. */
.site-header .site-header-inner { position: relative; }
.site-header .site-header-inner .site-header-title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    flex: none; z-index: 1; align-items: center; text-align: center;
}
.site-header .site-header-inner .site-header-title h1,
.site-header .site-header-inner .site-header-title h2 { text-align: center; }
/* Phone: the Nook's width-driven mark starves next to a centred title, so here
   the mark keeps a fixed height and the title steps aside - the mark IS the brand. */
@media (max-width: 600px) {
    .site-header .site-header-inner .site-logo { flex: 0 0 auto; }
    .site-header .site-header-inner .site-logo-mark { width: auto; height: 44px; }
    .site-header .site-header-inner .site-header-title { display: none; }
}