/* A shared room and a quiet sound route connect the two sample screens. */
.hero .hero-visual::before { inset: 8% 0 0; z-index: -2; border-radius: 46% 46% 38% 38%; background: radial-gradient(ellipse at 58% 48%, #edb89a40, #dce7d940 48%, transparent 73%); }
.hero .hero-visual > .orbit, .hero .hero-visual > .star, .hero .hero-visual > .connection-path { display: none; }
.hero-scene { position: absolute; inset: -18px -5px 0; z-index: -1; pointer-events: none; }
.hero-scene-room, .hero-scene-route { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.hero-scene-room { filter: drop-shadow(0 24px 35px #4266530a); }
.hero-scene-route { overflow: hidden; }
.hero-route-shadow { stroke: #fffdfa; stroke-opacity: .7; stroke-width: 7; }
.hero-route-line { stroke: #426653; stroke-opacity: .36; stroke-width: 1.5; }
.hero-route-traveller { stroke: #9d583c; stroke-width: 5; stroke-linecap: round; stroke-dasharray: .8 99.2; stroke-dashoffset: -42; }
.hero-sound-bridge { position: absolute; left: 50%; top: 51%; width: 100px; height: 40px; translate: -50% -50%; z-index: 1; overflow: visible; pointer-events: none; }
.hero .phone-baby { z-index: 2; }
.hero .phone-parent { z-index: 3; }
.hero .scene-note { z-index: 4; top: 3px; padding: 8px 12px; background: #fffdfad9; border: 1px solid #d1d9cd80; border-radius: 14px; box-shadow: 0 5px 14px #303d3505; }
.hero .visual-caption { z-index: 4; }

.motion-enabled[data-motion="playing"] .hero.motion-active .hero-route-traveller { animation: hero-sound-travel 8s linear infinite; }
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-bridge-wave { transform-box: fill-box; transform-origin: center; animation: hero-bridge-wave 1.9s ease-in-out infinite alternate; }
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-bridge-wave:nth-child(even) { animation-delay: -.7s; }
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-bridge-wave:nth-child(3) { animation-delay: -1.3s; }
.motion-enabled[data-motion="playing"] .hero.motion-active .hero-route-node { transform-box: fill-box; transform-origin: center; animation: hero-route-beacon 4.6s ease-in-out infinite; }
@keyframes hero-sound-travel { from { stroke-dashoffset: -42; } to { stroke-dashoffset: -142; } }
@keyframes hero-bridge-wave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
@keyframes hero-route-beacon { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }

@media (max-width: 1200px) {
  .hero-scene { inset: -8px -3px -12px; }
  .hero-sound-bridge { width: 80px; }
  .hero .scene-note { top: 0; padding: 7px 10px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .hero-scene { inset: -2px -2px -42px; }
  .hero .scene-note { top: 8px; left: 42%; }
  .hero-sound-bridge { top: 39%; width: 66px; }
}
@media (max-width: 700px) {
  .hero-scene { inset: 9px 0 0; }
  .hero-scene-room { filter: none; }
  .hero-scene-leaves { display: none; }
  .hero .hero-visual::before { inset: 5px 0 0; }
  .hero .scene-note { top: -3px; left: 50%; width: max-content; max-width: 100%; min-height: 29px; padding: 4px 9px; translate: -50% 0; font-size: 9px; gap: 6px; border-radius: 20px; }
  .hero .scene-note > .icon { width: 15px; height: 15px; flex-shrink: 0; }
  .hero .scene-note > span { gap: 3px; }
  .hero-sound-bridge { width: 60px; height: 28px; top: 52%; }
  .hero-bridge-ring { fill: #edf0e6; fill-opacity: 1; stroke-opacity: .12; }
  .hero-route-shadow { stroke-width: 5; }
  .hero-route-line { stroke-width: 2; }
  .hero-route-traveller { stroke-width: 6; }
}
@media (max-width: 350px) {
  .hero .scene-note { font-size: 8.5px; gap: 4px; padding-inline: 8px; }
  .hero-sound-bridge { width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene *, .hero-sound-bridge * { animation: none !important; }
}