.p-title-card {
  display: flex;
  flex-direction: column;
}

/* RevoTec本体(result)は最初は高さ0で畳んでおき、Revolution×Technologyの
   演出が終わったタイミングでgrid-template-rowsを0fr→1frにアニメーションさせて
   自然に展開する。結果として下にあるequationブロックが押し下げられる形になり、
   position:absoluteでの重ね合わせを使わずに「上に出てくる」動きを実現している。 */
.p-title-card__result-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
}

.p-title-card__result-wrap[data-reveal] {
  transition: opacity 0.9s ease, transform 0.9s ease, grid-template-rows 0.9s ease;
  transition-delay: 2.7s;
}

.p-title-card__result-wrap[data-reveal].is-visible {
  grid-template-rows: 1fr;
}

.p-title-card__result {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.p-title-card__equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px clamp(28px, 6vw, 96px);
  padding-top: 32px;
}

.p-title-card__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-title-card__side--left {
  align-items: flex-end;
  text-align: right;
}

.p-title-card__side--right {
  align-items: flex-start;
  text-align: left;
}

.p-title-card__times {
  display: inline-block;
  font-family: var(--font-family-mono);
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  font-weight: 700;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(8px);
}

[data-reveal].is-visible .p-title-card__times {
  animation: p-title-card-fade-in 0.8s ease forwards;
  animation-delay: var(--delay, 0s);
}

@keyframes p-title-card-fade-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.p-title-card__word-line {
  display: flex;
  align-items: baseline;
}

.p-title-card__word {
  display: inline-block;
  overflow: hidden;
  width: 0;
  white-space: nowrap;
  font-family: var(--font-family-mono);
  font-size: clamp(2rem, 6.5vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

[data-reveal].is-visible .p-title-card__word {
  animation: p-title-card-type 0.7s steps(var(--chars)) forwards;
  animation-delay: calc(var(--delay, 0s) + 0.25s);
}

@keyframes p-title-card-type {
  to {
    /* 1chぴったりだと書体の実際の文字幅よりわずかに狭く、最後の1文字が欠けて見えるため余白を足す */
    width: calc(var(--chars) * 1ch + 8px);
  }
}

.p-title-card__highlight--revo {
  color: var(--color-accent-bright);
}

.p-title-card__highlight--tec {
  color: var(--color-brand-green);
}

.p-title-card__cursor {
  display: inline-block;
  margin-left: 4px;
  font-family: var(--font-family-mono);
  font-size: clamp(2rem, 6.5vw, 5rem);
  font-weight: 700;
  color: var(--color-brand-green);
  opacity: 0;
}

[data-reveal].is-visible .p-title-card__cursor {
  opacity: 1;
  animation: p-blink-caret 0.9s steps(1) infinite;
  animation-delay: calc(var(--delay, 0s) + 0.9s);
}

.p-title-card__desc {
  opacity: 0;
  transform: translateY(8px);
  color: var(--color-text-muted);
  font-size: clamp(0.92rem, 1.3vw, 1.15rem);
  line-height: 1.8;
}

[data-reveal].is-visible .p-title-card__desc {
  animation: p-title-card-fade-in 0.8s ease forwards;
  animation-delay: var(--delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .p-title-card__word {
    width: auto;
    animation: none;
  }

  .p-title-card__cursor {
    opacity: 1;
    animation: none;
  }

  .p-title-card__times {
    opacity: 1;
    transform: none;
  }

  .p-title-card__desc {
    opacity: 1;
    transform: none;
  }

  .p-title-card__result-wrap[data-reveal] {
    transition: none;
    grid-template-rows: 1fr;
  }
}

@media (max-width: 720px) {
  .p-title-card__equation {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 24px;
  }

  .p-title-card__side--left,
  .p-title-card__side--right {
    align-items: center;
    text-align: center;
  }
}