/* ============================================================================
   Magenta Light Studios — "Light" logo
   Wordmark stays fully visible. "MAGENTA" is fixed; the second word
   (LIGHT STUDIOS / EDGE FILMS) shows with its keyword illuminated. On click a
   beam of light travels left->right from MAGENTA, repainting the word as it
   passes. Theme via CSS custom properties.
   ========================================================================== */
.ll-logo {
  --ll-size: 18px;
  display: inline-flex; align-items: baseline; gap: 0.42em;
  font-family: var(--serif, "Times New Roman", Georgia, serif);
  font-size: var(--ll-size); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; user-select: none; white-space: nowrap;
}
.ll-fixed { color: var(--ll-ink, #f1ece3); }
.ll-swap { position: relative; display: inline-block; white-space: nowrap; }
.ll-word { display: inline-block; white-space: nowrap; color: var(--ll-accent, #ff2e8e); }
.ll-word.next { position: absolute; left: 0; top: 0; opacity: 0; clip-path: inset(0 100% 0 0); }
.ll-word .kw {
  position: relative; color: var(--ll-accent, #ff2e8e);
  text-shadow: 0 0 4px var(--ll-glow, rgba(255,46,142,.65)), 0 0 14px var(--ll-glow, rgba(255,46,142,.45));
  animation: ll-twinkle 3s ease-in-out infinite;
}
/* idle glint: a sliver of light periodically sweeps the keyword so it twinkles, inviting a click */
.ll-word.cur .kw::after {
  content: ""; position: absolute; inset: -0.12em -0.18em; pointer-events: none; border-radius: 0.12em;
  background: linear-gradient(105deg, transparent 33%, rgba(255,255,255,.92) 49%, rgba(255,255,255,.25) 56%, transparent 67%);
  mix-blend-mode: screen; opacity: 0; transform: translateX(-130%);
  animation: ll-glint 4.6s ease-in-out infinite;
}
@keyframes ll-twinkle {
  0%, 100% { text-shadow: 0 0 3px var(--ll-glow, rgba(255,46,142,.42)), 0 0 10px var(--ll-glow, rgba(255,46,142,.28)); }
  22%      { text-shadow: 0 0 7px var(--ll-glow, rgba(255,46,142,.9)),  0 0 22px var(--ll-glow, rgba(255,46,142,.6)), 0 0 34px var(--ll-glow, rgba(255,46,142,.34)); }
  40%      { text-shadow: 0 0 4px var(--ll-glow, rgba(255,46,142,.5)),  0 0 12px var(--ll-glow, rgba(255,46,142,.3)); }
  64%      { text-shadow: 0 0 9px var(--ll-glow, rgba(255,46,142,.95)), 0 0 26px var(--ll-glow, rgba(255,46,142,.7)), 0 0 42px var(--ll-glow, rgba(255,46,142,.4)); }
}
@keyframes ll-glint {
  0%, 60%   { opacity: 0; transform: translateX(-130%); }
  68%       { opacity: .9; }
  86%, 100% { opacity: 0; transform: translateX(130%); }
}
.ll-logo:hover .kw { text-shadow: 0 0 8px var(--ll-glow, rgba(255,46,142,.95)), 0 0 24px var(--ll-glow, rgba(255,46,142,.7)), 0 0 46px var(--ll-glow, rgba(255,46,142,.45)); }
.ll-logo:hover .ll-word.cur .kw::after { animation-duration: 1.5s; }
/* the travelling light streak */
.ll-beam {
  position: absolute; top: -0.15em; bottom: -0.15em; left: 0; width: 0.5em; z-index: 3;
  pointer-events: none; opacity: 0; border-radius: 50%;
  background: linear-gradient(90deg, transparent, var(--ll-accent, #ff2e8e), #fff 50%, var(--ll-accent, #ff2e8e), transparent);
  filter: blur(2px);
  box-shadow: 0 0 14px 5px var(--ll-glow, rgba(255,46,142,.7));
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) { .ll-word .kw { animation: none; } .ll-word .kw::after { display: none; } .ll-beam { display: none; } }

/* full-page light wipe used on entity switch */
.entity-wipe {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(110deg, rgba(255,46,142,0) 0%, #ff2e8e 34%, #ffe3f1 50%, #ff2e8e 66%, rgba(255,46,142,0) 100%);
  box-shadow: 0 0 140px 50px rgba(255,46,142,.55);
}
@media (prefers-reduced-motion: reduce) { .entity-wipe { display: none; } }