/*!
 * Main-Title Animation — Dunben Visual
 * The hidden state is gated behind [data-mt-ready], which ONLY the JS sets.
 * If the script never runs, the title renders normally instead of vanishing.
 */

/* Word box: atomic. Line breaks can only happen at the plain-text spaces the
   splitter emits between words, never between two letters of one word. */
[data-main-title-animation] .dv-main-title-animation__visual {
  display: inline;
}

[data-main-title-animation] .dv-main-title-animation__word {
  display: inline-block;
  white-space: nowrap;
}

[data-main-title-animation] .dv-main-title-animation__char {
  display: inline-block;
  white-space: pre;
}

/* Opt-in first-paint guard for above-the-fold titles.
   A page that puts `document.documentElement.classList.add('mt-boot')` in an
   inline <head> script can mark a title with `data-mt-boot`: it then stays
   invisible from the very first paint until this module has split and armed
   it (data-mt-ready), instead of painting once, vanishing when armed, and
   fading back in (the home hero "appears, disappears, reappears" bug — the
   body-end scripts arrive after the first paint on a slow connection).
   Still JS-gated (no inline script → no class → never hidden), and a CSS
   failsafe reveals the text after 4.5s even if this module never runs. */
html.mt-boot [data-main-title-animation][data-mt-boot]:not([data-mt-ready]) {
  opacity: 0;
  animation: dv-main-title-boot-failsafe 0.01s linear 4.5s forwards;
}

@keyframes dv-main-title-boot-failsafe {
  to { opacity: 1; }
}

/* Armed by JS immediately after splitting. */
[data-main-title-animation][data-mt-ready] .dv-main-title-animation__char {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  will-change: transform, opacity;
}

/* When the animated element itself also carries a page reveal class, that
   second opacity layer is redundant — and if its own observer ever misses,
   the title would disappear. The character animation owns the entrance. */
[data-main-title-animation][data-mt-ready].about-reveal,
[data-main-title-animation][data-mt-ready].reveal,
[data-main-title-animation][data-mt-ready].reveal-on-scroll,
[data-main-title-animation][data-mt-ready].reveal-on-load {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

[data-main-title-animation][data-mt-complete] .dv-main-title-animation__char {
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  html.mt-boot [data-main-title-animation][data-mt-boot]:not([data-mt-ready]) {
    opacity: 1;
    animation: none;
  }

  [data-main-title-animation] .dv-main-title-animation__char {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}