/* Shared with the launch-film renderer. One quiet roll into place, then rest. */
.brand-reveal { display:inline-flex; white-space:nowrap; perspective:700px; }
.brand-cell { display:inline-grid; position:relative; }
.brand-cell::before, .brand-glyph { grid-area:1 / 1; }
.brand-cell::before { content:attr(data-letter); opacity:.2; }
.brand-glyph { display:block; transform-origin:50% 75%; backface-visibility:hidden; }
@media (prefers-reduced-motion:no-preference) {
  .brand-glyph {
    animation:brand-roll 1.1s cubic-bezier(.2,.65,.2,1) both;
    animation-delay:calc(.12s + var(--letter) * .065s);
  }
}
@keyframes brand-roll {
  from { opacity:0; transform:translateY(.42em) rotateX(-70deg); }
  to { opacity:1; transform:translateY(0) rotateX(0); }
}

/* Homepage: solid letters type once into fixed positions and remain visible.
   The roll above remains available to the launch-film renderer. */
.brand-reveal--type { perspective:none; }
.brand-reveal--type .brand-cell::before { content:none; }
.brand-reveal--type .brand-glyph { animation:none; opacity:1; }
@media (prefers-reduced-motion:no-preference) {
  .brand-reveal--type .brand-glyph {
    /* Hide only during the delay. A finished letter uses its visible base
       style, so fractional end-time rounding cannot leave it transparent. */
    animation:brand-type .12s step-start backwards;
    animation-delay:calc(.2s + var(--letter) * .18s);
  }
}
@keyframes brand-type {
  from { opacity:0; }
  to { opacity:1; }
}

/* A softer ASHVA wordmark across all five palettes and hero variants. */
.brand-ashva,
.hc-word .brand-cell:nth-child(n+6) {
  color:color-mix(in srgb, var(--tint) 75%, white);
  -webkit-text-fill-color:currentColor;
  font-weight:500;
}
.hero-positioning {
  margin:12px 20px 0;
  color:var(--fg2);
  font:500 clamp(14px,1.4vw,19px)/1.5 var(--font-body);
  letter-spacing:.025em;
}
html[data-lang="hi"] .hero-positioning { letter-spacing:0; }
@media (prefers-reduced-motion:no-preference) {
  .hc-copy > .hero-positioning { animation:hc-in 1.2s ease var(--hc-intro-end) both; }
}

/* The light gold wordmark uses the palette tint, with a softer ASHVA. */
html[data-theme="yellow-light"] h1.hc-word,
html[data-theme="yellow-light"] h1.hb-word,
html[data-theme="yellow-light"] h1.wordmark {
  color:var(--tint);
  -webkit-text-fill-color:currentColor;
  background:none;
}