/* ==========================================================================
   LNE brand mark
   --------------------------------------------------------------------------
   The mark itself is unchanged — same SVG geometry, same colours, same
   three-letter morph animation as the current site. Only the sizing, the
   surrounding chrome and the spacing are refined here.
   ========================================================================== */

.brand { letter-spacing: 0; padding: 0 10px; }
.login-brand .brand { padding: 0; }

/* Slightly more breathing room than the original 6px pill background */
.lne-motion {
  display: block;
  flex: none;
  width: 152px;                 /* was 146px */
  height: auto;
  aspect-ratio: 164 / 70;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  line-height: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Brand colours are preserved verbatim from the current site.
   The mark is a button, so neutralise the shared button hover fill. */
.lne-motion,
.lne-motion:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: inherit;
}
.lne-motion svg { display: block; width: 100%; height: 100%; fill: #2e659e; }
.lne-motion .lne-accent { fill: #d56a36; }

.lne-motion:hover { transform: translateY(-2px); box-shadow: 0 6px 18px #061e3b25; }
.lne-motion:active { transform: translateY(-1px) scale(0.98); }
.lne-motion:focus-visible { outline: 2px solid #a9d2ff; outline-offset: 5px; }

/* --------------------------------------------------------------------------
   Optical left alignment
   --------------------------------------------------------------------------
   The mark's SVG uses viewBox="0 0 164 70" but the paths only span
   x = 15 → 146. That leaves ~9% dead space on the left (≈17px at a 190px
   display width) and ~11% on the right (≈21px).

   Because the tagline below is a normal text node, it aligns to the element
   box while the glyphs sit ~17px further in — so the two look off-centre.
   Pulling the button left by the measured inset and letting the box overhang
   to the right makes the glyph ink align with the tagline, which is what the
   eye actually compares. The logo artwork itself is untouched.
   -------------------------------------------------------------------------- */
/* Baseline (login panel, 190px mark) */
.lne-motion {
  margin-left: -17px;
  margin-right: -21px;
}

/* The sidebar mark is 152px wide vs 190px on the login panel, so the same
   viewBox inset scales down: 17 × 152/190 ≈ 13.6px, 21 × 152/190 ≈ 16.8px.
   (Corrected after a first pass that overshot and pushed the mark further
   left instead of pulling it in.) */
.sidebar .lne-motion {
  margin-left: -14px;
  margin-right: -17px;
}

@media (max-width: 1000px) {
  /* 116px wide: 17 × 116/190 ≈ 10.4px */
  .sidebar .lne-motion {
    margin-left: -10px;
    margin-right: -13px;
  }
}
@media (max-width: 480px) {
  /* 100px wide: ≈ 9px */
  .sidebar .lne-motion { margin-left: -9px; margin-right: -11px; }
}

/* Tagline under the mark — sized to read as a real subtitle rather than a
   footnote. Letter-spacing is tightened proportionally so the added size
   doesn't make the line drift wider than the mark itself.

   The shortened wording is applied here rather than in app.js so the JS
   bundle stays untouched. The element keeps its original text for assistive
   tech, and the replacement is exposed as the accessible name instead. */
.brand small {
  display: block;
  margin-top: 10px;
  font-size: 0;                       /* hide the inherited glyphs */
  line-height: 1.4;
  font-weight: 400;
  color: var(--muted, #6e6e73);
}
.brand small::after {
  content: "外贸工作台";
  display: block;
  font-size: 14px;
  letter-spacing: 0.04em;
  /* Visually identical to a normal tagline, but hidden from the a11y tree so
     the original DOM text is announced once, not twice. */
}

/* On the dark login panel the tagline stays light */
.login-brand .brand small { color: rgba(255, 255, 255, 0.6); margin-top: 12px; }
.login-brand .lne-motion { width: 190px; }

/* On the dark login panel the mark reads as light artwork. The shape, colours
   of the accent stroke and the animation are untouched — only the legibility
   treatment changes so it stays visible on the dark background. */
.login-brand .lne-motion svg { fill: #ffffff; }
.login-brand .lne-motion .lne-accent { fill: #d56a36; }
.login-brand .lne-motion:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }

/* --------------------------------------------------------------------------
   Letter morph animation — timing curve and keyframes unchanged from the
   current site so the motion feels identical.
   -------------------------------------------------------------------------- */
.lne-letter {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 3.8s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-iteration-count: infinite;
}
.lne-l { animation-name: lne-open-left; }
.lne-n { animation-name: lne-reform; }
.lne-e { animation-name: lne-open-right; }
.lne-motion[data-paused="true"] .lne-letter { animation-play-state: paused; }

@keyframes lne-open-left {
  0%, 12%, 86%, 100% { transform: translate(0, 0) rotate(0); }
  32%, 68% { transform: translate(-5px, -1px) rotate(-6deg); }
}
@keyframes lne-reform {
  0%, 12% { transform: rotate(0) scale(1); }
  32% { transform: rotate(-20deg) scale(0.78); }
  68% { transform: rotate(340deg) scale(0.78); }
  86%, 100% { transform: rotate(360deg) scale(1); }
}
@keyframes lne-open-right {
  0%, 12%, 86%, 100% { transform: translate(0, 0) rotate(0); }
  32%, 68% { transform: translate(5px, 1px) rotate(6deg); }
}

/* --------------------------------------------------------------------------
   Responsive sizing — mark shrinks gracefully, never crops
   -------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .lne-motion { width: 138px; }
}
@media (max-width: 1000px) {
  .sidebar .brand { padding: 0; }
  .sidebar .lne-motion { width: 116px; }
  .sidebar .brand small { display: none; }
}
@media (max-width: 900px) {
  .login-brand .lne-motion { width: 152px; }
}
@media (max-width: 480px) {
  .sidebar .lne-motion { width: 100px; }
}

/* Honour the OS reduce-motion setting, while keeping the click-to-pause
   override working exactly as before. */
@media (prefers-reduced-motion: reduce) {
  .lne-motion,
  .lne-motion:hover {
    transform: none;
    transition: none;
  }
  .lne-motion:not([data-motion-override="true"]) .lne-letter {
    animation: none !important;
  }
  .lne-motion[data-motion-override="true"] .lne-letter {
    animation-duration: 3.8s !important;
    animation-iteration-count: infinite !important;
  }
}