/* Pendulum lantern (tokens only). Opt-in per page via <div data-m="lantern" aria-hidden="true"></div>.
   Front layer (cord + bulb) is z 19, one below the sticky header (z 20), clipped at the header's lower edge so it emerges from beneath it.
   Back layer (halo, beam, ambient glow) is z -1, behind all content. Both are fixed, pointer-events:none, transform/opacity only.
   color-mix() declarations are preceded by a plain token fallback for browsers without it. */
@layer views {
  :root {
    --lt-amber: var(--amber-300);
    --lt-beam: var(--amber-300);
    --lt-cord: var(--gray-500);
    --lt-halo: .6;
    --lt-amb: .34;
    --lt-x: 76%;
    --lt-len: 44px;
    --lt-w: 28px;
    --lt-h: 41px;
  }
  @supports (color: color-mix(in srgb, red, blue)) {
    :root {
      --lt-beam: color-mix(in srgb, var(--lt-amber) 62%, transparent);
      --lt-cord: color-mix(in srgb, var(--text) 62%, transparent);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --lt-cord: var(--gray-300); --lt-halo: .7; --lt-amb: .4; }
  }
  :root[data-theme="dark"] { --lt-cord: var(--gray-300); --lt-halo: .7; --lt-amb: .4; }
  @supports (color: color-mix(in srgb, red, blue)) {
    @media (prefers-color-scheme: dark) {
      :root:not([data-theme="light"]) { --lt-beam: color-mix(in srgb, var(--lt-amber) 34%, transparent); --lt-cord: color-mix(in srgb, var(--gray-300) 70%, transparent); }
    }
    :root[data-theme="dark"] { --lt-beam: color-mix(in srgb, var(--lt-amber) 34%, transparent); --lt-cord: color-mix(in srgb, var(--gray-300) 70%, transparent); }
  }

  [data-m="lantern"] { pointer-events: none; }
  .lt-back, .lt-front { position: fixed; left: 0; right: 0; overflow: hidden; pointer-events: none; }
  .lt-back { top: 0; bottom: 0; z-index: -1; }
  .lt-front { top: var(--hdr-h); height: calc(var(--lt-len) + var(--lt-h) + 24px); z-index: 19; }
  .lt-back > *, .lt-front > * { position: absolute; will-change: transform, opacity; }

  /* Pivot: a 0x0 box on the header's lower edge at --lt-x; children hang from it. */
  .lt-lift, .lt-rot { left: var(--lt-x); top: 0; width: 0; height: 0; }
  .lt-back > .lt-lift { top: var(--hdr-h); }
  .lt-lift > .lt-rot { left: 0; transform-origin: 0 0; }
  .lt-cord { position: absolute; left: -.5px; top: 0; width: 1px; height: var(--lt-len); background: var(--lt-cord); border-radius: 1px; }
  .lt-bulb { position: absolute; left: calc(var(--lt-w) / -2); top: calc(var(--lt-len) - 3px); width: var(--lt-w); height: var(--lt-h); overflow: visible; }
  .lt-s1 { stop-color: var(--amber-50); }
  .lt-s2 { stop-color: var(--amber-100); }
  .lt-s3 { stop-color: var(--amber-300); }
  .lt-s4 { stop-color: var(--amber-400); }
  .lt-cap1 { fill: var(--gray-400); }
  .lt-cap2 { fill: var(--gray-500); }
  .lt-fil { fill: none; stroke: var(--amber-700); stroke-width: 1.2; stroke-linecap: round; }
  .lt-cone, .lt-halo, .lt-amb { border-radius: 50%; }
  .lt-cone {
    position: absolute; left: -90vmax; top: calc(var(--lt-len) + 10px); width: 180vmax; height: 120vmax; border-radius: 0; opacity: .5;
    background: conic-gradient(from 148deg at 50% 0, transparent 0deg, var(--lt-beam) 32deg, transparent 64deg, transparent 360deg);
    -webkit-mask-image: radial-gradient(circle at 50% 0, var(--gray-950) 0, var(--gray-950) 18%, transparent 100%);
    mask-image: radial-gradient(circle at 50% 0, var(--gray-950) 0, var(--gray-950) 18%, transparent 100%);
    transform-origin: 50% 0;
  }
  .lt-halo { position: absolute; opacity: var(--lt-halo); left: -130px; top: calc(var(--lt-len) - 106px); width: 260px; height: 260px; background: radial-gradient(circle closest-side, var(--lt-beam), transparent); }
  .lt-amb { left: var(--lt-x); top: var(--hdr-h); width: 120vmax; height: 80vmax; margin-left: -60vmax; margin-top: -26vmax; opacity: var(--lt-amb); background: radial-gradient(closest-side, var(--lt-beam), transparent); }
  @supports (color: color-mix(in srgb, red, blue)) {
    .lt-cone { opacity: 1; }
    .lt-cone {
      background: conic-gradient(from 148deg at 50% 0,
        transparent 0deg, color-mix(in srgb, var(--lt-beam) 3%, transparent) 4deg, color-mix(in srgb, var(--lt-beam) 12%, transparent) 9deg,
        color-mix(in srgb, var(--lt-beam) 30%, transparent) 15deg, color-mix(in srgb, var(--lt-beam) 55%, transparent) 21deg,
        color-mix(in srgb, var(--lt-beam) 78%, transparent) 27deg, var(--lt-beam) 32deg,
        color-mix(in srgb, var(--lt-beam) 78%, transparent) 37deg, color-mix(in srgb, var(--lt-beam) 55%, transparent) 43deg,
        color-mix(in srgb, var(--lt-beam) 30%, transparent) 49deg, color-mix(in srgb, var(--lt-beam) 12%, transparent) 55deg,
        color-mix(in srgb, var(--lt-beam) 3%, transparent) 60deg, transparent 64deg, transparent 360deg);
    }
    .lt-halo { background: radial-gradient(circle closest-side, color-mix(in srgb, var(--lt-beam) 90%, transparent), color-mix(in srgb, var(--lt-beam) 35%, transparent) 40%, color-mix(in srgb, var(--lt-beam) 8%, transparent) 75%, transparent); }
    .lt-amb { background: radial-gradient(closest-side, color-mix(in srgb, var(--lt-beam) 70%, transparent), color-mix(in srgb, var(--lt-beam) 30%, transparent) 40%, color-mix(in srgb, var(--lt-beam) 12%, transparent) 65%, color-mix(in srgb, var(--lt-beam) 3%, transparent) 88%, transparent); }
  }

  /* Rest state: the beam is gone; glow and ambient settle at their token levels. */
  .lt-rest .lt-cone { display: none; }
  .lt-fade .lt-back, .lt-fade .lt-front { animation: lt-in 250ms var(--ease-out, ease-out) both; }
  @keyframes lt-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes lt-sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1.4deg); } 75% { transform: rotate(-1.4deg); } }
  @keyframes lt-breathe { 0%, 100% { opacity: calc(var(--lt-halo) * .78); } 50% { opacity: var(--lt-halo); } }
  html:not([data-motion="paused"]) .lt-rest .lt-rot { animation: lt-sway 9s ease-in-out infinite; }
  html:not([data-motion="paused"]) .lt-rest .lt-halo { animation: lt-breathe 6s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    html:not([data-ignore-rm]) .lt-rest .lt-rot, html:not([data-ignore-rm]) .lt-rest .lt-halo, html:not([data-ignore-rm]) .lt-fade .lt-back, html:not([data-ignore-rm]) .lt-fade .lt-front { animation: none; }
  }
  html[data-motion="paused"] .lt-fade .lt-back, html[data-motion="paused"] .lt-fade .lt-front { animation: none; }
  @media (max-width: 479px) { [data-m="lantern"] { display: none; } }
}