/* =============================================================================
   THE BRAND — tokens and the logo lockup.
   -----------------------------------------------------------------------------
   Loaded by every surface, before that surface's own stylesheet:

       <link rel="stylesheet" href="/shared/brand/brand.css">

   Two things live here and nowhere else:

     1. the palette, as custom properties
     2. the logo lockup — tile, wordmark, suffix

   Everything else is a surface's own business. This file must never grow into
   a component library; the four surfaces are deliberately different products
   and only their identity is shared.

   PROVENANCE
   ----------
   The palette and the logo are the approved design, carried over rather than
   redrawn: the same soft-cornered tile with one flat corner, the same warm
   gradient, the same blue letter in DM Sans — and the same three-part
   animation, restored at its original keyframes and timings.

   I had dropped that animation and called it decoration. It is not. The
   aeroplane, the blue point it becomes, and the tile that colours in behind
   them are one motion and they are the brand. They are back, byte-for-byte,
   verified against the approved implementation step by step.

   ONE COMPONENT, FIVE SURFACES
   The animation lives here and only here. Customer, Admin, Portal, API and any
   login all render the same markup through BRAND.logo(); none of them owns a
   copy of the motion. `.is-compact` is the static variant for dense
   operational chrome, and it shows the animation's FINAL state rather than a
   different mark.
   ========================================================================== */

:root {
  /* ---- the approved palette ------------------------------------------- */
  --brand-ink:    #003d82;   /* deep blue — headings, the wordmark          */
  --brand-ink-2:  #0072e5;   /* bright blue — the letter in the mark, links */
  --brand-sun:    #ffd23f;   /* yellow — accents, the primary action        */
  --brand-aqua:   #2ec4b6;   /* teal — confirmation, the search underline   */
  --brand-sand:   #f1d39b;   /* warm sand — section grounds                 */
  --brand-cream:  #fbfbf7;   /* page ground                                 */
  --brand-muted:  #667482;
  --brand-line:   #dce6e8;
  --brand-white:  #fff;

  /* The mark's gradient. Two stops, warm, top-left to bottom-right. */
  --brand-mark-from: #ffcf43;
  --brand-mark-to:   #ff8b38;

  --brand-shadow: 0 22px 60px rgba(0, 61, 130, .17);
  --brand-radius: 22px;

  /* Type. Alexandria carries Arabic and Latin at text sizes; DM Sans is used
     only for the wordmark and the mark, which are always Latin. */
  --brand-font: "Alexandria", "Segoe UI", Tahoma, Arial, sans-serif;
  --brand-font-display: "DM Sans", "Segoe UI", Arial, sans-serif;
}

/* Dark is a second skin over the same palette, never a second palette. The
   hues are unchanged; only the grounds and the ink invert, so the brand still
   reads as itself at night. */
:root[data-theme="dark"] {
  --brand-ink:   #e8f1ff;
  --brand-ink-2: #6cb8ff;
  --brand-cream: #0c111b;
  --brand-muted: #93a2b5;
  --brand-line:  #22304a;
  --brand-white: #131b29;
  --brand-shadow: 0 22px 60px rgba(0, 0, 0, .5);
}

/* -------------------------------------------------------------- the lockup */

/* THE LOCKUP — atomic, and therefore `direction: ltr` unconditionally.
   -----------------------------------------------------------------------------
   Left to inherit, an RTL page flips the flex order and the wordmark renders
   before the tile — the reversal in review. A logo is not a sentence. It has
   one arrangement, and that arrangement is: tile first, wordmark after it,
   in Arabic and in English alike.

   Pinning direction here also means nothing inside the lockup can mirror: the
   tile's flat corner, the aeroplane and the blue point all keep their places
   without needing to fight the page. */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: ltr;
  color: var(--brand-ink);
  text-decoration: none;
}

/* THE TILE — and why every value here is PHYSICAL, not logical.
   -----------------------------------------------------------------------------
   I had this wrong. Written in logical properties, `border-end-start-radius`
   resolves to the bottom-RIGHT corner on an RTL page, so the flat corner — the
   one detail that makes the shape recognisable — flipped to the wrong side in
   Arabic, and the aeroplane and the blue point flipped with it. That is the
   reversed logo.

   A logo is an atomic component. Its internal geometry is fixed and never
   mirrors, exactly as in the approved design: flat corner bottom-left, the
   aeroplane rising past the bottom-left edge, the blue point landing top-left.
   Only the LOCKUP — whether the tile sits before or after the wordmark —
   follows the page, which is what the approved Arabic composition does. */
.brand-mark {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  overflow: visible;                    /* the plane travels outside the tile */
  border-radius: 14px 14px 14px 5px;    /* physical, always this way round */
  background: linear-gradient(145deg, var(--brand-mark-from), var(--brand-mark-to));
  box-shadow: 0 9px 24px rgba(255, 139, 56, .3);
  color: #0072e5;               /* fixed: the tile is always the warm gradient,
                                   so the letter cannot follow the theme ink */
  font: 800 18px/1 var(--brand-font-display);
  animation: logoRevealAfterPlaneBlue 15s 1s linear infinite;
}

/* THE AEROPLANE.
   Rises from below the tile, climbing left-of-centre, and vanishes at the top
   at 5% — the instant the blue point appears in the same place. The plane
   becomes the point; that is the whole idea of the mark. Restored from the
   approved implementation at its original timings. */
.brand-mark::before {
  content: "✈";
  position: absolute;
  z-index: 6;
  right: auto;
  left: -4px;
  top: 38px;
  color: #0072e5;
  font-size: 14px;
  line-height: 1;
  filter: blur(4px);
  opacity: 0;
  transform: rotate(-38deg) scale(.65);
  animation: planeStraightUp 15s 1s linear infinite;
}

/* THE BLUE POINT. Where the aeroplane arrives, and what it leaves behind. */
.brand-mark::after {
  content: "";
  position: absolute;
  z-index: 7;
  display: block;
  width: 9px;
  height: 9px;
  right: auto;
  left: -4px;
  top: -4px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0072e5;
  box-shadow: 0 0 0 3px rgba(0, 114, 229, .15);
  animation: dotFromPlane 15s 1s linear infinite;
}

/* The three timelines, at the approved keyframes and the approved 15s/1s cycle.
   They are one motion split across three elements: the tile is colourless until
   the plane has flown (4.8%), the plane climbs and disappears (0–5%), the point
   pops where it vanished (5.1%), and everything holds until the cycle resets at
   98%. Changing any one percentage desynchronises the other two. */
@keyframes logoRevealAfterPlaneBlue {
  0%, 4.8%    { color: transparent; background: transparent; box-shadow: none; }
  5.2%        { color: #0072e5;
                background: linear-gradient(145deg, var(--brand-mark-from), var(--brand-mark-to));
                box-shadow: 0 0 22px rgba(255, 210, 63, .48); transform: scale(1.08); }
  6%, 98%     { color: #0072e5;
                background: linear-gradient(145deg, var(--brand-mark-from), var(--brand-mark-to));
                box-shadow: 0 9px 24px rgba(255, 139, 56, .3); transform: none; }
  98.1%, 100% { color: transparent; background: transparent; box-shadow: none; }
}

@keyframes planeStraightUp {
  0%         { left: -4px; top: 38px; opacity: 0;   filter: blur(4px); transform: rotate(-35deg) scale(.65); }
  1%         { left: -4px; top: 30px; opacity: .28; filter: blur(3px); transform: rotate(-35deg) scale(.72); }
  2%         { left: -4px; top: 20px; opacity: .55; filter: blur(2px); transform: rotate(-35deg) scale(.8); }
  3%         { left: -4px; top: 10px; opacity: .82; filter: blur(1px); transform: rotate(-35deg) scale(.88); }
  4%         { left: -4px; top: 0;    opacity: 1;   filter: none;      transform: rotate(-35deg) scale(.95); }
  5%         { left: -4px; top: -4px; opacity: 0;   filter: none;      transform: rotate(-35deg) scale(.35); }
  5.1%, 100% { left: -4px; top: -4px; opacity: 0; }
}

@keyframes dotFromPlane {
  0%, 4.7%    { opacity: 0; transform: scale(.3); }
  5.1%        { opacity: 1; transform: scale(1.5); box-shadow: 0 0 16px rgba(0, 114, 229, .72); }
  6%, 98%     { opacity: 1; transform: scale(1);   box-shadow: 0 0 0 3px rgba(0, 114, 229, .15); }
  98.1%, 100% { opacity: 0; transform: scale(.3); }
}

/* The wordmark is Latin and stays Latin, on an RTL page too. */
/* Proportions taken from the approved lockup, not chosen: .logo-text there is
   line-height 1 with an 18px/1.05 inline-block wordmark, which renders 22px
   tall beside the 34px tile. At 17px/1 on a 1.15 block the wordmark measured
   17px and sat visibly small against the same tile. */
.brand-word {
  display: block;
  direction: ltr;
  text-align: left;
  line-height: 1;
}

.brand-word strong {
  display: inline-block;
  font: 700 18px/1.05 var(--brand-font-display);
  letter-spacing: -.8px;
  color: var(--brand-ink);
}

/* The family suffix — Admin, Platform, API. Smaller and quieter than the name
   on purpose: these are members of one brand, not four brands. */
.brand-word small {
  display: block;
  margin-top: 3px;
  font-family: var(--brand-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--brand-muted);
}

/* COMPACT — the static variant.
   Same tile, same geometry, no flight. Used where the animation would pull the
   eye away from dense operational content: the console sidebar, the workspace
   topbar, the API landing head, the portal rail. The tile keeps its finished
   appearance, which is exactly the state the animation holds for 92% of its
   cycle, so the two variants are the same mark and not two marks. */
.brand-logo.is-compact .brand-mark {
  width: 28px;
  height: 28px;
  font-size: 15px;
  border-radius: 12px 12px 12px 4px;
  color: #0072e5;
  background: linear-gradient(145deg, var(--brand-mark-from), var(--brand-mark-to));
  box-shadow: 0 9px 24px rgba(255, 139, 56, .3);
  animation: none;
}
.brand-logo.is-compact .brand-mark::before { display: none; }
.brand-logo.is-compact .brand-mark::after {
  width: 8px; height: 8px; top: -3px; left: -3px;
  opacity: 1; transform: none; animation: none;
}
.brand-logo.is-compact .brand-word strong { font-size: 14px; }
.brand-logo.is-compact .brand-word small { font-size: 9px; margin-top: 2px; }

/* Large variant, for a login or a marketing surface where the mark leads. */
.brand-logo.is-large { gap: 9px; }
.brand-logo.is-large .brand-mark { width: 42px; height: 42px; font-size: 23px; border-radius: 16px 16px 16px 6px; }
.brand-logo.is-large .brand-mark::after { width: 11px; height: 11px; border-width: 3px; top: -3px; left: -3px; }
.brand-logo.is-large .brand-word strong { font-size: 21px; }

/* REDUCED MOTION — the approved behaviour, restored verbatim.
   Not "hide the animation": show its FINAL state. The tile is fully coloured,
   the aeroplane is gone because it has already landed, and the blue point it
   left behind is present and still. Anyone who cannot take the motion still
   sees the finished mark rather than a blank tile. */
@media (prefers-reduced-motion: reduce) {
  .brand-mark {
    color: #0072e5;
    background: linear-gradient(145deg, var(--brand-mark-from), var(--brand-mark-to));
    box-shadow: 0 9px 24px rgba(255, 139, 56, .3);
    animation: none;
  }
  .brand-mark::before { display: none; }
  .brand-mark::after { opacity: 1; transform: none; animation: none; }
  .brand-logo { transition: none !important; }
}