*{box-sizing:border-box}
/* The letterbox around the stage, for viewports that are not 16:9. The stage
   used to carry a radial gradient and a vignette over the top of it, which is
   a lovely thing on a page that fills the screen and a liability on one that
   is letterboxed: the middle of the slide was lighter than the bands beside
   it and the corners were darker, so every screenshot showed three tones of
   paper. One flat tone, stage and letterbox alike, and the page is genuinely
   one colour end to end. */
html,body{height:100%;margin:0;overflow:hidden;background:var(--paper)}
body{font-family:var(--serif);color:var(--ink)}

#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
/* Held back until deck.js has scaled the stage and the fonts have settled.
   Without this the browser paints one frame of an unscaled 1280x720 stage,
   which is the deck opening small and then jumping to size. */
html.booting #viewport{visibility:hidden}

/* ---------- the cover ---------- */
/* The deck used to start pouring the moment the page loaded, which is the one
   moment a presenter is least ready for it: still plugging in the projector,
   still finding the right window. A cover holds it until somebody asks, and
   gives the offline copy somewhere to be offered from.

   It lives on the stage, not over the browser window, so it is composed in the
   same 1280x720 as every slide, on the same left margin, and scales with them.
   Off the stage it had its own type scale and a screenful of dead paper beside
   it, and read as a form standing in front of a deck rather than as its cover. */
#cover{
  position:absolute;inset:0;z-index:12;background:var(--paper);
  padding:92px var(--pad-x) 110px;display:flex;flex-direction:column;
  justify-content:center;
}
#cover[hidden]{display:none}
/* The drawn glass and the table it stands on, behind the type rather than
   beside it: the same glass the serving slide uses, so the cover is made of
   the deck rather than of something invented for it. */
.coverart{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none}
.coverin{position:relative;z-index:1;max-width:560px}

.covermark{font-family:var(--display);font-weight:700;letter-spacing:-.02em;
  font-size:92px;line-height:.98;margin:0;color:var(--ink)}
/* The title card's rule, at the title card's width, so the cover and the slide
   that follows it are recognisably one piece of design. */
.covermark::after{content:'';display:block;width:108px;height:5px;
  background:var(--wine);margin:26px 0 0}
.coverstand{font-size:22px;font-style:italic;line-height:1.42;margin:26px 0 0;
  color:var(--ink);opacity:.8;max-width:26em}

.coverdo{display:flex;flex-direction:column;align-items:stretch;gap:13px;
  margin-top:46px;max-width:352px}
.coverdo button{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:.01em;
  padding:15px 22px 15px 26px;border-radius:5px;cursor:pointer;text-align:left;
  border:2.5px solid var(--ink);background:var(--paper-light);color:var(--ink);
  transition:transform .15s ease,background .15s ease,color .15s ease,
             border-color .15s ease,box-shadow .15s ease;
}
.coverdo button svg{flex:none;width:21px;height:21px;opacity:.9}
/* A drawn shadow rather than a blurred one: the deck has no soft edges in it
   anywhere else, and a CSS drop shadow under an ink-ruled box looks borrowed
   from a different design. */
.coverdo button{box-shadow:4px 4px 0 rgba(42,33,26,.14)}
.coverdo button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(42,33,26,.18)}
.coverdo button:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(42,33,26,.14)}
.coverdo button:focus-visible{outline:3px solid var(--wine);outline-offset:4px}

.coverdo button.primary{background:var(--wine);border-color:var(--wine);
  color:var(--paper-light);box-shadow:4px 4px 0 rgba(124,26,18,.28)}
.coverdo button.primary:hover{background:var(--wine-deep);border-color:var(--wine-deep);
  box-shadow:6px 6px 0 rgba(124,26,18,.32)}
.coverdo button.primary:active{box-shadow:2px 2px 0 rgba(124,26,18,.28)}
/* The secondary inverts instead of darkening, so the two do not both just get
   a shade deeper and stop being distinguishable. */
.coverdo button:not(.primary):hover{background:var(--ink);color:var(--paper-light)}

.coverdo button[disabled]{opacity:.55;cursor:default;transform:none;
  box-shadow:4px 4px 0 rgba(42,33,26,.1)}
/* `display:flex` above beats the user agent's rule for [hidden], so the offline
   copy went on showing a button it had already disowned. */
.coverdo button[hidden]{display:none}

#coverhint{font-size:16px;font-style:italic;line-height:1.45;margin:22px 0 0;
  color:var(--ink-soft);max-width:31em}
#coverhint.bad{color:var(--wine);font-style:normal}
@media (prefers-reduced-motion:reduce){
  .coverdo button{transition:none}
  .coverdo button:hover{transform:none}
}

#stage{
  position:relative;flex:none;width:var(--stage-w);height:var(--stage-h);
  transform-origin:center center;overflow:hidden;background:var(--paper);
}

.slide{
  position:absolute;inset:0;padding:92px var(--pad-x) 110px;
  opacity:0;visibility:hidden;transition:opacity .18s ease;
  display:flex;flex-direction:column;justify-content:flex-start;
}
/* Top-aligned, not centred. Centring floated every headline to a different
   height depending on how much copy happened to sit under it, so walking the
   deck made the title jump around the screen; a slide built up press by press
   moved it as you went. Anchored here, it lands in the same place on all
   thirty. */
.slide.on{opacity:1;visibility:visible}
.slide.intro{display:block;padding:0}

h1{font-family:var(--display);font-size:44px;line-height:1.12;margin:0 0 34px;font-weight:700;letter-spacing:-.01em}
h3{font-size:21px;margin:0 0 8px;font-weight:700}
p{font-size:19px;line-height:1.5;margin:0;color:var(--ink-soft)}
em{font-style:normal;font-weight:700;color:var(--ink)}
.kicker{position:absolute;left:var(--pad-x);bottom:52px;font-size:17px;font-style:italic;color:var(--ink-soft)}
.num{font-family:var(--display);font-size:34px;font-weight:700;color:var(--wine);margin-bottom:10px;line-height:1}

.cols{display:flex;gap:44px}
.cols>div{flex:1}
.cols.two.wide{gap:80px;max-width:1000px}
.cols.tight>div p{font-size:17px}
.cols.centred{text-align:center}
.list{line-height:1.9;display:inline-block}

/* A process read left to right: the steps of making wine, and the run of
   decisions a winemaker makes. The arrows are drawn by the rule rather than
   written into the copy, so a step can be added or dropped in content.js
   without anyone having to move a character. */
.chain{display:flex;align-items:center;gap:0;margin:0 0 34px;flex-wrap:wrap}
.chain span{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:.01em}
.chain span+span::before{content:"";display:inline-block;width:30px;height:9px;margin:0 15px;
  vertical-align:middle;background:var(--wine);
  clip-path:polygon(0 40%,62% 40%,62% 0,100% 50%,62% 100%,62% 60%,0 60%)}

/* The three-things slide is shown three times: once whole, then once for each
   of the last two boxes as they are opened. Dimming rather than hiding keeps
   the shape of the slide identical every time, so the room reads it as the
   same slide returning rather than as a new one. */
.dim{opacity:.26}

/* Anything a slide wants to build up press by press. Held at nothing until
   deck.js turns it on; see stepsOf() there. Opacity only, because these are a
   mix of HTML boxes and SVG groups and a transform means something different
   in each. */
.step{opacity:0}
.step.on{animation:stepIn .45s cubic-bezier(.2,.8,.3,1) both}
@keyframes stepIn{from{opacity:0}to{opacity:1}}

/* ---------- drawn figures ---------- */
/* Every figure is authored at a fixed size in figures.js or map.js and scaled
   here, so a slide can change how big it wants one without anyone editing a
   path. */
.fig{width:100%;height:auto;display:block}
.figrow{display:flex;align-items:flex-start;gap:0;margin-top:8px}
.figrow .figcell{flex:0 0 auto;width:104px;text-align:center}
.figrow .figcell span{display:block;margin-top:10px;font-family:var(--display);
  font-size:18px;font-weight:700}
.figrow .figarrow{flex:1 1 auto;height:9px;margin:44px 14px 0;background:var(--wine);opacity:.85;
  clip-path:polygon(0 40%,calc(100% - 16px) 40%,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,calc(100% - 16px) 60%,0 60%)}
.figrow.chain{align-items:flex-start}
.figrow.chain .chainstep{display:flex;align-items:flex-start;flex:1 1 auto}
.figrow.chain .chainstep:first-child{flex:0 0 auto}
.figrow.chain .figarrow{flex:1 1 auto;min-width:40px}
.figrow.wide{gap:56px;max-width:1120px}
.figrow.wide .figcell{width:auto;flex:1 1 0;text-align:left}
.figrow .figcell.tall .fig{width:140px}
/* A signpost is the three-things slide coming back with one box opened: the
   one in focus grows, the other two shrink and fade, so it reads as the same
   slide rather than as a new one. */
.figrow.focused .figcell .fig{width:132px;transition:width .3s ease}
.figrow.focused .figcell.dim{opacity:.34}
.figrow.focused .figcell.dim .fig{width:84px}
.figrow.focused .figcell.dim h3,.figrow.focused .figcell.dim p{font-size:18px}
.figrow .figcell.tall h3{margin-top:18px}
.figrow .figcell.tall h3.over{margin:0 0 16px;font-size:24px;font-family:var(--display)}
/* a row whose figures are the subject rather than a bullet: centred, larger */
.figrow.middle{align-items:flex-start}
.figrow.middle .figcell{text-align:center}
.figrow.middle .figcell .fig{width:168px;margin:0 auto 20px}
.figrow.middle .figcell p{max-width:280px;margin:0 auto}
.figrow .figcell.tall h3.over+.fig{margin-bottom:18px}
.under{margin-top:40px;max-width:820px}

/* a split screen: two identical halves with a rule between them */
/* One line that changes under itself. The steps are stacked in the same place
   and a revealed line hides as soon as a later one is revealed, so the press
   reads as the sentence changing rather than as a list growing. */
.swap{position:relative;height:150px;margin-top:20px}
.swap .step{position:absolute;inset:0;transition:opacity .35s ease}
/* A CSS animation beats a plain declaration, so the hidden one has to lose
   its animation as well as its opacity. */
.swap .step.on:has(~ .step.on){animation:none;opacity:0}
.swap .say{font-size:60px}

.split{display:flex;align-items:flex-start;gap:0;margin-top:6px}
.split .half{flex:1 1 0;padding-right:52px}
.split .half.right{padding-right:0;padding-left:52px}
.split .splitrule{flex:0 0 1px;align-self:stretch;background:rgba(42,33,26,.2);margin-top:4px;
  opacity:0;transition:opacity .45s ease}
/* The rule is the join between two halves, so it has nothing to divide until
   the second one is up: it used to be drawn down the middle of an empty slide. */
.split:has(.half.right.on) .splitrule{opacity:1}
.split .halfkick{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--wine);margin:0 0 6px}
.split .half h3{font-family:var(--display);font-size:32px;margin:0 0 4px}
.split .halfsub{font-style:italic;font-size:17px;margin-bottom:14px}
.split .halffig{width:96px;margin:10px 0 18px}
.split .halflist{margin-top:14px}
.step.on .halffig{animation:figRise .55s cubic-bezier(.2,.8,.3,1) both}
@keyframes figRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.split .half .halffig{width:150px;margin:14px 0 22px}
/* The cork comes out and is smelled; the cap twists off and the bottle is
   smelled. Both loop, so whichever half is up is showing its own gesture. */
.step.on .corkOut{animation:corkOut 3.4s cubic-bezier(.4,0,.3,1) infinite both}
@keyframes corkOut{
  0%,8%{transform:translateY(30px)}
  26%,58%{transform:translateY(0)}
  74%,100%{transform:translateY(30px)}
}
.step.on .capOff{transform-box:fill-box;transform-origin:50% 50%;
  animation:capOff 3.4s cubic-bezier(.4,0,.3,1) infinite both}
/* A screw cap only ever comes off one way. The turn used to unwind on the way
   back down; it now runs two full clockwise turns and lands where it started,
   so the loop is seamless and the gesture is the right one. */
@keyframes capOff{
  0%,8%{transform:translateY(30px) rotate(0deg)}
  26%{transform:translateY(-2px) rotate(360deg)}
  58%{transform:translateY(-2px) rotate(540deg)}
  74%,100%{transform:translateY(30px) rotate(720deg)}
}
.step.on .sniff{animation:sniff 3.4s ease-out infinite both}
@keyframes sniff{
  0%,30%{opacity:0;transform:translate(0,6px)}
  46%,62%{opacity:1;transform:translate(0,0)}
  78%,100%{opacity:0;transform:translate(4px,-8px)}
}

/* the tap keeps dripping once its half is up */
.step.on .drip{animation:drip 2.1s cubic-bezier(.4,0,.8,.5) .5s infinite both}
@keyframes drip{
  0%{opacity:0;transform:translateY(0)}
  12%{opacity:1}
  55%{opacity:1;transform:translateY(20px)}
  62%{opacity:0;transform:translateY(22px)}
  100%{opacity:0;transform:translateY(22px)}
}

/* four rules across, so the headline's count is the row's count */
.figrow.wide.four{gap:40px}
.figrow.wide.four .figcell.tall .fig{width:106px}
.figrow.wide.four .figcell.tall h3{margin-top:16px;font-size:20px}
.figrow.wide.four .figcell.tall p{font-size:17px}

/* The intensity argument, under a rule: two pictures with an equals between
   them and the verdict after. Stacked as two rows it ran off the bottom of the
   slide and into the kicker; side by side it sits in the space the four rules
   leave. */
.pairband{display:flex;gap:70px;margin-top:34px;padding-top:24px;max-width:1120px;
  border-top:1px solid rgba(42,33,26,.18)}
.pairgroup{display:flex;align-items:center;gap:16px}
.pairbit{display:flex;flex-direction:column;align-items:center;width:94px}
.pairbit .fig{width:56px}
.pairbit em{font-style:normal;font-size:14px;line-height:1.3;margin-top:8px;
  min-height:2.6em;color:var(--ink-soft);text-align:center}
.pairsign{font-family:var(--display);font-size:32px;font-weight:700;color:var(--wine);
  margin-bottom:22px}
.pairverdict{font-family:var(--display);font-size:19px;font-weight:700;margin-bottom:22px}
.pairverdict.good{color:#4E6B39}
.pairverdict.bad{color:var(--wine)}

/* The three bottles: copy down the left, the drawings standing on one line
   across the right. Each pair is one step, so the picture arrives with the
   line that names it rather than all three at once. */
.threewines{position:relative;margin-top:10px}
.threewines .tw{max-width:500px;margin-bottom:24px}
.threewines .twcopy p{font-size:18px}
.threewines .twfig{position:absolute;top:-14px;width:186px;text-align:center}
.threewines .tw:nth-child(1) .twfig{left:546px}
.threewines .tw:nth-child(2) .twfig{left:728px}
.threewines .tw:nth-child(3) .twfig{left:910px}
/* One shelf under all three rather than a line inside each drawing: the
   bottles are standing on the same surface, and the line is there from the
   start so the first press puts a bottle on a shelf rather than drawing one. */
.threewines::after{content:'';position:absolute;left:536px;top:270px;width:570px;height:1px;
  background:rgba(42,33,26,.3);opacity:0;transition:opacity .4s ease}
/* The shelf has nothing to hold up until the first line is read out, so it
   arrives with the first bottle rather than sitting there empty. */
.threewines:has(.tw.on)::after{opacity:1}
.threewines .twfig svg{width:100%;height:auto;display:block}
.threewines .twfig span{display:block;margin-top:4px;font-family:var(--display);
  font-size:17px;font-weight:700}
.step.on .twfig{animation:figRise .6s cubic-bezier(.2,.8,.3,1) both}
/* the flute keeps working once it is up */
.step.on .bub{animation:bubUp 3.2s linear infinite both}
@keyframes bubUp{
  0%{opacity:0;transform:translateY(0)}
  14%{opacity:.5}
  100%{opacity:0;transform:translateY(-64px)}
}

/* The funnel fills the stage like the maps do. The grapes drop into place on
   the press rather than fading up: the falling is the point of the picture. */
.funnel{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* Each grape falls on its own clock, so the press reads as a pour rather than
   as a block of fruit appearing. The place is on the outer group and the fall
   on the inner one, because a CSS transform beats the transform attribute. */
.funnel .gdrop{opacity:0}
.step.on .gdrop{animation:grapeDrop .66s cubic-bezier(.36,.02,.5,1) var(--d) both}
@keyframes grapeDrop{
  0%{opacity:0;transform:translateY(-300px) scale(.9)}
  22%{opacity:1}
  76%{transform:translateY(9px) scale(1.04)}
  90%{transform:translateY(-3px)}
  100%{opacity:1;transform:none}
}

/* the full-bleed figures sit over the whole stage, under the headline */
.wmap,.thermo,.glasspair,.funnel,.loupe{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* A stage-filling figure takes the whole slide, so the headline moves up out of
   the middle and runs along the top instead. */
.vines{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.slide.side-fig{isolation:isolate}
.slide.side-fig>*:not(.vines){position:relative;z-index:1}
.cols.two.wide.narrow{max-width:620px;position:relative;z-index:1}
.slide.full-fig{isolation:isolate}
/* A full-bleed figure takes the headline out of the flow, but it lands on the
   same line and at the same size as every other slide's: a title that moves up
   and shrinks whenever the art gets bigger is the deck jumping about. */
.slide.full-fig h1{position:absolute;left:var(--pad-x);top:92px;right:var(--pad-x);
  margin:0;z-index:1}
.slide.full-fig .kicker,.slide.full-fig .myth{z-index:1}
.slide.full-fig .myth{display:none}
.art{display:block;margin:0 0 26px}
.lab{font-size:20px;font-weight:700;fill:var(--ink);font-family:var(--serif)}
.cap{font-size:15px;fill:var(--ink-soft);text-anchor:middle;font-family:var(--serif)}

.rows .row{display:flex;align-items:center;gap:24px;padding:15px 0;border-bottom:1px solid rgba(42,33,26,.14)}
.rows.tight .row{padding:11px 0}
.row .l{font-weight:700;font-size:20px;min-width:290px}
.row .eq{color:var(--wine);font-size:19px}
.row .r{font-size:19px;color:var(--ink-soft)}

.tbl{border-collapse:collapse;width:100%;font-size:15px}
.tbl.big{font-size:17px}
.tbl th{text-align:left;font-weight:700;padding:9px 12px;border-bottom:2px solid var(--ink)}
.tbl td{padding:8px 12px;border-bottom:1px solid rgba(42,33,26,.14);color:var(--ink-soft)}
.tbl td.em{color:var(--wine);font-weight:700}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:30px 80px;max-width:1000px}
.bars{max-width:800px}
.bar{display:flex;align-items:center;gap:18px;margin-bottom:17px}
.bar .bl{width:150px;font-size:17px}
.bar .bt{flex:1;height:26px;position:relative}
.bar .bt i{position:absolute;inset:0 auto 0 0;background:var(--wine);border-radius:2px}
.bar .bv{width:86px;font-size:16px;color:var(--ink-soft)}
.myth{position:absolute;right:var(--pad-x);top:210px;width:250px;font-size:18px;font-style:italic}

.stat .big{font-family:var(--display);font-size:150px;font-weight:700;color:var(--wine);line-height:1}
.statline{font-size:26px;color:var(--ink);margin-top:14px}
.statsub{font-size:19px;font-style:italic;margin-top:26px}
.say{font-family:var(--display);font-size:42px;line-height:1.32;font-weight:700;color:var(--ink)}
.saysub{font-size:21px;font-style:italic;margin-top:30px}

.notes{display:none}
#notes{position:absolute;left:0;right:0;bottom:0;max-height:46%;overflow:auto;z-index:4;
  background:rgba(28,22,17,.94);color:#F0E2C8;padding:26px 40px;display:none;font-size:15.5px;line-height:1.62}
#notes.on{display:block}
#notes p{color:#F0E2C8;font-size:15.5px;margin:0 0 12px}

/* ---------- the burger, and the menu behind it ---------- */
/* There used to be a progress hairline along the bottom of every slide and a
   row of key hints in the corner, which is two pieces of furniture on thirty
   slides to do one job. One button in the corner now, on every slide, and
   everything (where you are, where you can jump to, what the keys do)
   lives behind it. */
#burger{position:absolute;top:26px;right:26px;z-index:6;width:42px;height:42px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:0;opacity:.34;transition:opacity .25s ease}
#burger:hover,#burger:focus-visible{opacity:.9;outline:none}
#burger i{display:block;width:21px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .2s ease}
#burger.open{opacity:.9}
#burger.open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
#burger.open i:nth-child(2){opacity:0}
#burger.open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

#grid{position:absolute;inset:0;z-index:5;display:none;
  background:rgba(28,22,17,.55);backdrop-filter:blur(3px);
  padding:86px 64px 56px;overflow:auto}
#grid.on{display:block}
#grid .menusheet{background:var(--paper-light);border-radius:4px;padding:30px 34px 26px;
  box-shadow:0 22px 60px rgba(28,22,17,.4);max-width:1060px;margin:0 auto}
#grid h2{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--wine);margin:0 0 18px}
#grid .menulist{column-count:3;column-gap:34px}
#grid button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--serif);font-size:14.5px;line-height:1.3;color:var(--ink-soft);
  padding:6px 8px;border-radius:3px;break-inside:avoid}
#grid button b{font-family:var(--display);font-weight:700;color:var(--wine);opacity:.55;
  margin-right:9px;font-size:13px}
#grid button:hover,#grid button:focus-visible{background:rgba(165,37,26,.1);color:var(--ink);outline:none}
#grid button.here{color:var(--ink);font-weight:700}
#grid button.here b{opacity:1}
#grid .menukeys{margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(42,33,26,.18);
  font-size:12.5px;color:var(--ink-soft);font-style:italic}

/* colour and age: the wine changes colour on a loop while the years count
   under it, and the eight swatches come back on the last press as the
   reference. The colours themselves are in tokens.css, so the wine in the
   glass and the swatch under it always agree. */
.ageing{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.step.on .agewine{animation:ageR 8.4s linear infinite both}
.step.on .agewine.w{animation-name:ageW}
@keyframes ageR{
  0%,20%{fill:var(--age-r1)} 25%,45%{fill:var(--age-r2)}
  50%,70%{fill:var(--age-r3)} 75%,96%{fill:var(--age-r4)} 100%{fill:var(--age-r1)}
}
@keyframes ageW{
  0%,20%{fill:var(--age-w1)} 25%,45%{fill:var(--age-w2)}
  50%,70%{fill:var(--age-w3)} 75%,96%{fill:var(--age-w4)} 100%{fill:var(--age-w1)}
}
/* the years under the glass, one visible per quarter of the same loop */
.agelab{opacity:0}
.step.on .agelab{animation:ageLab 8.4s linear infinite both}
@keyframes ageLab{
  0%{opacity:0} 2%,23%{opacity:1} 25%,100%{opacity:0}
}

/* Leaving slide one. The bottle is set back down, the wine comes up out of its
   mouth as a plume, the plume throws big drops all over the paper, and every
   mark they leave spreads until there is nothing else on screen. The cut to
   slide two happens under that cover; the wine then clears off the new slide.

   The wash is drawn in the stage's own coordinates and anchored on the mouth in
   art.js, so nothing here carries an offset of its own: the only geometry below
   is the plume's origin, which is that same point. */
#wash{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;visibility:hidden}
#wash.go{visibility:visible}
#wash .wine{position:absolute;inset:0;width:100%;height:100%}
#wash .flood{position:absolute;inset:0;background:var(--wine);opacity:0}
#wash .blot,#wash .fly>path{transform-box:fill-box;transform-origin:50% 50%}
#wash .blot,#wash .fly{opacity:0}
#wash .fly{offset-rotate:auto;offset-distance:0%}
#wash .plume{transform-box:view-box;transform-origin:960px 202px;transform:scale(0)}

/* out of the mouth as the bottle lands, held while the drops leave it, gone */
#wash.go .plume{animation:plumeUp .5s cubic-bezier(.1,.82,.3,1) .46s both,
                          plumeGo .65s cubic-bezier(.4,0,.7,.3) 2.50s forwards}
@keyframes plumeUp{
  0%{transform:scale(.04) rotate(12deg)}
  55%{transform:scale(1.07) rotate(-2.5deg)}
  78%{transform:scale(.99) rotate(.5deg)}
  100%{transform:scale(1) rotate(0deg)}
}
@keyframes plumeGo{
  from{opacity:1;transform:scale(1) rotate(0deg)}
  to{opacity:0;transform:scale(.46) rotate(14deg)}
}
/* The big drops, each thrown out of the mouth onto the paper. The flight is on
   the group and the size on the shape inside it: see wash() in art.js for why
   one element cannot carry both. */
#wash.go .fly{animation:flyOut .8s cubic-bezier(.32,.02,.58,.9) calc(.85s + var(--lag)) both}
#wash.go .fly>path{animation:flyGrow .8s cubic-bezier(.32,.02,.58,.9) calc(.85s + var(--lag)) both}
@keyframes flyOut{
  0%{opacity:0;offset-distance:0%}
  10%{opacity:1}
  88%{opacity:1}
  100%{opacity:0;offset-distance:100%}
}
@keyframes flyGrow{
  0%{scale:.5}
  88%{scale:var(--sc)}
  100%{scale:calc(var(--sc) * .72)}
}

/* where each one lands it marks the paper, and the mark keeps going */
#wash.go .blot{animation:blotLand .35s cubic-bezier(.15,.85,.3,1) calc(1.65s + var(--lag)) both,
                         blotSpread 1.7s cubic-bezier(.45,.05,.35,1) calc(2.00s + var(--lag)) forwards}
@keyframes blotLand{
  0%{opacity:0;scale:.06}
  40%{opacity:1}
  72%{opacity:1;scale:.34}
  100%{opacity:1;scale:.28}
}
@keyframes blotSpread{from{opacity:1;scale:.28}to{opacity:1;scale:var(--sc)}}
/* The last of the cover, so it is total whatever the blots leave behind, and
   then it is held there. The hold is the point: the wine has to own the whole
   frame for a beat, or the cut to slide two happens through a wine-tinted
   version of slide one and the two slides are briefly visible at once. */
#wash.go .flood{animation:flood 1.55s ease-in 3.4s forwards}
@keyframes flood{0%{opacity:0}54%{opacity:1}100%{opacity:1}}
/* and then the whole cover dissolves off the new slide underneath */
#wash.go{animation:washClear .7s ease-out 4.95s forwards}
@keyframes washClear{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){#wash{visibility:hidden!important}}

/* Replay, for the opener only: every other slide holds still, so the button
   hides itself off slide one and while the wine wash is running. It sits inside
   the stage, so it scales with everything else. */
#replay{position:absolute;left:var(--pad-x);bottom:40px;z-index:4;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--serif);font-size:15px;color:var(--ink-soft);
  background:var(--paper-light);border:1.5px solid rgba(42,33,26,.32);border-radius:3px;
  padding:7px 15px 8px;cursor:pointer;transition:color .15s,border-color .15s}
#replay:hover,#replay:focus-visible{color:var(--wine);border-color:var(--wine);outline:none}
#replay[hidden]{display:none}


/* ---------- the shelf of names ---------- */
/* Seven bottles grouped by country, each group one press. The shelf line is the
   bottom border of each drawing, so the bottles inside a country join into one
   surface and the countries sit on their own. */
.shelf{display:flex;gap:10px;margin-top:2px}
/* Each country is a bay of the shelf, drawn as one: without the frame the two
   French bottles and the two Italian ones read as four unrelated columns. */
.shelf .sgroup{flex:0 0 auto;padding:10px 8px 12px;border:1px solid rgba(42,33,26,.22);
  border-radius:8px;background:rgba(246,232,205,.42)}
.shelf .scountry{display:block;font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--wine);margin:0 0 6px 4px}
.shelf .sbottles{display:flex;gap:0}
.shelf .scell{width:138px;text-align:center}
.shelf .sfig{border-bottom:1px solid rgba(42,33,26,.4);padding-bottom:2px}
.shelf .sfig svg{width:128px;height:auto;display:block;margin:0 auto}
.shelf h4{font-family:var(--display);font-size:17px;font-weight:700;margin:12px 0 3px}
.shelf p{font-size:13.5px;line-height:1.35;font-style:italic;padding:0 8px}

/* ---------- the three tiers ---------- */
/* The pyramid is drawn; the rows are HTML, because five countries' worth of
   terms want to wrap and an SVG text node will not. Both are positioned against
   the same box so a row can arrive on its own press without the layout moving. */
.tiers{position:relative;height:380px;margin-top:2px}
.tierfig{position:absolute;left:0;top:14px;width:412px;height:auto}
.trow{position:absolute;left:446px;top:calc(var(--i) * 66px);display:flex;align-items:center;gap:10px}
.trow .tc{width:92px;font-family:var(--display);font-size:19px;font-weight:700}
.trow .chip{width:176px;height:52px;padding:0 12px;border-radius:4px;font-size:13.5px;
  line-height:1.25;display:flex;align-items:center;border:1.5px solid rgba(42,33,26,.55)}
.trow .chip.t1{background:var(--tier-1);color:var(--paper-light);border-color:var(--ink)}
.trow .chip.t2{background:var(--tier-2)}
.trow .chip.t3{background:var(--tier-3)}
.trow .chip.t2,.trow .chip.t3{border-color:rgba(42,33,26,.45)}
.trow.head{top:8px}
.trow .chiplab{width:176px;padding:0 12px;font-family:var(--display);font-size:12px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--wine);white-space:nowrap}
.step.on .chip{animation:figRise .5s cubic-bezier(.2,.8,.3,1) both}
.step.on .chip.t2{animation-delay:.08s}
.step.on .chip.t3{animation-delay:.16s}


/* ---------- the globe the belt map opens out of ---------- */
/* Held flat-side-down until the globe has finished with it: the pins inside are
   `.step` and hidden anyway, but the land and the two bands are not, and a
   frame of the flat map behind a spinning globe gives the whole thing away. */
.wmap .mapbody{opacity:0}
.wmap.flat .mapbody{opacity:1}
.wmap.labelled .mapbody{opacity:1}
.wmap .globe{transform-box:view-box;transform-origin:640px 388px}
.wmap .unrollRect{transform-box:fill-box;transform-origin:50% 50%}
.wmap.spinning .unrollRect{transform:scaleX(.03)}
.wmap.spinning .globe{animation:globeIn .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes globeIn{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:none}}


/* ---------- the supermarket picks ---------- */
/* Three bottles with their labels left blank, because the names on them are
   Katya's to fill in: the copy is three bracketed strings in content.js and the
   drawing takes whatever they become. */
.picks{display:flex;gap:56px;margin-top:10px;max-width:1020px}
.picks .pick{flex:1 1 0;text-align:center}
.picks .pkind{display:block;font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--wine);margin-bottom:12px}
.picks .fig{width:148px;margin:0 auto 20px}
.picks h3{font-size:20px;margin-bottom:6px}
.picks .tag{font-family:var(--display);font-size:19px;font-weight:700;color:var(--wine);
  margin-bottom:10px}
.picks p{font-size:17px}


/* ---------- the label reader ---------- */
/* The glass swings over the label on a slow loop: the forearm, the hand and the
   lens are one group turning about the elbow, so the whole arm moves with it
   rather than the glass sliding off the end of a stiff limb. The magnified copy
   of the label under the lens is clipped to a fixed circle, which is why the
   swing is small: enough to read as looking, not enough to leave the disc. */
/* the glass moves over the label, hinged at the fist that holds it */
.loupe .scan{transform-box:view-box;transform-origin:400px 372px;
  animation:scanLabel 6.5s ease-in-out infinite both}
@keyframes scanLabel{
  0%{transform:rotate(-3deg)}
  30%{transform:rotate(2.6deg)}
  54%{transform:rotate(3.2deg)}
  80%{transform:rotate(-1.8deg)}
  100%{transform:rotate(-3deg)}
}
/* And then it opens. The whole point is that the label comes out of the glass
   he is holding rather than arriving beside it, so three things happen on one
   press: the lens he is looking through catches the light, the big one grows
   out of it from almost nothing, and the label inside pulls into focus a beat
   after the glass has landed. */
.loupe:has(.step.on) .lensglass{animation:lensFlash .8s ease-out both}
@keyframes lensFlash{
  0%{fill-opacity:.4}
  20%{fill-opacity:.95}
  100%{fill-opacity:.4}
}
.loupe .step.on .bigLens{transform-box:view-box;transform-origin:500px 438px;
  animation:lensOpen .78s cubic-bezier(.22,.9,.26,1) both}
@keyframes lensOpen{
  0%{transform:scale(.12);opacity:0}
  16%{opacity:1}
  100%{transform:scale(1);opacity:1}
}
.loupe .step.on .bigLens .lensLabel{animation:lensFocus .46s ease-out .36s both}
@keyframes lensFocus{
  from{opacity:0;filter:blur(4px)}
  to{opacity:1;filter:blur(0)}
}


/* ---------- the conclusion ---------- */
/* Three lines under each other, each with its own picture of going from one to
   more than one. The extras arrive after the line they belong to rather than
   with it: the movement is the argument. */
.concl{margin-top:6px}
.concl .crow{display:flex;align-items:center;gap:30px;margin-bottom:2px}
.concl .cfig{width:344px;flex:none;height:auto}
.concl .say{font-size:38px;line-height:1.1;font-family:var(--display);font-weight:700;
  color:var(--ink)}
.concl .more{opacity:0}
.step.on .more{animation:moreIn .5s cubic-bezier(.2,.8,.3,1) var(--d) both}
@keyframes moreIn{
  from{opacity:0;transform:translate(-18px,10px) scale(.8)}
  to{opacity:1;transform:none}
}


/* ---------- how wine is made ---------- */
/* Six scenes in the same box, one press each: the one showing fades out as the
   next arrives, so the slide reads as a story rather than as six pictures
   stacking up. The rail underneath is the exception: it fills in and stays,
   which is the structure the old diagram was carrying. */
.story{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.story .scene{transition:opacity .5s ease}
.story .step.on:has(~ .step.on) .scene{opacity:0}
.story .railbase,.story .railon{transition:opacity .4s ease}

/* The picker is drawn bent over the fruit with a hand already on the bunch, so
   the loop is them straightening up with it and going back down, a positive
   rotation, because the figure faces left and the lean that put them there was
   negative. Pivoted low, near the feet, or the whole person swings. */
.step.on .picker{transform-box:view-box;transform-origin:372px 470px;
  animation:pick 3.8s ease-in-out infinite both}
@keyframes pick{
  0%,34%{transform:rotate(0deg)}
  56%,74%{transform:rotate(9deg)}
  100%{transform:rotate(0deg)}
}
/* a bunch drops into the crate */
.step.on .fallB>g{animation:bunchFall 3.6s cubic-bezier(.45,.05,.75,.6) infinite both}
@keyframes bunchFall{
  0%,30%{opacity:0;transform:translateY(0)}
  36%{opacity:1;transform:translateY(0)}
  70%{opacity:1;transform:translateY(126px)}
  76%,100%{opacity:0;transform:translateY(126px)}
}
/* the crate tips and the fruit goes in */
.step.on .tip{animation:tipCrate 3.2s ease-in-out infinite both}
@keyframes tipCrate{
  0%,18%{transform:rotate(0deg)}
  42%,72%{transform:rotate(38deg)}
  92%,100%{transform:rotate(0deg)}
}
.step.on .pourB{animation:pourBerry 1.5s cubic-bezier(.4,0,.8,.6) var(--d) infinite both}
@keyframes pourBerry{
  0%{opacity:0;transform:translate(0,0)}
  14%{opacity:1}
  100%{opacity:0;transform:translate(60px,190px)}
}
/* the crank turns */
.step.on .crank{transform-box:view-box;transform-origin:var(--cx) var(--cy);
  animation:crankSpin 2.4s linear infinite both}
/* not `spin`: the opener already owns that name, and the last sheet loaded wins */
@keyframes crankSpin{to{transform:rotate(360deg)}}
/* the press bar is pushed round and the plate creeps down */
.step.on .bar{animation:pushBar 4s ease-in-out infinite both}
@keyframes pushBar{
  0%{transform:rotate(0deg) scaleX(1)}
  50%{transform:rotate(0deg) scaleX(.82)}
  100%{transform:rotate(0deg) scaleX(1)}
}
.step.on .plate{animation:pressDown 4s ease-in-out infinite both}
@keyframes pressDown{0%{transform:translateY(0)}50%{transform:translateY(16px)}100%{transform:translateY(0)}}
.step.on .drip2{animation:dripDown 1.8s cubic-bezier(.4,0,.8,.5) infinite both}
@keyframes dripDown{
  0%{opacity:0;transform:translateY(0)}
  16%{opacity:1}
  70%{opacity:1;transform:translateY(28px)}
  80%,100%{opacity:0;transform:translateY(32px)}
}
/* fermentation, which is the only step where anything is actually happening */
.step.on .bub2{animation:bubUp2 2.6s linear var(--d) infinite both}
@keyframes bubUp2{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  12%{opacity:.9}
  100%{opacity:0;transform:translateY(-230px) scale(1.25)}
}
/* the line moves and the bottle fills */
.step.on .belt{animation:beltRun 1.9s linear infinite both}
@keyframes beltRun{to{transform:translateX(-76px)}}
.step.on .fill2{transform-box:fill-box;transform-origin:50% 100%;
  animation:fillUp 3s ease-in-out infinite both}
@keyframes fillUp{0%{transform:scaleY(0)}55%,100%{transform:scaleY(1)}}


/* ---------- the two signposts ---------- */
.chapter{margin-top:-10px}
.chaprail{width:760px;height:auto;display:block;margin:0 0 18px -18px}
.chapbody{display:flex;align-items:center;gap:56px}
.chapfig{width:470px;flex:none;height:auto}
.chaptext{flex:1 1 auto;max-width:560px}
.chaptext .chapstep{margin-bottom:26px;opacity:0}
.slide.on .chaptext .chapstep{animation:stepIn .45s cubic-bezier(.2,.8,.3,1) var(--d) both}
.chaptext h3{font-family:var(--display);font-size:26px;margin-bottom:4px}
.chaptext p{font-size:19px}

/* The taster: the tap runs, the glass fills, and then the arm that was
   holding it out under the barrel gives way to the arm that is drinking from
   it. Two drawn poses cross-fading rather than one tweening, because an arm
   folded from the tap to the mouth has to pass through the chest it belongs
   to. */
.step.on .armPour{animation:poseA 6.4s ease-in-out infinite both}
.step.on .armSip{animation:poseB 6.4s ease-in-out infinite both}
@keyframes poseA{0%,42%{opacity:1}46%,80%{opacity:0}84%,100%{opacity:1}}
@keyframes poseB{0%,42%{opacity:0}46%,80%{opacity:1}84%,100%{opacity:0}}
.step.on .gfill{transform-box:fill-box;transform-origin:50% 100%;
  animation:fillGlass 6.4s ease-in-out infinite both}
@keyframes fillGlass{
  0%{transform:scaleY(.06)}
  34%,100%{transform:scaleY(1)}
}
.step.on .pourline{transform-box:fill-box;transform-origin:50% 0;
  animation:tapRun 6.4s ease-out infinite both}
@keyframes tapRun{
  0%{transform:scaleY(0);opacity:1}
  8%,34%{transform:scaleY(1);opacity:1}
  38%{transform:scaleY(1);opacity:0}
  39%,99%{transform:scaleY(0);opacity:0}
  100%{transform:scaleY(0);opacity:1}
}


/* ---------- same grape, different wine ---------- */
/* Two grapes, four places, and the line that was the point of both of the
   slides this replaces. Cards rather than columns, because the pairing is the
   argument: the two halves of a pair have to read as a comparison. */
.samegrape{margin-top:-4px}
.sgblock{margin-bottom:16px}
.sggrape{display:inline-block;font-family:var(--display);font-size:14px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--wine);margin-bottom:7px}
.sgpair{display:flex;gap:22px}
.sgcard{flex:1 1 0;border:1px solid rgba(42,33,26,.2);border-radius:4px;
  padding:13px 18px 15px;background:rgba(255,255,255,.22)}
.sgtop{display:flex;align-items:center;gap:12px;margin-bottom:7px}
.sgtop .fig{width:46px;flex:none}
.sgcard .sgkind{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.sgcard h3{font-family:var(--display);font-size:22px;margin:1px 0 0}
.sgcard p{font-size:15px;line-height:1.4}
.sgcard ul{margin:9px 0 0;padding:0;list-style:none;display:flex;gap:7px;flex-wrap:wrap}
.sgcard li{font-size:12.5px;background:rgba(165,37,26,.1);border-radius:20px;
  padding:3px 11px;color:var(--ink)}
.sgline{background:var(--wine);color:#F6E8CD;font-family:var(--display);font-size:20px;
  font-weight:700;padding:13px 22px;border-radius:4px;margin:0}

/* ---------- the two statement slides ---------- */
/* A statement slide has no headline to anchor, so it centres, which is what
   makes the room read it as a pause rather than as a slide with its content
   missing. */
.slide.statement{justify-content:center;padding-top:0;padding-bottom:0}
.statebody{display:flex;align-items:center;gap:56px}
.statecopy{flex:1 1 auto;max-width:660px}
.statefig{width:440px;flex:none;height:auto}
.sayhead{font-family:var(--display);font-size:22px;font-weight:700;color:var(--wine);
  margin:0 0 16px;letter-spacing:.01em}

/* ---------- the five words ---------- */
.figrow.words .figcell .fig{width:74px}
.figrow.words .figcell h3{margin-top:14px;font-size:23px;font-family:var(--display)}
.figrow.words .figcell p{font-size:15.5px;line-height:1.42}
.figrow.words{gap:36px}

/* ---------- the wines to try ---------- */
/* A reference slide: it arrives whole rather than a press per row, and it is
   set to be photographed rather than read out. */
.winelist{margin-top:-2px}
.wlgroup{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--wine);margin:14px 0 4px}
.wlgroup:first-child{margin-top:0}
.wlhead,.wlrow{display:flex;gap:20px;align-items:baseline}
.wlhead span:nth-child(1),.wlrow span:nth-child(1){flex:0 0 31%}
.wlhead span:nth-child(2),.wlrow span:nth-child(2){flex:0 0 25%}
.wlhead span:nth-child(3),.wlrow span:nth-child(3){flex:1 1 auto}
.wlhead{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);padding-bottom:5px;
  border-bottom:1px solid rgba(42,33,26,.28)}
.wlrow{font-size:15px;padding:5.5px 0;border-bottom:1px solid rgba(42,33,26,.1)}
.wlrow span:nth-child(1){font-weight:700}
.wlrow span:nth-child(2){color:var(--ink-soft);font-style:italic}
.wlrow span:nth-child(3){color:var(--ink-soft)}

/* ---------- the wall of grapes ---------- */
/* Two presses: the wall goes up whole, and then the blends arrive under it.
   Nothing is ever dimmed: the point of the first press is how many there are,
   and taking most of them away again on the second is the slide arguing with
   itself. */
.wall{position:absolute;inset:0;width:100%;height:100%;z-index:0}

/* ---------- Old World vs New World ---------- */
/* Two lists above one map with twelve names fanning off it put both halves of
   the argument everywhere the eye landed. Each side owns a lane now: a panel
   with its own countries and its own rules, and its own colour of dot on the
   map below. The colour is the only thing joining them, which is enough, and
   it does not need twelve leader lines drawn across the geography. */
.owgrid{display:flex;justify-content:space-between;margin-top:0;
  position:relative;z-index:1;align-items:flex-start}
.owpanel{width:272px;flex:none;border:1px solid rgba(42,33,26,.2);border-radius:5px;
  padding:13px 18px 14px;background:rgba(255,255,255,.3)}
.owpanel h3{font-family:var(--display);font-size:24px;font-weight:700;margin:0 0 1px;
  display:flex;align-items:center;gap:11px}
.owpanel h3 i{flex:none;width:15px;height:13px;border:2px solid var(--ink);border-radius:1px}
.owpanel.old h3 i{background:var(--wine)}
.owpanel.new h3 i{background:#4E6B39}
.owdef{font-size:15px;font-style:italic;line-height:1.3;margin:0 0 10px}
.owchips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.owchips li{font-family:var(--display);font-size:12.5px;font-weight:700;padding:3px 10px;
  border-radius:20px;letter-spacing:.01em}
.owpanel.old .owchips li{background:rgba(165,37,26,.13);color:var(--wine)}
.owpanel.new .owchips li{background:rgba(78,107,57,.16);color:#3E5A2C}
.owrules{margin:0;padding:0;list-style:none}
.owrules li{font-size:15.5px;line-height:1.36;margin-bottom:11px;padding-left:15px;
  position:relative;color:var(--ink-soft)}
.owrules li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%}
.owpanel.old .owrules li::before{background:var(--wine)}
.owpanel.new .owrules li::before{background:#4E6B39}
.owrules b{color:var(--ink)}
.owrules span{display:block;font-size:13.5px;font-style:italic;opacity:.78;margin-top:1px}
.owmap{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* The map arrives the way the belt map does: as a globe that spins and then
   opens out flat. Same machinery, a smaller sphere, and no bands to wind on. */
.owmap .mapbody{opacity:0}
.owmap.flat .mapbody{opacity:1}
.owmap .globe{transform-box:view-box;transform-origin:640px 372px}
.owmap .unrollRect{transform-box:fill-box;transform-origin:50% 50%}
.owmap.spinning .unrollRect{transform:scaleX(.03)}
.owmap.spinning .globe{animation:globeIn .5s cubic-bezier(.2,.8,.3,1) both}
/* and then the pins drop onto it, one after another, when the panel that names
   them arrives. They live inside the map body, which is held at nothing until
   the globe has finished unrolling, so the drop waits on `.flat` as well as on
   the panel: dropping them into a map that is not there yet spends the whole
   animation invisibly and they are simply present when the map arrives. */
.owmap .pinold circle,.owmap .pinnew circle{opacity:0;transform-box:fill-box;
  transform-origin:50% 50%}
.slide:has(.owpanel.old.on) .owmap.flat .pinold circle,
.slide:has(.owpanel.new.on) .owmap.flat .pinnew circle{
  animation:pinDrop .52s cubic-bezier(.3,1.4,.45,1) var(--d) both}
@keyframes pinDrop{
  0%{opacity:0;transform:translateY(-44px) scale(.4)}
  45%{opacity:1}
  100%{opacity:1;transform:none}
}