/* ==========================================================================
   logo3d.css — the chrome around src/shared/logo3d.js
   --------------------------------------------------------------------------
   The module builds one anchor with one canvas inside it. This file gives that
   anchor a square, and gives the square a focus ring. It does not paint: every
   pixel inside the canvas is a dot the module drew, in `--ink`, `--graphite`
   and `--brand`, so the mark has no ground of its own and the paper shows
   through it in both themes.

   THE SQUARE IS A VARIABLE, NOT A BREAKPOINT. A page that mounts the mark sets
   `--logo3d-size` on the wrapper and, if it wants a different size on a phone,
   sets it again inside its own media query. The module reads the resulting box
   off the layout, so the size is decided in one place — here — and never in
   two that have to agree.

   NO TRANSITION LIVES IN THIS FILE. The mark's only motion is the canvas, and
   the canvas answers `prefers-reduced-motion` in the module by painting one
   static frame and never asking for an animation frame. A CSS transition here
   would be a second, unrelated motion on the same object.

   Requires: src/shared/tokens.css (and tokens-dark.css) for `--brand`.
   ========================================================================== */

/* The custom-element form is a plain block; the anchor inside it is the mark. */
cognia-logo-3d{ display:block; }

/* -- the mark --------------------------------------------------------------
   220 px by default, which is the introduction's figure; a wrapper overrides
   it with `--logo3d-size`. `display:block` rather than inline-block so the
   square's left edge is the column's left edge with no baseline gap under it. */
.logo3d{
  display:block;
  width:var(--logo3d-size, 220px);
  height:var(--logo3d-size, 220px);
  border-radius:14px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* The canvas is sized in CSS px and backed at device px by the module. It is
   `aria-hidden` at the source: the accessible name is the anchor's. */
.logo3d-canvas{
  display:block;
  width:100%; height:100%;
}

/* The link is the control, so the ring belongs to the link — the site's own
   ring, restated here so the module carries its own focus affordance on a page
   that has not loaded shell.css. */
.logo3d:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

/* -- the honest failure ----------------------------------------------------
   No 2D context, or an image that will not decode: the flat brand PNG stands
   in, inside the same link, at the same square. */
.logo3d-fallback{
  display:block;
  width:100%; height:100%;
  object-fit:contain;
}