/* Ocelot: the map floating in space (space-map.js adds the .sm-on class to #reach)
   The land is cut out of the map (usmap-land.png, same framing as usmap.png) and drifts over a live starfield. */

#reach .sm-sky,#reach .sm-front,#reach .sm-land{display:none}
#reach.sm-on .sm-front{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
#reach.sm-on{position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 55% at 64% 52%,rgba(200,131,42,.13),transparent 70%),radial-gradient(55% 60% at 12% 18%,rgba(40,92,66,.28),transparent 70%),radial-gradient(50% 50% at 92% 90%,rgba(40,92,66,.18),transparent 70%),#040A07}
#reach.sm-on .sm-sky{display:block;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
#reach.sm-on>.wrap{position:relative;z-index:1}

/* the map: no card, tilted back a little, drifting (JS sets the live transform) */
#reach.sm-on .reachwrap{perspective:1600px;perspective-origin:50% 35%;padding:18px 0 30px}
#reach.sm-on .mapstage{overflow:visible;border-radius:0;box-shadow:none;will-change:transform;transform:rotateX(12deg)}
#reach.sm-on .mapstage img:not(.sm-land){opacity:0}
#reach.sm-on .sm-land{display:block;position:absolute;left:0;top:0;width:100%;height:100%;
  filter:drop-shadow(0 1.5px 0 #8A5E1C) drop-shadow(0 2.5px 0 #5E3E10) drop-shadow(0 0 26px rgba(224,166,75,.3))}

/* the ping travels further, out past the coasts into space */
#reach.sm-on .pulse{animation-name:smPing}
@keyframes smPing{0%{width:2%;opacity:0}10%{opacity:.85}100%{width:84%;opacity:0}}
@media(prefers-reduced-motion:reduce){#reach.sm-on .pulse{animation:none;opacity:0}}
/* phones: a lighter glow around the land, cheaper to draw while the map moves */
@media(max-width:760px){#reach.sm-on .sm-land{filter:drop-shadow(0 1.5px 0 #7A5218) drop-shadow(0 0 12px rgba(224,166,75,.28))}}