.hero h1 { animation: none; }
.hero-emphasis::after {
  content: '';
  left: 0;
  right: 0;
  bottom: .16em;
  height: 2px;
  background: #F7A8C8;
  opacity: 1;
  transform: none;
  animation: none;
}
.hero h1 .typing-char { display: inline; position: relative; visibility: hidden; animation: none; }
.hero h1 .typing-char.is-visible { visibility: visible; }
.hero h1 .typing-char.is-cursor::after {
  content: '';
  position: absolute;
  top: .12em;
  right: -.04em;
  height: .95em;
  border-right: 2px solid currentColor;
}
.hero h1.is-typing .hero-emphasis::after { visibility: hidden; }

/* Decorative flowers around the introduction. */
.hero-flower {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  pointer-events: none;
  stroke: #ed78ac;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-flower-large {
  width: clamp(76px, 9vw, 120px);
  top: 3%;
  left: 0;
  transform: rotate(-16deg);
}
.hero-flower-small {
  width: clamp(48px, 6vw, 78px);
  right: 5%;
  bottom: 5%;
  transform: rotate(18deg);
}
@media (max-width: 700px) {
  .hero-flower-large { width: 68px; top: 1%; left: 2%; }
  .hero-flower-small { width: 48px; right: 4%; bottom: 2%; }
}

/* Gentle, independent movement for the hero flowers. */
.hero-flower-large { animation: flower-float-large 5s ease-in-out infinite alternate; }
.hero-flower-small { animation: flower-float-small 4.2s ease-in-out infinite alternate; }
@keyframes flower-float-large {
  from { transform: translateY(0) rotate(-16deg); }
  to { transform: translateY(-12px) rotate(-5deg); }
}
@keyframes flower-float-small {
  from { transform: translateY(0) rotate(18deg); }
  to { transform: translateY(-9px) rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-flower-large, .hero-flower-small { animation: none; }
}

/* Keep the introduction and its decorations comfortably inside small screens. */
@media (max-width: 480px) {
  .hero-stage { min-height: 340px; }
  .hero h1 { font-size: clamp(12px, 4vw, 19px); }
  .hero h1 > span:first-child { white-space: nowrap; }
  .hero-flower-large { top: 8%; }
}

/* The opening section fills the visible screen below the fixed navigation. */
.hero { padding: 0 4%; }
.hero-stage { min-height: calc(100vh - 72px); min-height: calc(100svh - 72px); }
@media (max-width: 700px) {
  .hero-stage { min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); }
}