@media (prefers-reduced-motion: no-preference) {
  .portraits-animated img {
    opacity: 0;
    transform: translateY(20px) scale(0.92);
    transition: opacity 1s ease, transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--portrait-delay, 0ms);
  }
  .portraits-animated.portraits-revealed img {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: portrait-float var(--portrait-duration, 7s) ease-in-out infinite;
    animation-delay: calc(1.4s + var(--portrait-delay, 0ms));
    animation-play-state: paused;
  }
  .portraits-animated.portraits-revealed.portraits-running img {
    animation-play-state: running;
  }
}
@keyframes portrait-float {
  0%, 100% { translate: 0 0; }
  50% { translate: var(--portrait-drift, 3px) -7px; }
}

.hero-sound {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--paper);
  border-radius: 50%;
  color: var(--paper);
  background: var(--olive);
  box-shadow: 0 8px 24px rgba(24, 31, 13, 0.35);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.hero-sound:hover,
.hero-sound:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(24, 31, 13, 0.45);
}
.hero-sound:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 3px;
}
.hero-sound:active {
  transform: translateY(0) scale(0.96);
}
.hero-sound svg {
  display: block;
}
.hero-sound .hero-sound-on {
  display: none;
}
.hero-sound.hero-sound-on-state {
  background: var(--paper);
  color: var(--olive);
}
.hero-sound.hero-sound-on-state .hero-sound-on {
  display: block;
}
.hero-sound.hero-sound-on-state .hero-sound-off {
  display: none;
}

.care.carousel-ready { padding-inline: 0; }
.care.carousel-ready > .wrap { max-width: none; }
.carousel-ready .care-head { max-width: 1212px; margin-inline: auto; padding-inline: 24px; }
.care-viewport { overflow: hidden; width: 100%; }
.carousel-ready .care-grid { display: flex; gap: 18px; width: max-content; will-change: transform; }
.carousel-ready .care-card { flex: 0 0 450px; width: 450px; height: 570px; aspect-ratio: auto; }
.carousel-ready .care-card p { font-size: 17px; bottom: 24px; left: 24px; right: 24px; }
.care-open { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; cursor: zoom-in; }
.care-open:focus-visible { outline: 3px solid var(--paper); outline-offset: -7px; }
.care-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%; color: var(--ink); background: transparent; font: 24px/1 Arial, sans-serif; cursor: pointer; }
.care-dialog { padding: 56px 24px 24px; width: min(92vw, 700px); max-height: 92svh; border: 0; border-radius: 8px; color: var(--ink); background: var(--paper); }
.care-dialog::backdrop { background: #12180fe0; }
.care-dialog img { width: 100%; height: min(65svh, 650px); object-fit: contain; }
.care-dialog p { margin: 20px 0 0; font-size: 16px; line-height: 1.5; }
.care-close { position: absolute; right: 10px; top: 6px; border: 0; font-size: 32px; }
html.care-modal-open { overflow: hidden; }

.approach-river { position: relative; }
.journey-ready .step { position: relative; }
.journey-ready .step::before { background: transparent !important; border-color: transparent; }
.journey-stop { position: absolute; width: var(--journey-size); height: var(--journey-size); border: 2px solid var(--line); border-radius: 50%; overflow: hidden; pointer-events: none; background: var(--paper); }
.journey-stop { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.journey-liquid {
  position: absolute;
  inset: 0;
  /* Overlap the wave by 1px to prevent a subpixel rendering seam. */
  background: linear-gradient(to bottom, transparent calc(8% - 1px), var(--olive) calc(8% - 1px));
  transform: translateY(var(--journey-level, 108%));
}
.journey-liquid::before {
  content: "";
  position: absolute;
  top: -8%;
  left: 0;
  width: 200%;
  height: 16%;
  background: var(--olive);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8 Q25 0 50 8 T100 8 V16 H0 Z'/%3E%3C/svg%3E");
  mask-size: 50% 100%;
  mask-repeat: repeat-x;
  animation: journey-wave 4s linear infinite;
  animation-play-state: paused;
}
.journey-visible .journey-liquid::before { animation-play-state: running; }
.journey-liquid::after {
  content: "";
  position: absolute;
  top: 99%;
  left: 0;
  width: 100%;
  height: 20%;
  background: var(--olive);
}
@keyframes journey-wave {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .journey-liquid::before { animation: none; }
}
.journey-stop { display: none; }
.journey-ready .journey-stop { display: block; }
@media (max-width: 1100px) {
  .carousel-ready .care-card { flex-basis: 360px; width: 360px; height: 455px; }
}
@media (max-width: 760px) {
  .carousel-ready .care-head { margin-bottom: 32px; }
  .carousel-ready .care-card { flex-basis: min(78vw, 360px); width: min(78vw, 360px); height: 410px; }
  .carousel-ready .care-card p { font-size: 15px; left: 18px; right: 18px; }
  .journey-stop { border-width: 1px; }
}