/* Coaster look v2 (msgs 1981, 1989, 1998): Valeria's coasters (halftone dots, bold flat color, thick ink lines, tilted coasters)
   with the ORIGINAL fonts (Bebas Neue, Playfair italic, Lato) and earth tones: olive green + mustard yellow lead, red only in her art
   and tiny accents. Only loaded by the v2 build (TSP_LOOK=coaster); everything is scoped to .look-coaster. */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
@property --sw{syntax:'<percentage>';inherits:false;initial-value:0%}
.look-coaster{--cream:#f8eedb;--paper:#efe0c2;--ink:#2a2118;--rust:#b4472b;--rustdeep:#9b3a22;--green:#5d8a55;--greendeep:#3c5f37;--olive:#74783a;
  --butter:#f1c84b;--mustard:#dfa92e;--apricot:#f6e2a0;--mint:#a8c493;--sage:#c9d6a0;--peach:#e9b27a;--pink:#e3a58d;--sky:#a9c8b8;--lilac:#d9c79b;
  --dots:radial-gradient(rgba(42,33,24,.16) 1.3px,transparent 1.7px) 0 0/7px 7px}
.look-coaster body{background:var(--cream);background-image:radial-gradient(rgba(93,138,85,.12) 1.1px,transparent 1.5px);background-size:7px 7px}
/* type: the old fonts, with a coaster-style offset print */
.look-coaster h1,.look-coaster h2{color:var(--greendeep);text-shadow:3px 3px 0 var(--butter)}
.look-coaster .h1{font-size:96px;letter-spacing:.03em;text-shadow:3px 3px 0 var(--butter),6px 6px 0 var(--ink)}
.look-coaster .h1 em{font-family:'Playfair Display',Georgia,serif;font-style:italic;text-transform:none;letter-spacing:0;color:var(--mustard);text-shadow:3px 3px 0 var(--ink)}
.look-coaster .sec h2,.look-coaster .sec .h2{font-size:58px}
.look-coaster h3{color:var(--ink)}
.look-coaster .head .ital{color:var(--olive);font-size:21px}
.look-coaster .rule i{background:var(--green);height:3px}.look-coaster .rule b{background:var(--mustard);border:2px solid var(--ink);border-radius:50%;transform:none;width:12px;height:12px}
/* top bar + header */
.look-coaster .announce{background:var(--greendeep);color:var(--cream)}
.look-coaster .header{background:var(--butter);border-bottom:3px solid var(--ink)}
.look-coaster .nav a,.look-coaster .more summary{color:var(--ink)}
.look-coaster .nav a[aria-current]{color:var(--greendeep);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;text-decoration-color:var(--green)}
/* buttons */
.look-coaster .btn{border-width:3px;box-shadow:5px 5px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.look-coaster .btn:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.look-coaster .btn--fill,.look-coaster .order{background:var(--green);color:var(--cream)}
.look-coaster .order{border-width:3px}
.look-coaster .btn--mint{background:var(--butter)}
.look-coaster .btn--cream{background:var(--cream)}
.look-coaster .stamp{border-color:var(--greendeep);color:var(--greendeep);background:var(--cream)}
/* hero: a fan of her coasters with the jar photo on top */
.look-coaster .fan{min-height:460px}
.look-coaster .fan__t{position:absolute;width:62%;height:auto;border-radius:22px;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.look-coaster .fan__t1{left:-6%;top:2%;transform:rotate(-12deg)}
.look-coaster .fan__t2{right:-4%;top:-4%;transform:rotate(9deg)}
.look-coaster .fan__t3{right:2%;bottom:-6%;transform:rotate(-5deg)}
.look-coaster .fan__photo{position:relative;z-index:2;width:54%;margin:70px auto 0;box-shadow:8px 8px 0 var(--greendeep);border-width:3px;transform:rotate(3deg)}
.js.look-coaster .fan__t{animation:czToss .9s cubic-bezier(.2,1.25,.4,1) both}
.js.look-coaster .fan__t1{--from:-60vw;--spin:-200deg}
.js.look-coaster .fan__t2{--from:60vw;--spin:220deg;animation-delay:.14s}
.js.look-coaster .fan__t3{--from:40vw;--spin:160deg;animation-delay:.28s}
.js.look-coaster .fan__photo{animation:czDrop .7s .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes czToss{from{opacity:0;translate:var(--from) -30px;rotate:var(--spin);box-shadow:30px 30px 18px rgba(0,0,0,.25)}60%{opacity:1}}
@keyframes czDrop{from{opacity:0;scale:1.25;box-shadow:24px 24px 20px rgba(0,0,0,.25)}}
.look-coaster .badge{background:var(--butter);border:3px dashed var(--greendeep);outline:3px solid var(--butter);color:var(--greendeep);left:-14px;bottom:-24px}
.look-coaster .frame img{filter:none}
.look-coaster .hero__sub{color:var(--ink)}
/* ticker + bands */
.look-coaster .ticker{background:var(--green);border-width:3px}
.look-coaster .ticker__run{color:var(--cream)}
.look-coaster .slogan{background:var(--butter);border-width:3px;position:relative;overflow:hidden}
.look-coaster .slogan:before{content:"";position:absolute;inset:0;background:radial-gradient(var(--mustard) 2.2px,transparent 2.6px) 0 0/9px 9px;
  -webkit-mask:linear-gradient(115deg,#000 0,transparent 38%,transparent 62%,#000);mask:linear-gradient(115deg,#000 0,transparent 38%,transparent 62%,#000)}
.look-coaster .slogan .wrap{position:relative;z-index:1}
.look-coaster .slogan__big{color:var(--greendeep);text-shadow:3px 3px 0 var(--cream),6px 6px 0 var(--ink);font-size:76px;line-height:1}
.look-coaster .slogan__sub{color:var(--ink)}
/* cards: each salsa on an earthy coaster color */
.look-coaster .card{border:3px solid var(--ink);border-radius:22px;box-shadow:6px 6px 0 var(--ink);background:var(--cream)}
.look-coaster .card__ph{border-bottom:3px solid var(--ink);background:var(--sage)}
.look-coaster .card:nth-child(2) .card__ph{background:var(--butter)}.look-coaster .card:nth-child(3) .card__ph{background:var(--mint)}.look-coaster .card:nth-child(4) .card__ph{background:var(--peach)}
.look-coaster .card:nth-child(n){background:var(--cream)}
.look-coaster .card__ph img{filter:none}
.look-coaster .card .ital{color:var(--olive)}
.look-coaster .heat{color:var(--olive)}
.look-coaster .dot{border-color:var(--ink)}.look-coaster .dot.on{background:var(--rust)}
@media (hover:hover){.look-coaster .card:hover{transform:rotate(-1.5deg) translateY(-6px);box-shadow:10px 12px 0 var(--ink)}}
/* coaster panels: her art (or new drawings) on a rounded colored square, tossed onto the page */
.look-coaster figure.cz{position:relative;display:block;width:min(380px,84vw);aspect-ratio:1;margin:0 auto 26px;border-radius:26px;
  background:var(--cz);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);transform:rotate(var(--tilt));overflow:hidden;padding:7%;box-sizing:border-box}
.look-coaster figure.cz:before{content:"";position:absolute;inset:0;background:var(--dots);opacity:.55;pointer-events:none}
.look-coaster figure.cz>img,.look-coaster figure.cz>svg{position:relative;width:100%;height:100%;object-fit:contain;display:block}
.look-coaster figure.cz>img{height:90%}
.look-coaster .cz__wm{position:absolute;right:6%;bottom:4.5%;width:44%;height:5%;background:url(/img/coaster/wordmark.png) right center/contain no-repeat}
.js.look-coaster figure.cz{opacity:0}
.js.look-coaster figure.cz.in{opacity:1;animation:czLand .8s cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes czLand{from{opacity:0;transform:translateY(-40px) rotate(calc(var(--tilt) * -8)) scale(1.18);box-shadow:26px 30px 22px rgba(0,0,0,.22)}
  55%{opacity:1}to{transform:rotate(var(--tilt))}}
/* the art "prints" in as halftone dots that grow until solid */
.js.look-coaster figure.cz>img,.js.look-coaster figure.cz>svg{-webkit-mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 50% 50%/10px 10px;
  mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 50% 50%/10px 10px}
.js.look-coaster figure.cz.in>img,.js.look-coaster figure.cz.in>svg{animation:czPrint 1.1s .35s ease-in forwards}
@keyframes czPrint{to{--r:8px}}
@media (hover:hover){.look-coaster figure.cz.in:hover{transform:rotate(0) translateY(-6px) scale(1.03);box-shadow:12px 14px 0 var(--ink);transition:transform .25s,box-shadow .25s}}
.look-coaster .cz__svg .tw{animation:czTw 1.6s ease-in-out infinite alternate;transform-box:fill-box;transform-origin:center}
@keyframes czTw{to{transform:scale(.6) rotate(20deg)}}
/* chill band */
.look-coaster .chill{background:var(--green);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:44px 0;overflow:hidden;position:relative}
.look-coaster .chill:before{content:"";position:absolute;inset:0;background:radial-gradient(var(--greendeep) 2px,transparent 2.4px) 0 0/9px 9px;
  -webkit-mask:radial-gradient(circle at 85% 40%,#000,transparent 55%);mask:radial-gradient(circle at 85% 40%,#000,transparent 55%)}
.look-coaster .chill__in{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.look-coaster .chill p{color:var(--cream);font-size:18px;max-width:440px}
.look-coaster .chill p.chill__big{font-family:'Bebas Neue',Impact,sans-serif;font-size:96px;line-height:.92;letter-spacing:.03em;max-width:none;color:var(--butter);
  text-shadow:4px 4px 0 var(--ink);margin:0 0 16px}
.look-coaster .chill img{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.js.look-coaster .chill img{-webkit-mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/10px 10px;mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/10px 10px}
.js.look-coaster .chill img.in{animation:czPrint 1.3s .2s ease-in forwards}
/* coaster wall: dealt onto the table one by one */
.look-coaster .wall{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;max-width:1080px;margin:0 auto}
.look-coaster .wall>*{--t:-3deg;transform:rotate(var(--t));transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.look-coaster .wall>*:nth-child(3n+2){--t:2.5deg}.look-coaster .wall>*:nth-child(3n){--t:-1deg}
.look-coaster .wall img{width:100%;height:auto;border-radius:20px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);display:block}
.look-coaster .wall__new{position:relative;aspect-ratio:1;border-radius:20px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:var(--cz);padding:8%;box-sizing:border-box}
.look-coaster .wall__new svg{width:100%;height:90%;display:block}
.js.look-coaster .wall>*{opacity:0}
.js.look-coaster .wall.in>*{opacity:1;animation:czDeal .7s calc(var(--n,0) * 90ms) cubic-bezier(.2,1.3,.4,1) backwards}
@keyframes czDeal{from{opacity:0;transform:translate(-40vw,-60px) rotate(-260deg) scale(.9)}50%{opacity:1}}
@media (hover:hover){.look-coaster .wall>*:hover{transform:rotate(0) translateY(-8px) scale(1.06);z-index:2}
  .look-coaster .wall img:hover,.look-coaster .wall__new:hover{box-shadow:10px 12px 0 var(--ink)}}
.look-coaster .stickers{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 0}
.look-coaster .stickers span{font-family:'Bebas Neue',Impact,sans-serif;font-size:22px;letter-spacing:.1em;padding:8px 18px;border-radius:999px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);color:var(--ink);background:var(--cream)}
.look-coaster .stickers span:nth-child(2){background:var(--butter);transform:rotate(-3deg)}.look-coaster .stickers span:nth-child(3){background:var(--sage);transform:rotate(2deg)}
.look-coaster .stickers span:nth-child(4){background:var(--green);color:var(--cream);transform:rotate(-1deg)}
/* sign-up + footer */
.look-coaster .sign{background:var(--sage)}
.look-coaster .scallop--pink{background:radial-gradient(circle at 12px 12px,var(--sage) 11.5px,transparent 12px) 0 0/24px 12px repeat-x}
.look-coaster .sign__wm{width:min(260px,60vw);height:auto;display:block;margin-bottom:6px}
.look-coaster .socials a{background:var(--butter);border-width:3px}
.look-coaster .footer{background:var(--greendeep);color:var(--cream);border-top:3px solid var(--ink)}
.look-coaster .footer a{color:var(--cream)}
.look-coaster .bestlist a{border-width:3px;border-radius:18px}
@media (max-width:760px){
  .look-coaster .h1{font-size:64px}
  .look-coaster .sec h2,.look-coaster .sec .h2{font-size:42px}
  .look-coaster .slogan__big{font-size:50px}
  .look-coaster .fan{min-height:0;margin-top:20px}
  .look-coaster .fan__photo{margin-top:56px}
  .look-coaster .wall{grid-template-columns:repeat(2,1fr);gap:14px}
  .look-coaster .chill__in{grid-template-columns:1fr}.look-coaster .chill p{margin:0 auto;text-align:center}
  .look-coaster .chill p.chill__big{font-size:68px;text-align:center}
}

/* ===== Page-change animation (msg 1998): a halftone wipe, then the page's coaster is flicked onto the table ===== */
.look-coaster .tx{transform:none;transition:none;background:none}
.look-coaster .tx.on,.look-coaster .tx.out{transform:none}
.czx__bg{position:absolute;inset:0;background:var(--txbg);
  -webkit-mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/26px 26px,linear-gradient(110deg,#000 var(--sw),transparent calc(var(--sw) + 1%));
  mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/26px 26px,linear-gradient(110deg,#000 var(--sw),transparent calc(var(--sw) + 1%))}
.czx__bg:after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(42,33,24,.18) 2px,transparent 2.4px) 0 0/12px 12px}
.tx.on .czx__bg{animation:czWipe .55s cubic-bezier(.5,0,.3,1) forwards}
@keyframes czWipe{to{--r:19px;--sw:101%}}
/* the page's coaster lands, then comes to life (msg 2006). Layers from src/coaster/make_anim.py; px here = % of the coaster */
.czl{position:relative;width:min(400px,82vw);aspect-ratio:1;border-radius:22px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);overflow:hidden;opacity:0}
.tx.on .czl{animation:czlIn .55s .2s cubic-bezier(.2,1.35,.4,1) both}
@keyframes czlIn{from{opacity:0;transform:translateY(50vh) rotate(16deg) scale(.7)}to{opacity:1;transform:rotate(-2.5deg)}}
.tx svg.czl__art{display:block;width:100%;height:100%;overflow:hidden}
.czl__art *{transform-box:view-box}
.czl__art .fx-st,.czl__art .fx-heart,.czl__art .fx-note,.czl__art .fx-mwah,.czl__art .fx-hiss{opacity:0}
.tx.on .fx-st{animation:czlTw .5s var(--d) cubic-bezier(.3,1.6,.5,1) both}
@keyframes czlTw{from{opacity:1;transform:scale(0) rotate(-90deg)}to{opacity:1;transform:none}}
@keyframes czPop{from{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.15) rotate(4deg)}to{transform:none}}
/* carry: the snake slithers out of the boot around the square, then wiggles */
.snk{stroke-dasharray:100;stroke-dashoffset:100}
.tx.on .snk{animation:snkDraw 1.5s .6s linear both}
@keyframes snkDraw{to{stroke-dashoffset:0}}
.snk-all{opacity:0}.tx.on .snk-all{animation:czShow .3s 2.1s both}
@keyframes czShow{to{opacity:1}}
.czl--boot .L-head{transform-origin:25px 36px}
.tx.on .czl--boot .L-head{animation:snkHead 1.5s .6s linear both,snkWig .5s 2.15s ease-in-out}
@keyframes snkHead{0%{transform:translate(48px,7px);opacity:0}7%{opacity:1}18.6%{transform:translate(48px,-18px)}37.2%{transform:translate(23px,-18px)}
  67.4%{transform:translate(23px,23px)}83.6%{transform:translate(0,23px)}100%{transform:none;opacity:1}}
@keyframes snkWig{25%{transform:rotate(-9deg)}50%{transform:rotate(7deg) translateY(-1px)}75%{transform:rotate(-4deg)}}
.czl--boot .L-boot{transform-origin:58px 85px}
.tx.on .czl--boot .L-boot{animation:bootHop .5s .55s ease-out,bootHop .4s 2.1s ease-out}
@keyframes bootHop{30%{transform:scale(1.04,.93)}65%{transform:scale(.98,1.05) rotate(-2deg)}}
.tx.on .fx-hiss{animation:hiss .5s 2.2s steps(2) both}
@keyframes hiss{0%{opacity:0}50%{opacity:1}100%{opacity:1}}
/* home: the lime flies onto the glass, the record spins, "Salsa & chill" pops, chips hop, notes float up */
.czl--chill .L-record{transform-origin:57.5px 51.75px}
.tx.on .czl--chill .L-record{animation:czSpin 2s .5s cubic-bezier(.25,.1,.3,1) both}
@keyframes czSpin{from{transform:rotate(-480deg)}to{transform:none}}
.czl--chill .L-lime{transform-origin:47.3px 28.2px}
.tx.on .czl--chill .L-lime{animation:limeIn .8s .7s cubic-bezier(.3,1.25,.5,1) both}
@keyframes limeIn{from{transform:translate(45px,-45px) rotate(-540deg)}to{transform:none}}
.czl--chill .L-text{transform-origin:72px 18px}
.tx.on .czl--chill .L-text{animation:czPop .5s 1.15s cubic-bezier(.3,1.5,.5,1) both}
.czl--chill .L-chips{transform-origin:42px 82px}
.tx.on .czl--chill .L-chips{animation:chipHop .32s 1.4s ease-out 3}
@keyframes chipHop{50%{transform:translateY(-4px) rotate(-5deg)}}
.czl--chill .L-glass{transform-origin:29px 78px}
.tx.on .czl--chill .L-glass{animation:glassSway 1.1s 1.3s ease-in-out}
@keyframes glassSway{25%{transform:rotate(3deg)}70%{transform:rotate(-2deg)}}
.czl--chill .L-bowl{transform-origin:66px 80px}
.tx.on .czl--chill .L-bowl{animation:bootHop .45s 1.6s ease-out}
.tx.on .fx-note{animation:noteUp 1.3s var(--d) ease-out both}
@keyframes noteUp{0%{opacity:0;transform:translate(0,6px)}20%{opacity:1}100%{opacity:0;transform:translate(9px,-24px) rotate(12deg)}}
/* salsas: the chili lips come together for a kiss, pucker twice: MWAH */
.czl--lips .L-upper,.czl--lips .L-lower{transform-origin:50px 50px}
.tx.on .czl--lips .L-upper{animation:lipU 1.75s .5s cubic-bezier(.45,0,.3,1) both}
.tx.on .czl--lips .L-lower{animation:lipL 1.75s .5s cubic-bezier(.45,0,.3,1) both}
@keyframes lipU{0%,22%{transform:translateY(-15px) rotate(-5deg)}34%{transform:translateY(2px)}44%{transform:scale(.86,1.12)}54%{transform:none}
  64%{transform:scale(.86,1.12)}74%,100%{transform:none}}
@keyframes lipL{0%,22%{transform:translateY(15px) rotate(5deg)}34%{transform:translateY(-2px)}44%{transform:scale(.86,1.12)}54%{transform:none}
  64%{transform:scale(.86,1.12)}74%,100%{transform:none}}
.czl--lips .fx-mwah{transform-origin:50px 84px}
.tx.on .fx-mwah{animation:mwah .5s 1.35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes mwah{from{opacity:1;transform:scale(0) rotate(-14deg)}to{opacity:1;transform:rotate(-5deg)}}
.tx.on .fx-heart{animation:heartUp 1.2s var(--d) ease-out both}
@keyframes heartUp{0%{opacity:0;transform:scale(0)}25%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:translateY(-16px) scale(1)}}
/* macha: the chili struts in on her legs, sways her hips, heel sparkles */
.czl--legs .walk{transform-origin:44px 82px}
.tx.on .czl--legs .walk{animation:strut 1.35s .45s cubic-bezier(.3,.6,.4,1) both,hips .45s 1.85s ease-in-out 2}
@keyframes strut{from{transform:translateX(-80px)}to{transform:none}}
@keyframes hips{25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
.tx.on .czl--legs .bob{animation:bob .17s .45s ease-in-out 8 alternate}
@keyframes bob{to{transform:translateY(-2.5px)}}
.czl--legs .L-legs{transform-origin:44px 48px}
.tx.on .czl--legs .L-legs{animation:step .17s .45s ease-in-out 8 alternate}
@keyframes step{from{transform:skewX(10deg)}to{transform:skewX(-10deg)}}
/* recipes: a hand carries the tray up into view, it wobbles, the drink splashes */
.tx.on .czl--tray .rise{animation:rise .75s .5s cubic-bezier(.2,1.3,.4,1) both}
@keyframes rise{from{transform:translateY(75px)}to{transform:none}}
.czl--tray .wob{transform-origin:50px 48px}
.tx.on .czl--tray .wob{animation:wob 1s 1.15s ease-in-out}
@keyframes wob{20%{transform:rotate(-6deg)}45%{transform:rotate(4.5deg)}70%{transform:rotate(-2deg)}}
.czl--tray .L-drops{transform-origin:44px 16px}
.tx.on .czl--tray .L-drops{animation:splash .55s 1.3s cubic-bezier(.3,1.6,.5,1) both,splash .5s 1.95s cubic-bezier(.3,1.6,.5,1)}
@keyframes splash{from{transform:translateY(12px) scale(0)}60%{transform:translateY(-3px) scale(1.2)}to{transform:none}}
/* FAQ: the nopal grows pad by pad, then the flower blooms */
.czl--nopal .L-p0{transform-origin:47.5px 85.5px;--d:.5s}.czl--nopal .L-p1{transform-origin:50px 60px;--d:.75s}
.czl--nopal .L-p2{transform-origin:41px 58px;--d:.95s}.czl--nopal .L-p3{transform-origin:57px 63px;--d:1.05s}
.czl--nopal .L-p4{transform-origin:42px 29px;--d:1.2s}.czl--nopal .L-p5{transform-origin:52.5px 26px;--d:1.3s}
.czl--nopal .L-p6{transform-origin:64px 44px;--d:1.4s}.czl--nopal .L-flower{transform-origin:76px 29px;--d:1.6s}
.tx.on .czl--nopal image:not(.L-base){animation:grow .5s var(--d) cubic-bezier(.3,1.6,.5,1) both}
@keyframes grow{from{transform:scale(0)}to{transform:none}}
.tx.on .czl--nopal .L-flower{animation:bloom .6s var(--d) cubic-bezier(.3,1.7,.5,1) both}
@keyframes bloom{from{transform:scale(0) rotate(-150deg)}to{transform:none}}
.czl--nopal .sway{transform-origin:47.5px 86px}
.tx.on .czl--nopal .sway{animation:hips .7s 2s ease-in-out}
/* find us: tumbleweeds roll in, cacti spring up, the cowgirl dances, stars twinkle, POW */
.tx.on .czl--cowgirl .L-wind{animation:windIn .5s .5s ease-out both}
@keyframes windIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.czl--cowgirl .L-cactus1{transform-origin:20px 53.8px}.czl--cowgirl .L-cactus2{transform-origin:76.5px 70.5px}
.tx.on .czl--cowgirl .L-cactus1{animation:spring .55s .55s cubic-bezier(.3,1.6,.5,1) both}
.tx.on .czl--cowgirl .L-cactus2{animation:spring .55s .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes spring{from{transform:scaleY(0)}to{transform:none}}
.czl--cowgirl .L-tumble1{transform-origin:21px 63.6px}.czl--cowgirl .L-tumble2{transform-origin:77.6px 81.8px}
.tx.on .czl--cowgirl .L-tumble1{animation:tumL 1s .5s cubic-bezier(.2,.7,.3,1) both}
.tx.on .czl--cowgirl .L-tumble2{animation:tumR 1.1s .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes tumL{from{transform:translateX(-40px) rotate(-420deg)}to{transform:none}}
@keyframes tumR{from{transform:translateX(45px) rotate(420deg)}to{transform:none}}
.czl--cowgirl .L-girl{transform-origin:48px 90px}
.tx.on .czl--cowgirl .L-girl{animation:dance .34s .7s ease-in-out 5 alternate}
@keyframes dance{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-2px)}}
.czl--cowgirl .L-star1{transform-origin:14px 11px}.czl--cowgirl .L-star2{transform-origin:82px 7px}.czl--cowgirl .L-star3{transform-origin:19px 79.5px}
.tx.on .czl--cowgirl .L-star1{animation:czlTw .5s 1.15s cubic-bezier(.3,1.6,.5,1) both}
.tx.on .czl--cowgirl .L-star2{animation:czlTw .5s 1.3s cubic-bezier(.3,1.6,.5,1) both}
.tx.on .czl--cowgirl .L-star3{animation:czlTw .5s 1.45s cubic-bezier(.3,1.6,.5,1) both}
.czl--cowgirl .L-pow{transform-origin:36.6px 44px}
.tx.on .czl--cowgirl .L-pow{animation:czPop .45s 1.75s cubic-bezier(.3,1.5,.5,1) both}
.look-coaster .tx.out .czl{animation:czAway .45s cubic-bezier(.6,0,.8,.4) forwards}
.look-coaster .tx.out .czx__bg{animation:czUnwipe .45s .15s ease-in forwards}
.look-coaster .tx.leave .czl{animation:czLeave .36s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes czLeave{from{opacity:1;transform:rotate(-2.5deg)}to{opacity:0;transform:translateY(-120vh) rotate(25deg);visibility:hidden}}
@keyframes czAway{from{opacity:1;transform:rotate(-2.5deg)}to{opacity:1;transform:translateY(-120vh) rotate(25deg)}}
@keyframes czUnwipe{from{--r:19px;--sw:101%}to{--r:0px;--sw:101%}}
/* next page: the same coaster flies off and the dots shrink away */
.look-coaster.tx-cover body:before{content:"";position:fixed;inset:0;z-index:1000;background:var(--txbg,var(--green));animation:czUncover .45s .05s ease-in forwards;
  -webkit-mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/26px 26px;mask:radial-gradient(circle,#000 var(--r),transparent calc(var(--r) + .6px)) 0 0/26px 26px;--r:19px}
@keyframes czUncover{from{--r:19px}to{--r:0px;visibility:hidden}}
.look-coaster.tx-cover body:after{content:"";position:fixed;z-index:1001;left:50%;top:50%;width:min(300px,68vw);aspect-ratio:1;border-radius:22px;
  border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);background:var(--txcz,none) center/cover;transform:translate(-50%,-50%) rotate(-4deg);
  animation:czFlyOff .55s .08s cubic-bezier(.6,-.3,.8,.4) forwards}
.look-coaster.tx-cover:not([style*="--txcz"]) body:after{display:none}
@keyframes czFlyOff{to{transform:translate(-50%,-50%) translate(30vw,-130vh) rotate(40deg);visibility:hidden}}

/* ===== First-visit intro: three coasters dealt onto the table, then the wordmark stamps on ===== */
.look-coaster .intro{background:var(--butter)}
.look-coaster .intro:before{content:"";position:absolute;inset:0;background:radial-gradient(var(--mustard) 2.2px,transparent 2.6px) 0 0/10px 10px;opacity:.8}
.czi{position:relative;width:min(340px,80vw)}
.czi__table{position:relative;width:78%;margin:0 auto;aspect-ratio:1}
.czi__c{position:absolute;inset:0;width:100%;height:100%;border-radius:22px;border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);
  animation:czFlick .6s cubic-bezier(.18,1.15,.4,1) both}
.czi__c1{--rot:-16deg;--fx:-120vw;--fy:10vh;--spin:-500deg;animation-delay:.1s}
.czi__c2{--rot:12deg;--fx:120vw;--fy:-20vh;--spin:480deg;animation-delay:.32s}
.czi__c3{--rot:-3deg;--fx:0;--fy:-120vh;--spin:-380deg;animation-delay:.56s}
.czi__wm{display:block;width:100%;height:auto;margin-top:34px;
  animation:czStamp .4s 1.25s cubic-bezier(.3,1.6,.5,1) both}
@keyframes czFlick{from{opacity:1;transform:translate(var(--fx),var(--fy)) rotate(var(--spin)) scale(1.15);box-shadow:40px 50px 26px rgba(0,0,0,.25)}
  to{opacity:1;transform:rotate(var(--rot))}}
@keyframes czStamp{from{opacity:0;transform:scale(2.2) rotate(-8deg)}to{opacity:1;transform:rotate(-2deg)}}
.czi__line{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--greendeep);font-size:21px;margin-top:10px;
  animation:fadeUp .4s 1.6s both}
.look-coaster .intro__enter{display:none}
@media (prefers-reduced-motion:reduce){
  .js.look-coaster figure.cz,.js.look-coaster .wall>*{opacity:1;animation:none}
  .js.look-coaster figure.cz>img,.js.look-coaster figure.cz>svg,.js.look-coaster .chill img{-webkit-mask:none;mask:none;animation:none}
  .js.look-coaster .fan__t,.js.look-coaster .fan__photo,.look-coaster .cz__svg .tw{animation:none}
  .look-coaster.tx-cover body:after{display:none}
}
/* msg 2023: illustrations only. Hero top = her boot coaster (no photo); story = the molcajete coaster */
.look-coaster .fan__top{display:block;height:auto;padding:0;background:none;border-radius:22px;border:3px solid var(--ink)}
.look-coaster .story__art{margin:0;transform:rotate(-2deg);max-width:420px}
.look-coaster .story__art .wall__new{box-shadow:8px 8px 0 var(--ink)}
.look-coaster .story__art figcaption{font-family:'Bebas Neue',Impact,sans-serif;letter-spacing:.08em;font-size:20px;color:var(--cream);text-align:center;margin-top:14px}