/* story3d/hero/switch.css — the /when-to-switch-it/ hero loop, "The switch" (2026-10-20). Namespaced .swh; nothing here
   reaches the stories or the other loops. The box keeps the old SVG art's 23:19 aspect (the .art container
   sets it). The dial's three words are real HTML pills (white, navy Inter 600), placed at the rest pose by
   the HTML and moved by switch.js while the 3D runs. Amber and orange are only shapes and light. */
.swh{position:absolute;inset:0;}
.swh-view{position:absolute;inset:0;}
.swh-still,.swh-gl{position:absolute;inset:0;width:100%;height:100%;display:block;}
.swh-still{object-fit:contain;}
.swh-gl{opacity:0;}
.swh.is-3d .swh-gl{opacity:1;}
.swh.is-3d .swh-still{visibility:hidden;}
.swh-labels{position:absolute;inset:0;pointer-events:none;}
.swh-label{
  position:absolute;white-space:nowrap;
  background:#fff;color:var(--navy,#1E3A5F);font-family:var(--sans,'Inter',sans-serif);font-size:14px;font-weight:600;
  letter-spacing:-.005em;line-height:1;padding:9px 14px 10px;border-radius:999px;border:1px solid rgba(30,58,95,.10);
  box-shadow:0 1px 2px rgba(30,58,95,.08),0 10px 24px -10px rgba(30,58,95,.35),0 0 0 0 transparent;
}
/* pause / play: the stories' motion button (44x44, white, navy icon) */
.swh-pause{position:absolute;right:0;bottom:0;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  background:#fff;color:var(--navy,#1E3A5F);border:1px solid rgba(30,58,95,.14);
  box-shadow:0 1px 2px rgba(30,58,95,.06),0 10px 22px -12px rgba(30,58,95,.4);}
.swh-pause[hidden]{display:none;}
.swh-pause .i-play{display:none;}
.swh-pause[data-paused] .i-pause{display:none;}
.swh-pause[data-paused] .i-play{display:block;}
.swh-pause:focus-visible{outline:2px solid var(--navy,#1E3A5F);outline-offset:3px;}
@media (hover:hover) and (pointer:fine){ .swh-pause:hover{background:var(--canvas,#F7F7F7);} }
@media (max-width:860px){
  .swh-label{font-size:12px;padding:7px 10px 8px;}
}
@media (prefers-reduced-motion:reduce){ .swh-pause{display:none;} }
html.s3d-capture .swh-pause{display:none;}