/* v2 only (11/9 msg 2186): the parts Andrew kept from Fable's round 4. The rest of round 4 was undone.
   1) the snake that slides across above the sign-off  2) the sunburst behind the tab animations  3) small spot icons */
.look-coaster{--red:#e0261b}
.look-coaster .spot{display:inline-block;flex:none}

/* small icons: slogan lines, roasted/ground/jarred, market tickets */
.look-coaster .slogan__big span{display:inline-flex;align-items:center;gap:.25em}
.look-coaster .slogan__big .spot{width:.85em;height:.85em;filter:drop-shadow(2px 2px 0 var(--ink))}
.js.look-coaster .slogan__big.in .spot{animation:spotPop .6s .2s cubic-bezier(.3,1.7,.5,1) backwards}
.look-coaster .slogan__big span:nth-child(2) .spot{animation-delay:.34s}.look-coaster .slogan__big span:nth-child(3) .spot{animation-delay:.48s}
@keyframes spotPop{from{transform:scale(0) rotate(-40deg)}}
.look-coaster .steps .spot{display:block;width:46px;height:46px;margin:0 auto 8px;filter:drop-shadow(2px 2px 0 var(--ink))}
.look-coaster .ticket h3{display:flex;align-items:center;gap:8px}
.look-coaster .ticket h3 .spot{width:30px;height:30px}

/* the snake lies across the sign-off and slides in when you reach the bottom */
.look-coaster .sign{overflow:hidden;padding-top:30px}
.snake{display:flex;align-items:flex-end;max-width:1100px;margin:0 auto 22px;padding:0 20px}
.snake__tail{width:62px;height:auto;flex:none;margin-right:-2px}
.snake__head{width:98px;height:auto;flex:none;margin-left:-1px}
.snake__body{flex:1;height:27px;margin-bottom:8px;box-sizing:border-box;border-top:3.4px solid var(--red);border-bottom:3.4px solid var(--red);
  background:linear-gradient(135deg,var(--red) 25%,transparent 25.5%) 0 0/16px 16px repeat-x,linear-gradient(225deg,var(--red) 25%,transparent 25.5%) 0 0/16px 16px repeat-x,#fdf0dc}
.js .sign .snake{transform:translateX(-110%)}
.js .sign .snake.in{transform:none;transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}
.snake.in .snake__head{animation:snakeNod .5s 1.5s ease-in-out 2;transform-origin:20% 80%}
@keyframes snakeNod{50%{transform:rotate(-7deg)}}

/* tab animations: same coasters, on a slow sunburst */
.look-coaster .tx:after{content:"";position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax 0 0 -85vmax;border-radius:50%;z-index:1;opacity:0;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.2) 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mask:radial-gradient(circle,#000 0,transparent 62%)}
.look-coaster .tx.on:after{animation:raysIn .5s .45s ease-out forwards,raysSpin 40s linear infinite}
@keyframes raysIn{to{opacity:1}}
@keyframes raysSpin{to{transform:rotate(360deg)}}
.look-coaster .tx.out:after{opacity:0!important;animation:none}
.look-coaster .tx .czl{position:relative;z-index:2}

@media (max-width:760px){
  .snake{padding:0 10px}
  .snake__tail{width:46px}.snake__head{width:73px}.snake__body{height:20px;margin-bottom:6px;border-width:2.6px;background-size:12px 12px,12px 12px,auto}
  .look-coaster .steps .spot{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .look-coaster .spot,.snake.in .snake__head{animation:none!important}
  .js .sign .snake{transform:none;transition:none}
}
.look-coaster .tx{overflow:hidden}

/* 11/10 msg 2427: story section had too much of one green. Coaster now pale yellow, steps on cream cards, Find Us cowgirl on yellow */
.look-coaster .story h2{color:var(--cream);text-shadow:3px 3px 0 var(--ink)}
.look-coaster .story__kicker{color:var(--cream)}
.look-coaster .story p{color:#fbf5e8}
.look-coaster .steps{gap:14px;margin-top:26px}
.look-coaster .steps div{background:var(--cream);border:2.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:14px 12px;text-align:center}
.look-coaster .steps b{color:var(--rust);text-shadow:none}
.look-coaster .steps span{color:var(--ink)}
@media (max-width:760px){
  .look-coaster .steps{gap:10px}
  .look-coaster .steps div{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;text-align:left;padding:10px 12px}
  .look-coaster .steps .spot{grid-row:span 2;width:40px;height:40px;margin:0}
}

/* 11/10 msg 2441 (trial, may be undone): greens + yellows a touch softer, more pastel retro. Undo = delete this block (tag before-pastel) */
.look-coaster{--green:#608c58;--greendeep:#3e613a;--butter:#f1ca56;--mustard:#e0ac39}  /* v4 = halfway v1-v3 (msg 2447); v3 was #648f5c #41643e #f2cd62 #e1af44 (msg 2445); v2 was #6b9563 #476a45 #f3d27a #e3b65a */