/* Animaciones de texto JERS. Solo se activan cuando text-motion.js agrega .tm-on al <html>. */
.tm-on .tm-w{display:inline-block;vertical-align:top}
.tm-on h1 .tm-w,.tm-on h1 .tm-wi{color:inherit;text-shadow:inherit}
.tm-on .tm-wi{display:inline-block}

/* Titular principal: palabras que suben y se enfocan */
.tm-on .tm-hero .tm-wi{animation:tm-rise 1s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(140ms + var(--i) * 75ms)}
@keyframes tm-rise{from{opacity:0;transform:translateY(.5em) rotate(2deg);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}

/* "Planea lo que sigue.": brillo que recorre las palabras */
.tm-on .tm-hero .tm-accent{background:linear-gradient(100deg,#76ff03 0 40%,#f1ffe0 50%,#76ff03 60% 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;animation:tm-rise 1s cubic-bezier(.22,1,.36,1) both,tm-shine 5.5s ease-in-out infinite;animation-delay:calc(140ms + var(--i) * 75ms),calc(1.8s + var(--i) * 110ms)}
@keyframes tm-shine{0%{background-position:100% 0}30%,100%{background-position:0 0}}

/* Títulos de sección: cada palabra emerge desde abajo al hacer scroll */
.tm-on .tm-mask .tm-w{overflow:hidden;padding:0 .08em .16em;margin:0 -.08em -.16em}
.tm-on .tm-mask .tm-wi{transform:translateY(115%);transition:transform .95s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 45ms)}
.tm-on .tm-mask.tm-in .tm-wi{transform:none}

/* Punto del badge: pulso suave */
.tm-on .hero-badge .badge-dot{animation:tm-ping 2.4s ease-out infinite}
@keyframes tm-ping{0%{box-shadow:0 0 0 0 rgba(118,255,3,.55),0 0 9px rgba(118,255,3,.7)}70%,100%{box-shadow:0 0 0 9px rgba(118,255,3,0),0 0 9px rgba(118,255,3,.7)}}

/* Franja de especialidades: se iluminan una por una */
.tm-on .expertise-inner p{animation:tm-glow 8s ease-in-out infinite}
.tm-on .expertise-inner p:nth-of-type(2){animation-delay:2s}
.tm-on .expertise-inner p:nth-of-type(3){animation-delay:4s}
.tm-on .expertise-inner p:nth-of-type(4){animation-delay:6s}
@keyframes tm-glow{9%,21%{color:#76ff03;text-shadow:0 0 18px rgba(118,255,3,.35)}}

/* Destellos ✳ que giran lentamente */
.tm-on .contact-caption>span{display:inline-block}
.tm-on .principle-mark,.tm-on .contact-caption>span{animation:tm-spin 22s linear infinite}
@keyframes tm-spin{to{transform:rotate(360deg)}}

/* Texto que se "decodifica" (etiquetas tipo terminal) */
.tm-on .tm-scrambling{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){.tm-on .tm-wi{transform:none!important;opacity:1!important;filter:none!important;animation:none!important;transition:none!important}}
@media print{.tm-on .tm-wi{transform:none!important;opacity:1!important;filter:none!important}}