/* lib/web/lux/tokens.css - Lux base layer: shared motion tokens and the structural classes the text, reveal and scroll modules use.
   Load once, before any Lux module styles. Everything is a custom property with a default, so a site overrides on :root or a container.
   This file never hides content: the hidden start states of every effect are written inline by the modules (lux/text.js, lux/reveal.js),
   so if a script fails to load the content stays visible. Classes defined here belong to the base layer (.lux-sr, .lux-split, .lux-word,
   .lux-ch, .lux-ch--sp, .lux-ch-col, .lux-line, .lux-line-in, .lux-shift, html.lux-scroll). Other tracks (menu, footer pile, capsule
   selector, 3D) own their own .lux-* names and files. */
:root {
  /* easing */
  --lux-ease: cubic-bezier(.35, 0, 0, 1);          /* the strong ease-out used for nearly all text motion */
  --lux-ease-out: cubic-bezier(.16, 1, .3, 1);     /* expoOut */
  --lux-ease-io: cubic-bezier(.87, 0, .13, 1);     /* expoInOut */
  --lux-ease-cubic: cubic-bezier(.65, 0, .35, 1);  /* cubicInOut (zooms) */
  /* rates and durations (--lux-k is read by lux/scroll.js through getComputedStyle; the rest document the module defaults) */
  --lux-k: 12;                                     /* scroll follow rate per second: 1 - exp(-k * dt) */
  --lux-dur-rise: .667s;                           /* one character rising out of its mask */
  --lux-stagger-rise: .033s;                       /* per character */
  --lux-dur-roll: 1.25s;                           /* glyph column roll */
  --lux-dur-reveal: 1s;                            /* mask grow and un-zoom */
  --lux-dur-slide: 2s;                             /* alternating slide and roll */
  --lux-dur-hover: .4s;
  /* shape */
  --lux-radius: 20px;                              /* reveal mask corner radius */
  --lux-lh: 1.18;                                  /* line height of masked text (em), also the roll column cell height */
  --lux-rise-origin: 0% 100%;
}
@media (max-width: 812px) { :root { --lux-radius: 10px; } }

/* visually hidden copy of split text: stays in the accessibility tree and in find in page */
.lux-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.lux-split { position: relative; }
/* the visual copy wraps a word inside itself only when that one word is wider than its line (overflow-wrap is inherited by every glyph span) */
.lux-vis { display: inline; overflow-wrap: anywhere; }

/* rise: one mask per word, one span per character */
.lux-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; max-width: 100%; min-width: 0; white-space: normal; }
.lux-ch { display: inline-block; vertical-align: top; transform-origin: var(--lux-rise-origin); will-change: transform; }
.lux-ch--sp { width: .3em; }

/* roll: a glyph column of identical copies inside a one-line mask */
.lux-roll { display: inline-block; max-width: 100%; min-width: 0; white-space: normal; }
.lux-roll .lux-ch { height: calc(var(--lux-lh) * 1em); overflow: hidden; }
.lux-ch-col { display: flex; flex-direction: column; will-change: transform; }
.lux-ch-col > span { display: block; height: calc(var(--lux-lh) * 1em); line-height: var(--lux-lh); }

/* lines: each measured line sits in its own mask; the measuring words may not be wider than the line */
.lux-w { max-width: 100%; min-width: 0; }
.lux-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.lux-line-in { display: block; will-change: transform; }

/* optional: a rolled name slides sideways on hover with a tiny right-to-left lead per glyph (mouse only) */
@media (hover: hover) and (pointer: fine) {
  .lux-shift .lux-ch { transition: translate var(--lux-dur-hover) var(--lux-ease) var(--lux-hd, 0s); }
  .lux-shift:hover .lux-ch, .lux-shift:focus-visible .lux-ch { translate: 1.5em 0; }
}

/* smooth scrolling is active (set by lux/scroll.js): CSS smooth scrolling would fight the eased writes */
html.lux-scroll { scroll-behavior: auto; }

/* Reduced motion, including the static state before (or without) the script reacting: the inline poses the modules write for rise,
   roll, lines, item reveal, parallax and lean are overridden to their final state, and transitions are off. !important is needed
   because the poses are inline styles. */
@media (prefers-reduced-motion: reduce) {
  .lux-ch, .lux-ch-col, .lux-line-in, .lux-shift .lux-ch,
  [data-lux-reveal], [data-lux-reveal-media], [data-lux-parallax], [data-lux-lean] {
    transition: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
    clip-path: none !important;
  }
}