/* ==========================================================================
   LUCID LENS — Motion
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="fade"]  { transform: translateY(18px); }
[data-reveal="line"]  { transform: translateY(0); clip-path: inset(0 0 100% 0); transition-property: clip-path, opacity; }
[data-reveal="scale"] { transform: scale(0.96); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0% 0);
}

/* "Focus-pull" reveal for major headlines — text resolves from a soft,
   slightly enlarged blur into sharp focus, echoing the camera/lens brand
   instead of a generic fade-up. */
[data-reveal="focus"] {
  opacity: 0;
  filter: blur(18px);
  transform: scale(1.045);
  transition: opacity 1200ms var(--ease-out), filter 1200ms var(--ease-out), transform 1200ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="focus"].is-visible {
  opacity: 1;
  filter: blur(0px);
  transform: scale(1);
}

/* Per-word focus-pull — the headline "scherpstelt" word by word. The
   container stays visible; each .reveal-word resolves from blur+rise on a
   stagger driven by its --wi index. JS (reveal.js) injects the spans. */
[data-reveal="words"] {
  opacity: 1;
  filter: none;
  transform: none;
}
.reveal-word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(0.4em);
  transition: opacity 760ms var(--ease-out), filter 760ms var(--ease-out), transform 760ms var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--wi, 0) * 65ms);
  will-change: opacity, filter, transform;
}
[data-reveal="words"].is-visible .reveal-word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; }
  .reveal-word { opacity: 1; filter: none; transform: none; transition: none; }
}

.marquee {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}