/* A botanical pen drawing, paced from the petal contours to the finest veins. */
.masthead-intro .botanical-orchid-wrap {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
}
.masthead-intro .orchid-pen-illustration {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #0055a4;
}
.orchid-pen-line {
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}
.orchid-pen-detail {
  stroke-width: 1.05;
  opacity: .8;
}
.orchid-pen-center { stroke: #7c2439; }
.orchid-pen-ready .orchid-pen-line { stroke-dashoffset: 1; }
.orchid-pen-started .orchid-pen-line {
  animation: orchid-pen-draw var(--pen-duration, 2s) linear var(--pen-delay, 0s) both;
}
.motion-paused .orchid-pen-line,
[data-flowers-paused="true"] .orchid-pen-line {
  animation-play-state: paused;
}
@keyframes orchid-pen-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .orchid-pen-illustration .orchid-pen-line {
    animation: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Black ink keeps flowing while a complete drawing remains easy to read. */
.intro-flower-icon { --ink-phase: -1.2s; }
.intro-flower-icon--cosmos { --ink-phase: -3.6s; }
.intro-flower-icon--orchid { --ink-phase: -5.8s; }
.intro-flower-guide { opacity: 1; }
.intro-flower-ink { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .intro-flower-guide { opacity: .76; }
  .intro-flower-ink { display: inline; }
  .intro-flower-ink .intro-flower-line {
    stroke-width: 1.55;
    stroke-dasharray: 1 1;
    animation: botanical-ink-flow 8.4s linear calc(var(--ink-phase) - var(--ink-stagger, 0s)) infinite both;
  }
  .intro-flower-ink .intro-flower-detail { stroke-width: .95; }

  /* Turn the petals gently about a fixed center; the SVG cells never move. */
  .masthead-intro .intro-flower-linework {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: botanical-petal-flow 12s var(--ease-in-out, cubic-bezier(.77, 0, .175, 1)) -1.2s infinite both;
  }
  .masthead-intro .intro-flower-icon--cosmos .intro-flower-linework {
    animation-duration: 14s;
    animation-delay: -5.1s;
  }
  .masthead-intro .intro-flower-icon--orchid .intro-flower-linework {
    animation-duration: 16s;
    animation-delay: -9.4s;
  }

  .motion-paused .intro-flower-linework,
  .motion-paused .intro-flower-ink .intro-flower-line,
  [data-flowers-paused="true"] .intro-flower-linework,
  [data-flowers-paused="true"] .intro-flower-ink .intro-flower-line {
    animation-play-state: paused;
  }
}

@keyframes botanical-ink-flow {
  0% { stroke-dashoffset: 1; }
  44%, 56% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}
@keyframes botanical-petal-flow {
  0%, 100% { transform: rotate(-1.1deg) scale(.95); }
  50% { transform: rotate(1.1deg) scale(.97); }
}

/* Three independent flowers with a shared height and equal visible-edge gaps. */
.masthead-intro .intro-flower-trio {
  --intro-flower-height: clamp(96px, 8.5vw, 124px);
  --intro-flower-gap: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--intro-flower-gap);
  width: max-content;
  max-width: 100%;
  margin: 0;
  color: #000000;
}
.masthead-intro .intro-flower-icon {
  display: block;
  flex: none;
  width: auto;
  height: var(--intro-flower-height);
  overflow: hidden;
}
@media (min-width: 701px) and (max-width: 1023px) {
  .masthead-intro .intro-flower-trio { --intro-flower-height: 108px; }
}
@media (max-width: 700px) {
  .masthead-intro .intro-flower-trio {
    --intro-flower-height: clamp(72px, 22vw, 92px);
    --intro-flower-gap: clamp(18px, 5vw, 24px);
    margin-inline: auto;
  }
}