/* $SEED — ATTENTION: the ALERT ME stencil button in the header + the "WHILE YOU WERE AWAY" strip.
   Title and favicon are drawn in JS. Everything here stays inside the brand tokens from style.css. */

/* ---------- ALERT ME (lives in #mount-head, left of the CA pill) ---------- */
.att-btn{
  display:inline-flex;align-items:center;gap:7px;position:relative;
  border:2px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;
  padding:7px 10px;line-height:1;
  font-family:var(--stencil);font-weight:900;font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s,box-shadow .1s,background .2s,color .2s;
}
.att-btn:hover{background:var(--plate)}
.att-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.att-btn:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.att-bell{width:14px;height:14px;fill:var(--ink);transform-origin:50% 12%;flex:none}
.att-dot{width:7px;height:7px;border-radius:50%;background:var(--steel-2);border:1px solid var(--ink);flex:none}

/* a vault is dropping and alerts are still off: the bell rings, briefly, every few seconds */
.att-btn.hot .att-bell{animation:attRing 3.2s ease-in-out infinite}
.att-btn.hot{background:var(--yellow)}

/* armed */
.att-btn.on{background:var(--orange);color:#fff;border-color:var(--ink)}
.att-btn.on:hover{background:var(--orange-d)}
.att-btn.on .att-bell{fill:#fff}
.att-btn.on .att-dot{background:var(--yellow);animation:attPulse 1.2s steps(2) infinite}

/* the browser said no */
.att-btn.blocked{background:repeating-linear-gradient(-45deg,#fff 0 5px,#e5e7e3 5px 10px);color:var(--mute)}
.att-btn.blocked .att-bell{fill:var(--mute)}

@keyframes attRing{
  0%,72%,100%{transform:rotate(0)}
  76%{transform:rotate(16deg)}
  80%{transform:rotate(-13deg)}
  84%{transform:rotate(10deg)}
  88%{transform:rotate(-6deg)}
  92%{transform:rotate(3deg)}
}
@keyframes attPulse{50%{opacity:.15}}

/* ---------- WHILE YOU WERE AWAY (fixed strip over the header) ---------- */
.att-away{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:var(--yellow);color:var(--ink);
  border-bottom:4px solid var(--ink);
  box-shadow:0 10px 0 rgba(18,18,18,.16);
  transform:translateY(-110%);
  transition:transform .6s cubic-bezier(.2,1.25,.3,1);   /* heavy drop with a small bounce at the end */
  cursor:pointer;overflow:hidden;
}
.att-away.in{transform:translateY(0)}
.att-away.out{transform:translateY(-110%);transition:transform .4s cubic-bezier(.6,0,.85,.25)}
/* hazard ends, same as the ticker tape */
.att-away::before,.att-away::after{content:"";position:absolute;top:0;bottom:0;width:38px;z-index:1;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 9px,var(--yellow) 9px 18px)}
.att-away::before{left:0}
.att-away::after{right:0}
.att-away-in{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding:12px 56px 14px;max-width:1240px;margin:0 auto}
.att-away-k{font-family:var(--stencil);font-weight:900;font-size:24px;line-height:.95;letter-spacing:.03em;white-space:nowrap}
.att-away-k small{display:block;margin-top:3px;font-family:var(--body);font-weight:800;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-d)}
.att-away-items{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.att-away-items i{
  font-style:normal;font-family:var(--mono);font-weight:600;font-size:13px;
  background:var(--ink);color:#fff;padding:5px 9px;border:2px solid var(--ink);
  box-shadow:2px 2px 0 rgba(18,18,18,.35);
  animation:attStamp .5s cubic-bezier(.3,1.6,.5,1) both;
  animation-delay:calc(.3s + var(--i,0) * .09s);   /* chips stamp in one after the other */
}
.att-away-items i.hot{background:var(--orange)}
.att-away-items i.win{background:var(--won)}
/* the bar drains while the strip is up, so you know it will leave on its own; duration is set inline */
.att-away-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--ink);transform-origin:left center;animation:attDrain linear forwards}
@keyframes attStamp{0%{transform:scale(1.8) rotate(-5deg);opacity:0}60%{transform:scale(.94);opacity:1}100%{transform:scale(1)}}
@keyframes attDrain{to{transform:scaleX(0)}}

/* ---------- reduced motion: same content, no ringing / stamping / bouncing ---------- */
@media (prefers-reduced-motion:reduce){
  .att-btn.hot .att-bell,.att-btn.on .att-dot{animation:none}
  .att-away{transition:transform .2s ease-out}
  .att-away.out{transition:transform .2s ease-in}
  .att-away-items i{animation:none}
}

/* ---------- phone ---------- */
@media (max-width:560px){
  .att-txt{display:none}                       /* bell + dot only; the header is tight once the CA pill is in */
  .att-btn{padding:7px 8px;gap:5px}
  .att-away::before,.att-away::after{width:26px}
  .att-away-in{padding:10px 36px 12px;gap:8px 12px}
  .att-away-k{font-size:19px}
  .att-away-items i{font-size:12px;padding:4px 7px}
}