/* ============================================================
   SHARED MOTION — Laubscher Lenswerke
   One small stylesheet, linked from every page, so the loader
   animation and the cross-page transition feel stay identical
   everywhere instead of drifting apart copy by copy.
   ============================================================ */

/* ---- cross-document view transitions -----------------------
   Opts every same-origin navigation into the browser's native
   view-transition crossfade instead of a hard white-flash swap.
   Chromium honours this; other browsers just ignore it and fall
   back to a normal navigation — no polyfill, no JS required. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: ll-vt-out 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
::view-transition-new(root) {
  animation: ll-vt-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes ll-vt-out {
  to { opacity: 0; transform: scale(0.985); }
}
@keyframes ll-vt-in {
  from { opacity: 0; transform: scale(1.015); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- SVG mark loader -----------------------------------------
   Draws the three-line mark on, then hands off to the page.
   Gated by real load state in loader.js — no manufactured wait. */
.ll-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--cream, #faf6ee);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s;
}
.ll-loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

.ll-loader-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* The same horizontal lockup as the header logo — icon, divider, wordmark —
   just held centre-stage for a moment. viewBox matches .logo-mark's 200x46
   so the icon+divider+text proportions are identical everywhere. */
.ll-loader-mark { width: clamp(220px, 20vw, 340px); height: auto; overflow: visible; display: block; }
.ll-loader-mark line {
  fill: none; stroke: var(--ink, #18140f); stroke-linecap: round;
}
.ll-loader-mark .ll-l1, .ll-loader-mark .ll-l2, .ll-loader-mark .ll-l3 {
  stroke-width: 1; stroke-dasharray: 24; stroke-dashoffset: 24;
  opacity: 0; animation-name: ll-draw, ll-line-fade;
  animation-duration: 0.75s, 0.3s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: forwards;
}
.ll-loader-mark .ll-l1 { animation-delay: 0.08s, 0.08s; }
.ll-loader-mark .ll-l2 { stroke-dasharray: 36; stroke-dashoffset: 36; animation-delay: 0.22s, 0.22s; }
.ll-loader-mark .ll-l3 { animation-delay: 0.36s, 0.36s; }
@keyframes ll-draw { to { stroke-dashoffset: 0; } }
@keyframes ll-line-fade { to { opacity: 1; } }

.ll-loader-mark .ll-divider {
  stroke: var(--ink, #18140f); stroke-width: 0.7; opacity: 0;
  animation: ll-line-fade 0.5s ease 0.55s forwards;
}
.ll-loader-mark text {
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; fill: var(--ink, #18140f);
  opacity: 0; transform: translateY(4px); transform-origin: center;
  animation: ll-word-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
.ll-loader-mark .ll-word-1 { font-size: 15px; font-weight: 400; letter-spacing: 0.08em; }
.ll-loader-mark .ll-word-2 { font-size: 9px; font-weight: 300; letter-spacing: 0.32em; }
@keyframes ll-word-in { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .ll-loader-mark line, .ll-loader-mark .ll-divider, .ll-loader-mark text {
    animation: none; stroke-dashoffset: 0; opacity: 1; transform: none;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}