/*
 * Load after style.css.
 * Keep the initial staggered fade, then return every glyph to ordinary text.
 * No forwards-filled filter or transform remains on the individual letters.
 */
.header {
  isolation: isolate;
}

.header .brand {
  opacity: 1;
  filter: none;
  animation: none;
  transition: none;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.scene-origin {
  will-change: opacity;
}

.hero-copy {
  isolation: isolate;
}

.hero-copy h1 span {
  opacity: 1;
  filter: none;
  transform: none;
  will-change: auto;
}

body.js-ready .hero-copy h1 span {
  animation: tea-logo-letter-fade 2s cubic-bezier(.16, 1, .3, 1) backwards;
  animation-delay: calc(var(--i) * .12s + .2s);
}

.hero-eyebrow {
  --tea-logo-final-opacity: .83;
  opacity: .83;
}

.hero-tagline {
  --tea-logo-final-opacity: 1;
  opacity: 1;
}

body.js-ready .hero-eyebrow,
body.js-ready .hero-tagline {
  animation: tea-logo-copy-fade 2.5s .8s backwards;
}

@keyframes tea-logo-letter-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tea-logo-copy-fade {
  from { opacity: 0; }
  to { opacity: var(--tea-logo-final-opacity, 1); }
}

body.no-motion .hero-copy h1 span,
body.no-motion .hero-eyebrow,
body.no-motion .hero-tagline {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  body.js-ready .hero-copy h1 span,
  body.js-ready .hero-eyebrow,
  body.js-ready .hero-tagline {
    animation: none;
  }
}