/* =====================================================================
 *  brand.css  ::  the Estate.ID animated lockup
 * ---------------------------------------------------------------------
 *  Three independent pieces so each can move on its own timing:
 *
 *      .eid-mark      the emblem      raster, one file, both themes
 *      .eid-word      "Estate.ID"     raster, one file per theme
 *      .eid-tag       the tagline     LIVE TEXT, not an image
 *
 *  WHY THE TAGLINE IS TEXT
 *  In the source artwork it is nine pixels tall. Scaled to anything a
 *  person can actually read it turns to mush, so it is set in type
 *  instead: crisp at every size, selectable, and translatable.
 *
 *  WHY THE MARK IS ONE FILE FOR BOTH THEMES
 *  The emblem is gold and silver, which sits correctly on light and on
 *  dark. Only the wordmark changes ink, so only the wordmark ships twice.
 *
 *  SIZE
 *  Everything is driven by --eid-size (the emblem's height). The
 *  wordmark is set from it, so one variable scales the whole lockup and
 *  the proportions never drift.
 * ================================================================== */

.eid {
  --eid-size: 44px;                 /* emblem height */
  --eid-gap: 0.62em;
  --eid-word-h: calc(var(--eid-size) * 0.50);
  --eid-ink: #0f172a;
  --eid-rule: rgba(15, 23, 42, .28);

  display: inline-flex;
  align-items: center;
  gap: var(--eid-gap);
  text-decoration: none;
  line-height: 1;
  /* The lockup is one thing to a screen reader, not three images. */
  color: var(--eid-ink);
}

.eid-mark {
  height: var(--eid-size);
  width: auto;
  flex: none;
  display: block;
  /* Native art is 194x213; shown far below that, so it stays sharp
     on a 2x display without shipping a second file. */
}

.eid-stack { display: flex; flex-direction: column; gap: .34em; min-width: 0; }

.eid-word {
  height: var(--eid-word-h);
  width: auto;
  display: block;
}

/* The light-ink wordmark is the default; the dark-ink one is swapped in
   by the theme rules at the bottom. Both are in the DOM so the switch
   costs no request. */
.eid-word--dark { display: none; }

/* ---- tagline ---------------------------------------------------- */
.eid-tag {
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* NOT the ratio from the artwork. There the tagline is nine pixels
     tall - about 4% of the emblem - which is unreadable at any size a
     header allows. It gets a floor of 11px and grows from there, so it
     is always legible even when that makes it proportionally larger
     than the original. Readable beats faithful for a line of copy. */
  font-size: max(11px, calc(var(--eid-size) * 0.155));
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--eid-ink);
  opacity: .72;
  white-space: nowrap;
}
.eid-tag::before,
.eid-tag::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--eid-rule);
  min-width: .8em;
}

/* Below this the tagline cannot be read, so it is removed rather than
   shown as decoration. */
.eid--compact .eid-tag { display: none; }

/* ---- stacked lockup ----------------------------------------------
 * The source artwork is drawn this way: emblem over wordmark over
 * tagline, all centred. Wherever there is vertical room - a sign-in
 * card, an empty state, a footer - this is the composition to use;
 * the horizontal row above is the compression for headers.
 * ---------------------------------------------------------------- */
.eid--stacked {
  flex-direction: column;
  gap: calc(var(--eid-size) * 0.10);
  text-align: center;
}
.eid--stacked .eid-stack { align-items: center; }
/* In the original the wordmark is about twice the emblem's width, so
   it is set from the emblem rather than from an arbitrary height. */
.eid--stacked .eid-word { height: auto; width: calc(var(--eid-size) * 2.0); }
.eid--stacked .eid-tag  { justify-content: center; }

/* ---- narrow screens -----------------------------------------------
 * The tagline is one unbreakable line, so on a phone it is the piece
 * that decides the lockup's width. It steps down before it can touch
 * the viewport edges, and below 26rem it is dropped entirely rather
 * than shrunk past the point of being worth reading.
 * ---------------------------------------------------------------- */
@media (max-width: 34rem) {
  .eid--stacked { --eid-size: min(var(--eid-size), 64px); }
  .eid--stacked .eid-tag { font-size: 10px; letter-spacing: .05em; }
  .eid--stacked .eid-tag::before,
  .eid--stacked .eid-tag::after { min-width: .4em; }
}
@media (max-width: 26rem) {
  .eid--stacked .eid-tag { display: none; }
}

/* =====================================================================
 *  THE REVEAL
 *  Mirrors the source animation - emblem settles, wordmark rises, rules
 *  draw outward - but as transforms and opacity only, so it composites
 *  on the GPU and never reflows the header around it.
 * ================================================================== */
@keyframes eid-mark-in {
  from { opacity: 0; transform: translateY(6%) scale(.86) rotate(-6deg); }
  60%  { opacity: 1; transform: translateY(0)   scale(1.04) rotate(1.5deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes eid-word-in {
  from { opacity: 0; transform: translateY(28%); }
  to   { opacity: 1; transform: none; }
}
@keyframes eid-tag-in {
  from { opacity: 0; letter-spacing: .34em; }
  to   { opacity: .78; letter-spacing: .13em; }
}
/* A single specular pass over the emblem, the way light crosses metal. */
@keyframes eid-gleam {
  from { transform: translateX(-130%) skewX(-18deg); opacity: 0; }
  35%  { opacity: .55; }
  to   { transform: translateX(230%) skewX(-18deg); opacity: 0; }
}

.eid--animate .eid-mark { animation: eid-mark-in .82s cubic-bezier(.22,.9,.28,1.06) both; }
.eid--stacked.eid--animate .eid-word { animation-delay: .30s; }
.eid--stacked.eid--animate .eid-tag  { animation-delay: .50s; }
.eid--animate .eid-word { animation: eid-word-in .58s cubic-bezier(.22,.9,.28,1) .26s both; }
.eid--animate .eid-tag  { animation: eid-tag-in  .70s ease-out .44s both; }

/* The gleam rides a wrapper so it cannot inherit the mark's own
   transform and end up sliding diagonally. */
.eid-shine {
  position: relative;
  display: block;
  flex: none;
  overflow: hidden;
  border-radius: 14%;
}
.eid-shine::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent);
  opacity: 0;
}
.eid--animate .eid-shine::after { animation: eid-gleam 1.1s ease-in-out .58s 1 both; }

/* Hover replay, for the header lockup only. Deliberately subtle: a logo
   that leaps about every time the pointer crosses it reads as a toy. */
.eid--hover:hover .eid-shine::after { animation: eid-gleam 1.05s ease-in-out 1 both; }

/* =====================================================================
 *  INK
 * ---------------------------------------------------------------------
 *  This deliberately does NOT follow prefers-color-scheme.
 *
 *  Every page in this application has a fixed light palette - there is
 *  no dark theme anywhere in lander.css or the panels. Reacting to the
 *  visitor's OS setting therefore swapped in the cream wordmark on a
 *  page that was still white, which is invisible. The lockup follows
 *  the SURFACE it is placed on, and the surface is known at the point
 *  of use, so it is declared there.
 *
 *  Put .eid--on-dark on the lockup wherever the panel behind it is
 *  dark: a navy hero, a staff rail, a dark footer. If the app ever
 *  grows a real dark theme, that rule is the single place to hook it up.
 * ================================================================== */
.eid--on-dark { --eid-ink: #e8edf5; --eid-rule: rgba(232,237,245,.32); }
.eid--on-dark .eid-word--light { display: none; }
.eid--on-dark .eid-word--dark  { display: block; }

/* =====================================================================
 *  REDUCED MOTION
 *  Not "a shorter animation" - none. The lockup must still ARRIVE, so
 *  every animated property is reset rather than left at its from-state.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .eid--animate .eid-mark,
  .eid--animate .eid-word,
  .eid--animate .eid-tag,
  .eid--animate .eid-shine::after,
  .eid--hover:hover .eid-shine::after {
    animation: none !important;
  }
  .eid .eid-tag { opacity: .78; letter-spacing: .13em; }
  .eid .eid-mark, .eid .eid-word { opacity: 1; transform: none; }
}