/* WYMMS v2 — the decode layer.  Held back until Oct 3. */

#storybar{position:sticky;top:0;z-index:60;text-align:center;padding:9px 12px;
  background:#12304d;opacity:0;transition:opacity .6s ease .3s;pointer-events:none}
#storybar a{color:#ffe04a;font-family:"Caveat",cursive;font-size:23px;
  text-decoration:none;letter-spacing:.4px}
body.decoded #storybar{opacity:1;pointer-events:auto}

/* everything she already read, faded back */
#fade{position:fixed;inset:0;background:#f7f6f3;opacity:0;pointer-events:none;
  z-index:5;transition:opacity 1.6s ease}
body.decoded #fade{opacity:.58}

#pagewrap{transition:margin-right .9s cubic-bezier(.4,.9,.3,1)}
@media (min-width:1100px){ body.decoded #pagewrap{margin-right:312px} }

/* marker strokes */
.egg{position:relative;z-index:8;border-radius:.22em;
  padding:.08em .32em;margin:0 -.32em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:linear-gradient(104deg,
    rgba(255,224,60,0) .5%, rgba(255,224,60,.92) 2.2%,
    rgba(255,216,40,.75) 94%, rgba(255,224,60,0) 99%);
  background-repeat:no-repeat;background-size:0% 100%;
  transition:background-size .5s cubic-bezier(.4,.9,.3,1),color .35s ease .15s}
.egg.lit{background-size:100% 100%;color:#12304d}

/* handwritten annotations */
.egg-note{position:absolute;z-index:20;font-family:"Caveat",cursive;
  font-size:24px;line-height:1.15;color:#141414;width:min(258px, calc(100vw - 34px));
  background:rgba(247,246,243,.88);padding:3px 7px;border-radius:3px;
  opacity:0;transform:translateY(5px) rotate(-1.4deg);
  transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.egg-note.lit{opacity:1;transform:translateY(0) rotate(-1.4deg)}
.egg-note .egg-aside{display:block;font-size:19px;color:#6b5a1c;margin-top:1px}

#leaders{position:absolute;inset:0;z-index:15;pointer-events:none;overflow:visible}
#leaders path{fill:none;stroke:#2f2f2f;stroke-width:2.1;stroke-linecap:round;
  opacity:.85}

/* the acronym, last */
#wymms{position:fixed;inset:0;z-index:90;display:flex;align-items:center;
  justify-content:center;background:rgba(247,246,243,.96);opacity:0;
  pointer-events:none;transition:opacity 1s ease}
#wymms.lit{opacity:1;pointer-events:auto}
#wymms .inner{text-align:center;padding:0 22px}
#wymms .row{display:flex;gap:clamp(8px,2.4vw,26px);justify-content:center;
  flex-wrap:wrap}
#wymms .lt{font-family:"Caveat",cursive;text-align:center}
#wymms .lt b{display:block;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(30px,7vw,64px);font-weight:800;color:#12304d;line-height:1}
#wymms .lt span{display:block;font-size:clamp(17px,3.4vw,30px);color:#c0392b;
  margin-top:5px;opacity:0;transition:opacity .45s ease}
#wymms .lt.lit span{opacity:1}
#wymms .dt{margin-top:26px;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:clamp(13px,2.4vw,16px);letter-spacing:.18em;text-transform:uppercase;
  color:#12304d;opacity:0;transition:opacity .8s ease}
#wymms .dt.lit{opacity:1}
#wymms .dt span{display:block;font-family:"Caveat",cursive;font-size:22px;
  letter-spacing:0;text-transform:none;color:#6b5a1c;margin-top:4px}
#wymms .q{font-family:"Caveat",cursive;font-size:clamp(26px,5.4vw,46px);
  color:#12304d;margin-top:18px;opacity:0;transition:opacity .8s ease}
#wymms .q.lit{opacity:1}
#wymms .go{margin-top:26px;opacity:0;transition:opacity .8s ease}
#wymms .go.lit{opacity:1}
#wymms .go a{font-family:"Caveat",cursive;font-size:26px;color:#c0392b;
  border-bottom:2px solid #ffe04a;text-decoration:none;padding-bottom:2px}

#replay{position:fixed;right:14px;bottom:14px;z-index:95;font-family:"Caveat",cursive;
  font-size:19px;color:#8a9aa8;background:#fff;border:1px solid #dcdcd6;
  border-radius:18px;padding:5px 14px;cursor:pointer;opacity:0;
  transition:opacity .6s ease}
body.decoded #replay{opacity:1}

@media (prefers-reduced-motion:reduce){
  .egg,.egg-note,#fade,#wymms,#storybar{transition:none!important}
}

#wymms .dismiss{margin-top:22px;font-family:"Caveat",cursive;font-size:19px;
  color:#8a9aa8;opacity:0;transition:opacity .8s ease}
#wymms .dismiss.lit{opacity:1}

/* narrow screens: notes sit beside their egg, so they have to be compact and
   opaque enough to read over the table rows they cover */
@media (max-width:1099px){
  .egg-note{font-size:21px;line-height:1.08;padding:3px 6px;
    background:rgba(247,246,243,.97)}
  .egg-note .egg-aside{font-size:16px;line-height:1.1}
}