/* Load after reference-layout.css. The moving text owns its transform. */
.therapist-marquee {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}
.therapist-more.therapist-marquee,
.therapist-more:has(> .marquee-track) {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
}
.therapist-marquee > .marquee-track,
.therapist-more > .marquee-track {
  display: inline-block;
  width: max-content;
  max-width: none;
  box-sizing: content-box;
  padding-left: 100%;
  white-space: nowrap;
  vertical-align: top;
  animation: berger-scroll-marquee 10s linear infinite;
  will-change: transform;
}
@keyframes berger-scroll-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.therapist-card:focus-within .marquee-track {
  animation-play-state: paused;
}

/* A photo stays a normal link. Its decoration never intercepts a tap. */
.therapist-photo-link {
  position: relative;
  display: block;
  overflow: hidden;
  transition: background-color .6s ease, box-shadow .6s ease;
}
.therapist-photo-link > img {
  opacity: 1;
  transition: transform .6s ease, opacity .35s ease;
}
.therapist-card:hover .therapist-photo img { transform: none; }
.therapist-photo-overlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  padding: 18px 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 1;
  color: rgb(99, 99, 99);
  background: rgba(255, 255, 255, 0);
  text-align: center;
  pointer-events: none;
  transition: background-color .35s ease;
}
.therapist-photo-overlay h3 {
  margin: 0;
  opacity: 0;
  color: rgb(99, 99, 99);
  font: 400 clamp(18px, 2vw, 25px)/1.5 "Yu Mincho", "Hiragino Mincho ProN", serif;
  letter-spacing: .12em;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s ease;
}
.therapist-photo-overlay p {
  margin: 0;
  opacity: 0;
  color: rgb(99, 99, 99);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .03em;
  transform: translateY(18px);
  transition: opacity .6s ease .05s, transform .6s ease .05s;
}
.therapist-photo-link:focus-within > img { opacity: .4; }
.therapist-photo-link:focus-within .therapist-photo-overlay { background-color: rgba(255, 255, 255, .32); }
.therapist-photo-link:focus-within .therapist-photo-overlay h3,
.therapist-photo-link:focus-within .therapist-photo-overlay p { opacity: 1; transform: translateY(0); }
@media (hover: hover) and (pointer: fine) {
  .therapist-card .therapist-photo-link:hover > img { opacity: .4; transform: none; }
  .therapist-photo-link:hover .therapist-photo-overlay { background-color: rgba(255, 255, 255, .32); }
  .therapist-photo-link:hover .therapist-photo-overlay h3,
  .therapist-photo-link:hover .therapist-photo-overlay p { opacity: 1; transform: translateY(0); }
}
@media (hover: none), (pointer: coarse) {
  .therapist-photo-link:active > img { opacity: .4; transition-duration: .12s; }
  .therapist-photo-link:active .therapist-photo-overlay { background-color: rgba(255, 255, 255, .32); transition-duration: .12s; }
  .therapist-photo-link:active .therapist-photo-overlay h3,
  .therapist-photo-link:active .therapist-photo-overlay p { opacity: 1; transform: translateY(0); transition-duration: .12s; }
}

/* The observer toggles the card; each information row follows in sequence. */
.motion-ready .therapist-card[data-motion] .therapist-info > .therapist-category,
.motion-ready .therapist-card[data-motion] .therapist-info > h3,
.motion-ready .therapist-card[data-motion] .therapist-info > .therapist-description,
.motion-ready .therapist-card[data-motion] .therapist-info > .therapist-more {
  opacity: 0;
  transform: translateY(11px);
  transition: opacity .6s ease, transform .6s ease;
}
.motion-ready .therapist-card[data-motion] .therapist-info > .therapist-category { transition-delay: .06s; }
.motion-ready .therapist-card[data-motion] .therapist-info > h3 { transition-delay: .13s; }
.motion-ready .therapist-card[data-motion] .therapist-info > .therapist-description { transition-delay: .2s; }
.motion-ready .therapist-card[data-motion] .therapist-info > .therapist-more { transition-delay: .27s; }
.motion-ready .therapist-card[data-motion].is-visible .therapist-info > .therapist-category,
.motion-ready .therapist-card[data-motion].is-visible .therapist-info > h3,
.motion-ready .therapist-card[data-motion].is-visible .therapist-info > .therapist-description,
.motion-ready .therapist-card[data-motion].is-visible .therapist-info > .therapist-more {
  opacity: 1;
  transform: translateY(0);
}
.motion-ready .section-heading[data-motion] {
  transition-duration: 1.5s;
  transition-timing-function: ease;
}
.section-pill-link, .hero-button, .contact-button, .contents-card,
.contents-card strong, .contents-card small, .therapist-more {
  transition: color .5s ease, background-color .5s ease, border-color .5s ease, box-shadow .5s ease, transform .5s ease;
}
.news-photo img { transition: transform .6s ease, opacity .35s ease; }

@media (prefers-reduced-motion: reduce) {
  .therapist-marquee,
  .therapist-more.therapist-marquee,
  .therapist-more:has(> .marquee-track) {
    overflow: visible;
    white-space: normal;
    text-align: center;
  }
  .therapist-marquee > .marquee-track,
  .therapist-more > .marquee-track {
    display: block;
    width: auto;
    max-width: 100%;
    padding-left: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    animation: none;
    transform: none;
    will-change: auto;
  }
  .motion-ready .therapist-card[data-motion] .therapist-info > .therapist-category,
  .motion-ready .therapist-card[data-motion] .therapist-info > h3,
  .motion-ready .therapist-card[data-motion] .therapist-info > .therapist-description,
  .motion-ready .therapist-card[data-motion] .therapist-info > .therapist-more {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .motion-ready .section-heading[data-motion] { transition: none; }
  .therapist-photo-link, .therapist-photo-link > img, .therapist-photo-overlay,
  .therapist-photo-overlay h3, .therapist-photo-overlay p, .news-photo img,
  .section-pill-link, .hero-button, .contact-button, .contents-card,
  .contents-card strong, .contents-card small, .therapist-more { transition: none; }
  .therapist-photo-overlay h3, .therapist-photo-overlay p { transform: none; }
}

/* Run text only while its card can be seen. */
.therapist-card .marquee-track { animation-play-state:paused; }
.therapist-card.marquee-running .marquee-track { animation-play-state:running; }
.therapist-card:focus-within .marquee-track { animation-play-state:paused; }

/* Banners overlap and dissolve instead of sliding horizontally. */
.event-carousel .news-grid.is-fade-carousel {
  display:grid; grid-template-columns:minmax(0,1fr); grid-auto-flow:row;
  grid-auto-columns:auto; gap:0; overflow:hidden; scroll-snap-type:none;
  touch-action:pan-y; position:relative;
}
.event-carousel .is-fade-carousel > .news-card,
.motion-ready .event-carousel .is-fade-carousel > .news-card[data-motion] {
  grid-area:1 / 1; z-index:0; min-width:0; width:100%;
  opacity:0; transform:none; pointer-events:none;
  transition:opacity .6s ease; transition-delay:0s; will-change:opacity;
}
.event-carousel .is-fade-carousel > .news-card.is-active,
.motion-ready .event-carousel .is-fade-carousel > .news-card.is-active[data-motion] {
  z-index:2; opacity:1; transform:none; pointer-events:auto;
}
.event-carousel .carousel-arrow { transition:opacity .35s ease,background-color .5s ease; }
.news-card:hover .news-photo img { transform:none; }
body { animation:berger-page-arrive 1s ease both; }
@keyframes berger-page-arrive { from{opacity:0} to{opacity:1} }
.menu-button span { transition:transform .5s ease,top .5s ease,opacity .35s ease; }
.mobile-menu { transition:opacity .5s ease,visibility .5s ease,transform .5s ease; }
.motion-ready .therapist-card[data-motion] .schedule-status { transition:opacity .6s ease .34s; }
.motion-ready .therapist-card[data-motion]:not(.is-visible) .schedule-status { opacity:0; }
@media(prefers-reduced-motion:reduce) {
  body { animation:none; }
  .event-carousel .is-fade-carousel > .news-card,
  .motion-ready .event-carousel .is-fade-carousel > .news-card[data-motion],
  .menu-button span,.mobile-menu { transition:none; }
  .motion-ready .therapist-card[data-motion] .schedule-status { opacity:1; transition:none; }
}