/* Shared motion rules for every matching control and card. */
.clarity {
  --motion-ease: cubic-bezier(.2,.75,.25,1);
  --motion-fast: 180ms;
  --motion-medium: 240ms;
  --motion-button-hover: #1d49cc;
  --motion-button-shadow: 0 8px 22px #2455df24;
}
/* Light buttons on blue sections keep their light surface in every state. */
.clarity .closing {
  --motion-button-hover: #edf2ff;
  --motion-button-shadow: 0 8px 22px #091d6030;
}
html { scrollbar-gutter: stable; }
.clarity .motion-control {
  transform: translateY(0) scale(1);
  transition: transform var(--motion-fast) var(--motion-ease),
    color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
  -webkit-tap-highlight-color: transparent;
}
.clarity .motion-control.btn { filter: none; }
.clarity .motion-control > span[aria-hidden="true"] {
  transition: transform var(--motion-fast) var(--motion-ease);
}
.clarity .motion-control:focus-visible { transform: translateY(-2px); }
.clarity .motion-control:focus-visible > span[aria-hidden="true"] { transform: translate(2px,-2px); }
.clarity .btn.motion-control:focus-visible { box-shadow: var(--motion-button-shadow); background-color: var(--motion-button-hover); }
@media (hover:hover) and (pointer:fine) {
  .clarity .motion-control:hover { transform: translateY(-2px); }
  .clarity .motion-control:hover > span[aria-hidden="true"] { transform: translate(2px,-2px); }
  .clarity .btn.motion-control:hover { box-shadow: var(--motion-button-shadow); background-color: var(--motion-button-hover); }
  .clarity :is(.header-action,.text-link).motion-control:hover { color: var(--accent); border-color: var(--accent); }
  .clarity :is(.menu-button,.close-modal).motion-control:hover { background-color: #2455df0d; }
}
.clarity .motion-control:active,
.clarity .motion-control[data-pressed="true"] { transform: translateY(0) scale(.98); }
.clarity .motion-control:active > span[aria-hidden="true"],
.clarity .motion-control[data-pressed="true"] > span[aria-hidden="true"] { transform: translate(1px,-1px); }
/* Service and video cards use the same spotlight layer. */
.clarity .motion-card {
  position: relative;
  isolation: isolate;
  transition: transform var(--motion-medium) var(--motion-ease),
    box-shadow var(--motion-medium) ease, border-color var(--motion-medium) ease;
}
.clarity .motion-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,35%),#2455df1c,transparent 72%);
  opacity: 0;
  transition: opacity var(--motion-medium) ease;
}
.clarity .motion-card:focus-within,
.clarity .motion-card[data-lit="true"] { box-shadow: 0 12px 28px #1637660d; border-color: #2455df66; }
.clarity .motion-card:focus-within::before,
.clarity .motion-card[data-lit="true"]::before { opacity: 1; }
@media (hover:hover) and (pointer:fine) {
  .clarity .motion-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #1637660d; border-color: #2455df66; }
  .clarity .motion-card:hover::before { opacity: 1; }
}
/* Ambient light stays behind the hero copy. Content itself is never animated in. */
.clarity .hero-copy { position: relative; isolation: isolate; }
.clarity .hero-light {
  position: absolute;
  z-index: -1;
  top: -60px;
  right: -40px;
  width: min(450px,95%);
  height: 380px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse,#2455df24 0%,#5a80ed10 38%,transparent 70%);
  filter: blur(22px);
  animation: rachko-ambient 12s ease-in-out infinite;
  animation-play-state: paused;
}
.clarity .hero-copy { overflow: clip; }
.clarity .hero.is-in-view .hero-light { animation-play-state: running; }
@keyframes rachko-ambient {
  0%,100% { transform: translate(-14px,-8px) scale(.96); }
  50% { transform: translate(22px,18px) scale(1.08); }
}
/* Decorative voice waves, not an audio volume meter. */
.clarity .voice-wave { display: inline-flex; gap: 5px; height: 32px; align-items: center; color: var(--accent); flex-shrink: 0; }
.clarity .voice-wave > span { display: block; width: 3px; height: var(--bar-h); background: currentColor; border-radius: 3px; transform-origin: center; }
.clarity #practice .section-head .eyebrow { display: flex; gap: 18px; align-items: center; }
.clarity .voice-wave.is-active > span,
.clarity .media-card.is-playing .voice-wave > span { animation: rachko-voice 1200ms ease-in-out infinite; animation-delay: var(--bar-delay); }
.clarity .voice-wave--small { height: 18px; gap: 3px; margin-left: 10px; }
.clarity .voice-wave--small > span { width: 2px; height: calc(var(--bar-h) * .65); }
.clarity .video-meta > span:first-child { display: inline-flex; gap: 0; align-items: center; }
@keyframes rachko-voice {
  0%,100% { transform: scaleY(1); }
  25% { transform: scaleY(.45); }
  55% { transform: scaleY(1.15); }
  80% { transform: scaleY(.7); }
}
/* Native dialog remains modal throughout both opening and closing. */
.clarity #booking[open] { animation: rachko-dialog-in 220ms var(--motion-ease) both; }
.clarity #booking[open]::backdrop { animation: rachko-backdrop-in 220ms ease both; }
.clarity #booking.is-closing { animation: rachko-dialog-out 160ms ease both; }
.clarity #booking.is-closing::backdrop { animation: rachko-backdrop-out 160ms ease both; }
@keyframes rachko-dialog-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rachko-dialog-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes rachko-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rachko-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (max-width:600px) {
  .clarity .hero-light { width: 320px; height: 330px; right: -45px; filter: blur(16px); }
  .clarity #practice .section-head .eyebrow { flex-wrap: wrap; gap: 10px; }
  .clarity .video-meta { gap: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .clarity :is(.motion-control,.motion-card,.motion-control > span,.motion-card::before) { transition: none !important; }
  .clarity :is(.motion-control,.motion-card):is(:hover,:focus-visible,:active,[data-pressed="true"]) { transform: none !important; }
  .clarity .motion-control > span[aria-hidden="true"] { transform: none !important; }
  .clarity :is(.hero-light,.voice-wave > span,#booking[open],#booking.is-closing) { animation: none !important; }
  .clarity #booking::backdrop { animation: none !important; }
}
/* Pause decorative loops while the tab is in the background. */
html[data-page-hidden="true"] .clarity :is(.hero-light,.voice-wave > span) { animation-play-state: paused !important; }