/* VuloMail theme: animation states used by assets/js/vm-effects.js and vm-site.js.
   Hidden states only apply when JavaScript runs (html.vm-js), so content is never lost without it. */

/* Reveal / Stagger: same start state as the original Motion props */
.vm-js .vm-rv-ready:not(.vm-in) {
  opacity: 0;
  transform: translateY(var(--vm-rv-y, 28px));
  filter: blur(var(--vm-rv-blur, 8px));
}
.vm-js .vm-rv-ready.vm-in { opacity: 1; transform: none; filter: none; }
.vm-js .vm-rv:not(.vm-rv-ready),
.vm-js .vm-stagger .vm-st:not(.vm-rv-ready),
.vm-js [data-vm-reveal]:not(.vm-rv-ready),
.vm-js [data-vm-stagger] [data-vm-st]:not(.vm-rv-ready) { opacity: 0; }

/* SplitWords */
.vm-word { display: inline-block; overflow: hidden; padding-bottom: 0.12em; vertical-align: bottom; }
.vm-word-in { display: inline-block; }
.vm-js .vm-split:not(.vm-split-ready) { opacity: 0; }
.vm-js .vm-split-ready .vm-word-in { transform: translateY(110%); transition: transform 0.9s var(--ease-out); }
.vm-js .vm-split-ready.vm-in .vm-word-in { transform: none; }

/* Hero underline that draws in (1.2s after 1.1s) */
.vm-draw-svg { position: absolute; left: 0; bottom: -0.5rem; width: 100%; overflow: visible; }
.vm-draw-svg path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 1.2s 1.1s var(--ease-out) forwards; }

/* Tilt */
.vm-tilt-ready { position: relative; transform-style: preserve-3d; }
.vm-tilt-glow { pointer-events: none; position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: soft-light; }

/* Scroll progress */
.vm-progress { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; transform-origin: left; transform: scaleX(0); }
.admin-bar .vm-progress { top: var(--wp-admin--admin-bar--height, 32px); }

/* Typing dots in the phone (y 0 → -3 → 0, 0.6s, 0.12s apart) */
@keyframes vm-typing { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.vm-typing-dot { animation: vm-typing 0.6s linear infinite; }
.vm-typing-dot:nth-child(2) { animation-delay: 0.12s; }
.vm-typing-dot:nth-child(3) { animation-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}