/*!
 * 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;
}

/* 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) {
  [data-main-title-animation] .dv-main-title-animation__char {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}