/* Home — hero: headline com parte fixa + palavra digitada em loop, subtítulo com benefícios em rotação
   e revelação gradual dos itens ao carregar. Comportamento em js/hero.js. */

.hero__title { margin-bottom: var(--primitive-spacing-5); }
.hero__static { display: block; }
.hero__static .m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.hero__static .w { display: inline-block; }

/* Texto digitado: as cópias invisíveis reservam o espaço da frase mais longa */
.tw { display: grid; }
.tw > * { grid-area: 1 / 1; }
.tw__ghost { visibility: hidden; }
.tw__text { border-radius: 4px; transition: background-color 160ms ease, box-shadow 160ms ease; }
.tw__text.is-selected { background: color-mix(in srgb, var(--color-accent) 38%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 38%, transparent); }
.tw__caret { display: inline-block; width: 0.07em; min-width: 2px; height: 0.95em; margin-left: 0.06em; vertical-align: -0.1em; border-radius: 1px; background: currentColor; animation: tw-blink 1.05s steps(1) infinite; }
.tw.is-typing .tw__caret, .tw.is-selecting .tw__caret { animation: none; opacity: 1; }
@keyframes tw-blink { 50% { opacity: 0; } }

.tw--h { color: var(--hero-eyebrow-fg); }

.hero__sub { margin: 0 0 var(--primitive-spacing-8); }
.hero__sub-static { display: block; margin-bottom: var(--primitive-spacing-2); font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.3; color: var(--hero-fg); }
.tw--sub { position: relative; padding-left: 1.5rem; font-size: var(--type-lead-size); line-height: 1.45; color: var(--hero-lead-fg); }
.tw--sub::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.875rem; height: 2px; border-radius: 2px; background: var(--hero-eyebrow-fg); }
.tw--sub .tw__caret { width: 2px; background: var(--hero-eyebrow-fg); }

/* Revelação: escondido até o js/hero.js animar. Se o script não rodar, aparece sozinho em 2,5 s. */
.js .hero--home [data-reveal], .js .hero--home .tw, .js .hero--home .hero__static { opacity: 0; animation: hero-failsafe 0s 2.5s forwards; }
@keyframes hero-failsafe { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .js .hero--home [data-reveal], .js .hero--home .tw, .js .hero--home .hero__static { opacity: 1; animation: none; }
  .tw__caret { display: none; }
}