@import '_content/DetectionsModule.Presentation/DetectionsModule.Presentation.mbueizc6dc.bundle.scp.css';
@import '_content/FiltersModule/FiltersModule.wgnzryr2zb.bundle.scp.css';
@import '_content/SearchesModule.Presentation/SearchesModule.Presentation.8c1lh8gjfi.bundle.scp.css';
@import '_content/SharedKernelModule.Presentation/SharedKernelModule.Presentation.1z0y3dqmls.bundle.scp.css';
@import '_content/VideoPlayerModule/VideoPlayerModule.0lejimqan9.bundle.scp.css';

/* /Shared/BrandLockup.razor.rz.scp.css */
/* Scoped to this component: these rules style its own markup and travel with it. */

/* The asset carries width="590" height="524" so it renders at its natural size as an <img>. Inlined,
   the wrapper's width is the size that matters, so the svg is told to fill it and take its height
   from the viewBox. ::deep because the svg arrives as a MarkupString and carries no scope attribute. */
[b-togh3hkszf] svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Page-load intro: outline, then fill, then wordmark ------------------

   The mark arrives as the coworker's fill-off state — every polygon's 0.75 stroke and nothing
   else, the eyes already lit — then the fill washes in and the wordmark follows it.

   fill-opacity, not fill: turning fill off and on cannot be interpolated (`none` is not a
   colour), and the group's fill is `currentColor` against a per-polygon `color`, so there is
   no single colour to animate between anyway. fill-opacity leaves every stroke alone, which
   is the whole look.

   Nothing here animates a transform. A CSS transform on an SVG element REPLACES its transform
   attribute, and the wordmark is positioned by one (translate(60,230)) — a rise-and-fade would
   fling it to the origin for the length of the animation.

   WHY THE ANIMATION IS ON THE WRAPPER AND NOT ON THE SVG'S OWN ELEMENTS

   The svg is a MarkupString, so any change to it (ApplyTheme rewrites two attributes on the
   root) replaces the whole subtree. Animations declared on elements inside it would restart
   from zero every time that happened — and it happens during exactly this window: MainLayout
   renders once with the default dark theme and again a DB round-trip later with the user's
   real one, so a light-mode user would watch the fill wash in, snap back to bare outline, and
   wash in a second time.

   So the animation runs on the wrapper div, which Blazor keeps across those re-renders, and
   drives two registered custom properties. They inherit into whatever svg is currently mounted:
   a swap mid-flight inherits the value the animation is passing through and the reveal carries
   on unbroken. It also settles the replay question — the properties are left at their end
   values (fill mode `both`) on an element that outlives every navigation and every later theme
   toggle, so a fresh document is the only thing that plays this again.

   The @property registrations are what make them interpolate; without them a custom property
   animates discretely, and the reveal degrades to a single jump at the midpoint rather than
   breaking. ---- */

@property --stx-lockup-fill {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

@property --stx-lockup-wordmark {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
}

@keyframes stx-lockup-fill-in-b-togh3hkszf {
    from { --stx-lockup-fill: 0; }
    to   { --stx-lockup-fill: 1; }
}

@keyframes stx-lockup-wordmark-in-b-togh3hkszf {
    from { --stx-lockup-wordmark: 0; }
    to   { --stx-lockup-wordmark: 1; }
}

.stx-brand-lockup[b-togh3hkszf] {
    animation:
        stx-lockup-fill-in-b-togh3hkszf 700ms ease-out 250ms both,
        stx-lockup-wordmark-in-b-togh3hkszf 600ms ease-out 900ms both;
}

/* The fallbacks are what a browser without @property support falls back TO, and what holds
   the mark visible if the animation never runs at all. */
[b-togh3hkszf] #head {
    fill-opacity: var(--stx-lockup-fill, 1);
}

/* The eyes are the one part that is lit from the first frame — they are the fill-off state's
   only colour, and the reference this was built from. They sit inside #head, so they need the
   inherited fade-in cancelled: a direct match beats an inherited value. */
[b-togh3hkszf] #eye {
    fill-opacity: 1;
}

/* Light mode only (dark hides it with fill: none), but it belongs to the fill rather than the
   outline — left out, light mode would open on a blurred blob with no wolf inside it. */
[b-togh3hkszf] #silhouette {
    fill-opacity: var(--stx-lockup-fill, 1);
}

/* opacity, not fill-opacity: the wordmark is a fill, a casing stroke and a drop shadow, and all
   three have to leave together. */
[b-togh3hkszf] #stravix {
    opacity: var(--stx-lockup-wordmark, 1);
}

@media (prefers-reduced-motion: reduce) {
    .stx-brand-lockup[b-togh3hkszf] {
        animation: none;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
/* Scoped to this component: these rules style its own markup and travel with it.
   The build bundles every referenced library's scoped CSS into Web.styles.css. */

/* ---- Logo well: the drawer's own surface, with the hairline that separates it from the nav.
   No background of its own — the mode-matched lockup carries the contrast. ---- */
[b-s29s4s63jm] .stx-logo-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 0;
    box-shadow: inset 0 -1px 0 var(--mud-palette-lines-default);
}