/* Time-led finale reveal. The readable source stays in the accessibility tree. */

#finale.finale-reveal-ready .story-copy--finale,
.has-js #finale.finale-reveal-ready .story-copy--finale,
.has-js #finale.finale-reveal-ready:not(.is-finale-copy-ready) .story-copy--finale {
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

.finale-reveal__source {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.finale-reveal__stage {
  display: grid;
  width: 100%;
  min-height: clamp(25rem, 54vh, 34rem);
  align-content: center;
  justify-items: center;
  text-align: center;
}

.finale-reveal__stage > * {
  max-width: 48rem;
}

.finale-reveal__stage .eyebrow {
  margin: 0 0 1rem;
}

.finale-reveal__stage h2 {
  margin: 0 0 1.05rem;
}

.finale-reveal__stage p {
  margin: 0.62rem 0 0;
  text-wrap: pretty;
}

.finale-reveal__stage .lead {
  margin-top: 0;
}

.finale-reveal__title-line {
  display: block;
  min-height: 1.08em;
}

.finale-reveal__title-piece {
  display: inline-block;
  opacity: 0;
  filter: blur(0.35rem);
  transform: translateY(0.5em) scale(0.96);
  transition:
    opacity var(--finale-reveal-duration, 620ms) ease,
    filter var(--finale-reveal-duration, 620ms) ease,
    transform var(--finale-reveal-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--finale-piece-index) * var(--finale-piece-step, 58ms));
}

.finale-reveal__stage [data-finale-char-group] {
  line-break: strict;
  word-break: normal;
  text-wrap: balance;
}

.finale-reveal__text-piece {
  display: inline-block;
  opacity: 0;
  filter: blur(0.3rem);
  transform: translateY(0.46em) scale(0.96);
  transition:
    opacity var(--finale-reveal-duration, 760ms) ease,
    filter var(--finale-reveal-duration, 760ms) ease,
    transform var(--finale-reveal-duration, 760ms) cubic-bezier(0.22, 1, 0.36, 1);
}

[data-finale-char-group="lead"] .finale-reveal__text-piece {
  transition-delay: calc(var(--finale-text-index) * var(--finale-lead-step, 74ms));
}

[data-finale-char-group="wish"] .finale-reveal__text-piece {
  transition-delay: calc(var(--finale-text-index) * var(--finale-wish-step, 96ms));
}

.finale-reveal__stage [data-finale-phase]:not([data-finale-phase="title"]):not([data-finale-char-group]) {
  opacity: 0;
  filter: blur(0.22rem);
  transform: translateY(0.85rem);
  transition:
    opacity var(--finale-reveal-duration, 620ms) ease,
    filter var(--finale-reveal-duration, 620ms) ease,
    transform var(--finale-reveal-duration, 620ms) cubic-bezier(0.22, 1, 0.36, 1);
}

#finale.is-eyebrow-visible [data-finale-phase="eyebrow"],
#finale.is-lead-visible [data-finale-phase="lead"],
#finale.is-body-visible [data-finale-phase="body"],
#finale.is-action-visible [data-finale-phase="action"],
#finale.is-wish-visible [data-finale-phase="wish"] {
  opacity: 1;
  filter: none;
  transform: none;
}

#finale.is-title-visible .finale-reveal__title-piece {
  opacity: 1;
  filter: none;
  transform: none;
}

#finale.is-lead-visible [data-finale-char-group="lead"] .finale-reveal__text-piece,
#finale.is-wish-visible [data-finale-char-group="wish"] .finale-reveal__text-piece {
  opacity: 1;
  filter: none;
  transform: none;
}

#finale .finale-reveal__restart {
  visibility: hidden;
  min-height: 1.7rem;
  opacity: 0;
  transform: translateY(0.55rem);
  transition:
    opacity var(--finale-reveal-duration, 620ms) ease,
    transform var(--finale-reveal-duration, 620ms) ease;
}

#finale.is-restart-visible .finale-reveal__restart {
  visibility: visible;
  opacity: 1;
  transform: none;
}

@media (max-width: 760px) {
  #finale.finale-reveal-ready .story-copy--finale,
  .has-js #finale.finale-reveal-ready .story-copy--finale,
  .has-js #finale.finale-reveal-ready:not(.is-finale-copy-ready) .story-copy--finale {
    top: auto !important;
    right: 1.05rem !important;
    bottom: max(2.5rem, env(safe-area-inset-bottom)) !important;
    left: 1.05rem !important;
    width: auto !important;
    transform: none !important;
  }

  .finale-reveal__stage {
    min-height: min(72svh, 36rem);
    align-content: end;
    justify-items: start;
    text-align: left;
  }

  .finale-reveal__stage > * {
    max-width: 100%;
  }

  .finale-reveal__stage .eyebrow {
    justify-content: flex-start;
    margin-bottom: 0.7rem;
  }

  .finale-reveal__stage h2 {
    max-width: 11ch;
    margin-bottom: 0.58rem;
    font-size: clamp(2.15rem, 9.6vw, 3.1rem);
    line-height: 1.02;
  }

  .finale-reveal__stage p {
    margin-top: 0.46rem;
    font-size: clamp(0.78rem, 3.45vw, 0.9rem);
    line-height: 1.56;
  }

  .finale-reveal__stage .lead {
    font-size: clamp(0.84rem, 3.7vw, 0.96rem);
  }

  #finale .finale-reveal__restart {
    margin-top: 0.7rem;
  }
}

@media (max-width: 390px) and (max-height: 760px) {
  .finale-reveal__stage {
    min-height: min(70svh, 31rem);
  }

  .finale-reveal__stage h2 {
    font-size: clamp(1.95rem, 8.8vw, 2.6rem);
  }

  .finale-reveal__stage p {
    font-size: 0.76rem;
    line-height: 1.48;
  }
}

@media (prefers-reduced-motion: reduce) {
  #finale.finale-reveal-ready .finale-reveal__title-piece,
  #finale.finale-reveal-ready .finale-reveal__text-piece,
  #finale.finale-reveal-ready .finale-reveal__stage [data-finale-phase],
  #finale.finale-reveal-ready .finale-reveal__restart {
    transition: none !important;
  }
}