/* C0134 Home motion layer. Section entrances are one-shot and progressive. */
.hero-scale{
  display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:24px;
  padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.78);box-shadow:0 12px 30px -26px rgba(20,40,90,.45);
  color:var(--body);font-size:15px;font-variant-numeric:tabular-nums;
}
/* The dot is static in every motion state. It is aria-hidden decoration that
   pulsed like a live feed beside a figure that is a cumulative total, not live
   telemetry; and at #25C5D8 on this near-white pill it measures about 2.1:1,
   below the 3:1 non-text floor, so it could never legibly carry state anyway.
   The static rendering is not new design: it already shipped as the
   reduced-motion state below. */
.hero-scale__signal{
  width:8px;height:8px;border-radius:50%;background:#25C5D8;flex:none;
  box-shadow:0 0 0 4px rgba(37,197,216,.12);
}
.hero-scale__label{color:var(--quiet)}
.hero-scale strong{font-size:20px;line-height:1;font-weight:600;color:var(--ink);letter-spacing:-.02em}

.ct--recorded audio{display:none}
#call-h{scroll-margin-top:112px}
#call-walkthrough{position:relative;overflow:hidden;isolation:isolate}
#call-walkthrough>.shell{position:relative;z-index:1}
.call-signal-field{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.72;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 24%,#000 88%,transparent 100%);
}
.call-signal-track,.call-signal-run{fill:none;vector-effect:non-scaling-stroke}
.call-signal-track{stroke:rgba(37,99,235,.09);stroke-width:1}
.call-signal-run{
  stroke:rgba(37,99,235,.22);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:.055 .945;animation:call-signal-route 12s linear infinite;
}
.call-signal-nodes circle{
  fill:rgba(37,99,235,.24);stroke:rgba(255,255,255,.9);stroke-width:3;
  transform-box:fill-box;transform-origin:center;animation:call-signal-node 5.6s ease-in-out infinite;
  animation-delay:calc(var(--node)*420ms);
}
.ct-player-controls{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:center;
  padding:18px 0 8px;
}
.ct-play{
  display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;
  border:1px solid var(--blue);border-radius:50%;background:var(--blue);color:#fff;cursor:pointer;
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease);
}
.ct-play:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:translateY(-1px)}
.ct-play:active{transform:translateY(0)}
.ct-play:focus-visible{outline:3px solid rgba(37,99,235,.26);outline-offset:3px}
.ct-play svg{width:20px;height:20px;fill:currentColor}
.ct-pause-icon{display:none}
.ct--recorded[data-playback="playing"] .ct-play-icon{display:none}
.ct--recorded[data-playback="playing"] .ct-pause-icon{display:block}
.ct-player-controls .ct-clock{min-width:0;padding:0}
.ct-track-wrap{position:relative;border-radius:8px}
.ct-track-wrap:focus-within{outline:2px solid var(--blue);outline-offset:3px}
.ct-scrub{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
  appearance:none;background:transparent;touch-action:pan-y;
}
.ct--recorded .ct-track{pointer-events:none}
.ct--recorded .ct-track b{transition:opacity 180ms ease,background 180ms ease}
.ct--recorded .ct-tick{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;padding:7px 4px 6px;
}
.ct--recorded .ct-tick small{font-size:11px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase}
.ct--recorded[data-audio-error="true"] .ct-play{opacity:.48;cursor:not-allowed;transform:none}

html.home-motion-active [data-home-reveal]{
  opacity:0;transform:translate3d(0,24px,0);
  will-change:opacity,transform;
}
html.home-motion-active.home-motion-ready [data-home-reveal]{
  transition:opacity 700ms cubic-bezier(.19,1,.22,1) var(--home-delay,0ms),transform 700ms cubic-bezier(.19,1,.22,1) var(--home-delay,0ms);
}
html.home-motion-active [data-home-reveal][data-home-kind="left"]{transform:translate3d(-12px,0,0)}
html.home-motion-active [data-home-reveal][data-home-kind="right"]{transform:translate3d(12px,0,0)}
html.home-motion-active [data-home-reveal][data-home-kind="scale"]{transform:translate3d(0,8px,0) scale(.985)}
html.home-motion-active [data-home-reveal][data-home-in="true"]{
  opacity:1;transform:translate3d(0,0,0) scale(1);will-change:auto;
}
html.home-motion-active .board[data-home-reveal] .tile{
  opacity:0;transform:translateX(8px);
}
html.home-motion-active.home-motion-ready .board[data-home-reveal] .tile{transition:opacity 280ms var(--ease),transform 280ms var(--ease)}
html.home-motion-active .board[data-home-in="true"] .tile{opacity:1;transform:none}
html.home-motion-active .board[data-home-in="true"] .tile:nth-child(2){transition-delay:48ms}
html.home-motion-active .board[data-home-in="true"] .tile:nth-child(3){transition-delay:96ms}
html.home-motion-active .board[data-home-in="true"] .tile:nth-child(4){transition-delay:144ms}

@keyframes call-signal-route{to{stroke-dashoffset:-1}}
@keyframes call-signal-node{0%,72%,100%{opacity:.42;transform:scale(.82)}82%{opacity:1;transform:scale(1.34)}}
@media (max-width:1399px){
  .ct-player-controls .ct-clock{display:grid;justify-content:stretch;gap:8px}
  .ct-player-controls .ct-legend{justify-self:start}
}
@media (max-width:899px){
  .call-signal-field{opacity:.38}
}
@media (min-width:521px) and (max-width:1080px){
  .hero-obj{justify-self:center;max-width:640px}
}
@media (max-width:760px){
  .hero-scale{width:100%;justify-content:center;margin-top:20px;padding:9px 12px}
}
@media (max-width:420px){
  .hero-scale{display:grid;grid-template-columns:auto 1fr auto auto;gap:8px;font-size:14px}
  .hero-scale strong{font-size:18px}
  .ct-player-controls{grid-template-columns:48px minmax(0,1fr);gap:12px;padding-top:16px}
  .ct-play{width:48px;height:48px}
}
@media (prefers-reduced-motion:reduce){
  .hero-scale__signal{animation:none}
  .call-signal-run,.call-signal-nodes circle{animation:none}
  html.home-motion-active [data-home-reveal],html.home-motion-active .board[data-home-reveal] .tile{
    opacity:1;transform:none;transition:none;will-change:auto;
  }
}
@media print{
  .ct-play{display:none}
  .ct-player-controls{grid-template-columns:minmax(0,1fr)}
  [data-home-reveal]{opacity:1!important;transform:none!important}
}
