/* V10.19 — one organic cycle: double heartbeat, then an outward sonar wave */
.msk-sonar{
  --msk-sonar-rgb:240,204,143;
  isolation:isolate;
}
.world--vde .msk-sonar,.detail-shell--vde .msk-sonar{--msk-sonar-rgb:159,224,238}
.world--water .msk-sonar,.detail-shell--water .msk-sonar{--msk-sonar-rgb:156,221,235}
.world--coaching .msk-sonar,.detail-shell--coaching .msk-sonar{--msk-sonar-rgb:231,184,112}

.msk-sonar-waves{
  position:absolute!important;
  z-index:8!important;
  inset:0!important;
  width:auto!important;
  height:auto!important;
  aspect-ratio:auto!important;
  display:block!important;
  border:0!important;
  border-radius:inherit!important;
  background:none!important;
  box-shadow:none!important;
  pointer-events:none!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.msk-sonar-waves::before,
.msk-sonar-waves>i{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  border:1px solid rgba(var(--msk-sonar-rgb),.48);
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  transform:scale(1);
  box-shadow:0 0 14px rgba(var(--msk-sonar-rgb),.24),inset 0 0 12px rgba(var(--msk-sonar-rgb),.09);
}
.msk-sonar-waves>i{
  border:0;
  opacity:0;
  box-shadow:none;
  animation:msk-sonar-heartbeat 1.55s cubic-bezier(.2,.72,.24,1) infinite;
}
.msk-sonar-waves::before{animation:msk-sonar-wave-one 7.4s cubic-bezier(.15,.62,.2,1) infinite;filter:blur(.45px)}
.msk-sonar-waves::after{display:none!important}

@keyframes msk-sonar-heartbeat{
  0%,4%,27%,100%{opacity:0;transform:scale(1);box-shadow:0 0 0 0 rgba(var(--msk-sonar-rgb),0)}
  8%{opacity:1;transform:scale(1.018);box-shadow:0 0 0 1px rgba(var(--msk-sonar-rgb),.92),0 0 25px 8px rgba(var(--msk-sonar-rgb),.28),inset 0 0 20px rgba(var(--msk-sonar-rgb),.13)}
  12%{opacity:.16;transform:scale(1.002);box-shadow:0 0 0 1px rgba(var(--msk-sonar-rgb),.15),0 0 8px rgba(var(--msk-sonar-rgb),.08)}
  17%{opacity:.82;transform:scale(1.01);box-shadow:0 0 0 1px rgba(var(--msk-sonar-rgb),.75),0 0 19px 5px rgba(var(--msk-sonar-rgb),.22),inset 0 0 14px rgba(var(--msk-sonar-rgb),.1)}
  23%{opacity:0;transform:scale(1);box-shadow:0 0 0 0 rgba(var(--msk-sonar-rgb),0)}
}
@keyframes msk-sonar-wave-one{
  0%,22%{opacity:0;transform:scale(1)}
  27%{opacity:.3;transform:scale(1.015)}
  40%{opacity:.18;transform:scale(1.17)}
  53%{opacity:.07;transform:scale(1.34)}
  59%{opacity:0;transform:scale(1.46)}
  60%,100%{opacity:0;transform:scale(1.46)}
}

.is-sonar-awake>.msk-sonar-waves>i,
.is-sonar-awake .msk-sonar>.msk-sonar-waves>i{animation-duration:1.18s}
.is-sonar-awake>.msk-sonar-waves::before,
.is-sonar-awake .msk-sonar>.msk-sonar-waves::before{animation-duration:6.8s;filter:blur(.45px) brightness(1.15)}

/* These two circles already carry the actual diagnostic meaning. The child
   only brightens their existing edge, so no permanent duplicate ring appears. */
.story-chapter--repair.is-visible .repair-focus span.msk-sonar{
  animation:none!important;
  box-shadow:inset 0 0 30px rgba(226,174,105,.08),0 0 38px rgba(226,174,105,.23)!important;
}
.story-chapter--repair .repair-focus span>.msk-sonar-waves>i,
.story-chapter--repair .repair-focus span>.msk-sonar-waves::before{
  animation-duration:4.4s!important;
  animation-timing-function:cubic-bezier(.22,.65,.25,1)!important;
}
.story-chapter--repair .repair-focus span:nth-child(2)>.msk-sonar-waves>i,
.story-chapter--repair .repair-focus span:nth-child(2)>.msk-sonar-waves::before{animation-delay:-2.2s!important}
.story-chapter--repair.is-sonar-awake .repair-focus span>.msk-sonar-waves>i,
.story-chapter--repair.is-sonar-awake .repair-focus span>.msk-sonar-waves::before{animation-duration:4s!important}
.story-chapter--repair.is-sonar-awake .repair-focus span:nth-child(2)>.msk-sonar-waves>i,
.story-chapter--repair.is-sonar-awake .repair-focus span:nth-child(2)>.msk-sonar-waves::before{animation-delay:-2s!important}

.msk-sonar.is-sonar-hit>.msk-sonar-waves{animation:msk-sonar-shock .62s cubic-bezier(.14,.75,.18,1) both}
@keyframes msk-sonar-shock{
  0%{filter:brightness(1);transform:scale(1)}
  18%{filter:brightness(1.8);transform:scale(1.055)}
  32%{transform:scale(.985)}
  58%{transform:scale(1.025)}
  100%{filter:brightness(1);transform:scale(1)}
}

/* The repair evidence lens is drawn by a pseudo element. This real field follows it. */
.msk-sonar-field{
  position:absolute!important;
  z-index:4!important;
  left:50%;
  top:50%;
  width:clamp(150px,17vw,300px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.repair-evidence>.msk-sonar-field{
  left:var(--scan-x,69%);
  top:var(--scan-y,50%);
  transition:left .26s ease-out,top .26s ease-out;
}
.detail-shell--repair .detail-photo-break:not(.repair-evidence)>.msk-sonar-field{
  left:62%;top:24%;width:min(25vw,370px);
}
.detail-shell--water .detail-photo-break>.msk-sonar-field{
  left:52%;top:47%;width:min(33vw,520px);
}

@media(max-width:780px){
  .msk-sonar-waves::before{animation-duration:7.8s}
}
@media(prefers-reduced-motion:reduce){
  .msk-sonar-waves::before,.msk-sonar-waves::after,.msk-sonar-waves>i,.msk-sonar.is-sonar-hit>.msk-sonar-waves{animation:none!important}
  .msk-sonar-waves>i{opacity:0!important}
}