/* Event alerts: animated icons on the globe, the details card, and the notification banner */
.alert-pin{--c:#E0A21B;position:absolute;left:0;top:0;width:28px;height:28px;display:grid;place-items:center;pointer-events:auto;z-index:3;will-change:transform}
.alert-pin.l-orange{--c:#F07A2E}
.alert-pin.l-red{--c:#E5484D}
.alert-pin .a-badge{position:relative;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;
  box-shadow:0 0 0 2px #fff,0 3px 10px rgba(0,0,0,.25);transition:transform .15s}
.alert-pin:hover .a-badge,.alert-pin:focus-visible .a-badge{transform:scale(1.15)}
.alert-pin .a-badge svg{overflow:visible}
/* a ring that keeps spreading out, twice as often for red alerts */
.alert-pin .a-ring{position:absolute;inset:2px;border-radius:50%;border:2px solid var(--c);opacity:0;animation:a-ring 2.4s ease-out infinite var(--delay,0s)}
.alert-pin .a-ring2{animation-delay:calc(var(--delay,0s) - 1.2s)}
.alert-pin.l-green .a-ring2{display:none}
@keyframes a-ring{0%{transform:scale(.8);opacity:.75}100%{transform:scale(2.3);opacity:0}}

/* each kind of event moves in its own way */
.k-quake .a-badge svg{animation:a-shake .9s ease-in-out infinite var(--delay,0s)}
@keyframes a-shake{0%,55%,100%{transform:none}60%{transform:translateX(-1.6px) rotate(-4deg)}70%{transform:translateX(1.6px) rotate(4deg)}80%{transform:translateX(-1px)}90%{transform:translateX(1px)}}
.k-tsunami .a-wave{animation:a-wave 2s ease-in-out infinite var(--delay,0s)}
@keyframes a-wave{0%,100%{transform:translateX(-1.5px)}50%{transform:translateX(2px)}}
.k-volcano .a-puff{animation:a-puff 2.2s ease-out infinite;transform-box:fill-box;transform-origin:center}
.k-volcano .a-p2{animation-delay:-.7s}.k-volcano .a-p3{animation-delay:-1.4s}
@keyframes a-puff{0%{transform:translateY(4px) scale(.5);opacity:0}30%{opacity:1}100%{transform:translateY(-4px) scale(1.3);opacity:0}}
.k-tornado .a-twist{animation:a-twist 1.4s ease-in-out infinite var(--delay,0s);transform-origin:12px 20px}
@keyframes a-twist{0%,100%{transform:skewX(-8deg) translateX(-1px)}50%{transform:skewX(8deg) translateX(1px)}}
.k-landslide .a-rock{animation:a-rock 1.8s ease-in infinite;transform-box:fill-box}
.k-landslide .a-r2{animation-delay:-.9s}
@keyframes a-rock{0%{transform:translate(-3px,-3px);opacity:0}20%{opacity:1}100%{transform:translate(2px,4px);opacity:0}}
.k-storm .a-spin{animation:a-spin 2.6s linear infinite;transform-origin:12px 12px}
@keyframes a-spin{to{transform:rotate(-360deg)}} /* counter-clockwise, like a northern-hemisphere cyclone */
.k-flood .a-bob{animation:a-bob 1.6s ease-in-out infinite var(--delay,0s)}
@keyframes a-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.8px)}}
.k-fire .a-flicker{animation:a-flicker .7s ease-in-out infinite alternate var(--delay,0s);transform-origin:12px 21px;transform-box:view-box}
@keyframes a-flicker{0%{transform:scale(1,1) skewX(0)}50%{transform:scale(.92,1.08) skewX(3deg)}100%{transform:scale(1.04,.94) skewX(-3deg)}}

/* Kay asked for these to move, so they keep moving even with the device's "reduce motion" setting on */
@media (prefers-reduced-motion:reduce){
  .alert-pin .a-ring{animation-duration:2.4s!important}
  .k-quake .a-badge svg{animation-duration:.9s!important}
  .k-tsunami .a-wave{animation-duration:2s!important}
  .k-volcano .a-puff{animation-duration:2.2s!important}
  .k-tornado .a-twist{animation-duration:1.4s!important}
  .k-landslide .a-rock{animation-duration:1.8s!important}
  .k-storm .a-spin{animation-duration:2.6s!important}
  .k-flood .a-bob{animation-duration:1.6s!important}
  .k-fire .a-flicker{animation-duration:.7s!important}
}

/* details card, beside the icon */
.alert-card{position:fixed;left:0;top:0;z-index:7;width:min(300px,calc(100vw - 24px));padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.alert-card .ac-head{display:flex;align-items:flex-start;gap:10px}
.ac-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:#E0A21B}
.alert-card.l-orange .ac-icon{background:#F07A2E}.alert-card.l-red .ac-icon{background:#E5484D}
.ac-title{flex:1;min-width:0;display:flex;flex-direction:column}
.ac-title small{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#B7791F}
.alert-card.l-orange .ac-title small{color:#C2571A}.alert-card.l-red .ac-title small{color:#D13438}
.ac-title b{font-size:14px;font-weight:800;line-height:1.3}
.ac-x{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);flex:none}
.ac-x:hover{background:var(--indigo-soft);color:var(--indigo)}
.alert-card p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.alert-card .ac-where{font-weight:700;color:var(--ink)}
.alert-card .ac-meta{font-size:11.5px;color:var(--ink-3)}
.ac-btns{display:flex;gap:8px;margin-top:4px}
.ac-btns .btn{flex:1;height:34px;font-size:12.5px;padding:0 10px}

/* notification banner: above the search box, in the open part of the map (on phones: under the top card) */
.alert-banner{position:fixed;z-index:8;--sw:clamp(260px,calc(100vw - 872px),460px);width:max(var(--sw),340px);
  left:max(calc(50% - 198px),calc(262px + max(var(--sw),340px) / 2));bottom:calc(124px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-left:4px solid #E0A21B;animation:a-drop .35s cubic-bezier(.2,.8,.2,1)}
.alert-banner.l-orange{border-left-color:#F07A2E}.alert-banner.l-red{border-left-color:#E5484D}
@keyframes a-drop{from{transform:translate(-50%,14px);opacity:0}}
.alert-banner .ab-icon{position:relative;flex:none;transform:none}
.ab-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ab-text small{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-text b{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-text span{font-size:12px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ab-show{flex:none;height:32px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--indigo);background:var(--indigo-soft)}
.ab-show:hover{background:var(--indigo);color:#fff}
.ab-x{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3)}
.ab-x:hover{background:var(--indigo-soft);color:var(--indigo)}
@media (max-width:760px){
  .alert-banner{left:12px;right:12px;width:auto;bottom:auto;top:calc(84px + env(safe-area-inset-top,0px));transform:none;animation-name:a-drop-phone}
  @keyframes a-drop-phone{from{transform:translateY(-14px);opacity:0}}
}