/* Piku Print Club, the site (v3.8). The GET THE APP section (#getapp): the closing call to action, under the Grown-ups block and above the footer. The only SUNFLOWER band on
   the page, so it is the one thing that looks different from everything above it: a huge "Get snapping." in ink with an off-register ghost, ONE big pink button, a rolling
   halftone behind, and round them a party of the app's own die-cut stickers, three prints, a booth strip and a few sparkles. js/cta.js adds .in when the
   section is on screen (the party bursts out from behind the button, once per visit) and throws a burst of stickers when the button is pressed; the halftone swell is drawn on a
   canvas by js/halftone.js.
   Placement. The art lives in .cta-art (clipped to the section) > .cta-stage, a size container, so every sticker is placed by two plain numbers: --x and --y, a share of the
   stage's width and height (cqw, cqh), from the left or the right (.xr) and from the top or the bottom (.yb); --w is its width in --u (1vw, or 2vh on an ultrawide screen,
   like the Grown-ups block), --r its tilt and --d its delay. A sticker never sits on the words or the button. 901px and up is the poster; 900px and under (a phone, or a tablet held upright) is a stack.
   Motion: entrance (transitions on translate, scale, rotate and opacity: each sticker starts at the middle, small and spinning, and springs out to its place), idle (a slow bob
   on `transform`, a different property, so the two never fight), the halftone swell rolling across (a canvas, js/cta.js), the sparkles twinkling, the button breathing and pinging. All of it stops under reduced
   motion (everything is simply in place) and the idle motion pauses while the section is off screen (.is-live). With JS off nothing is hidden. */

.getapp{
  --u:min(1vw,2vh);--ghost-sun:#D9961B;
  position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:min(100svh,62vw);padding:clamp(120px,calc(var(--u) * 10),340px) calc(clamp(16px,4vw,200px) + var(--sar)) clamp(96px,calc(var(--u) * 8.4),300px) calc(clamp(16px,4vw,200px) + var(--sal));
  color:var(--ink);
  --th:clamp(30px,calc(var(--u) * 2.4),80px);          /* how far the torn edge hangs below the section (the same height as the Grown-ups block's) */
  --tear-paper:polygon(100% 0,0 0,0 calc(100% - var(--th) * 0.424),1.42% calc(100% - var(--th) * 0.469),2.78% calc(100% - var(--th) * 0.444),4.16% calc(100% - var(--th) * 0.262),5.6% calc(100% - var(--th) * 0.207),7.09% calc(100% - var(--th) * 0.226),8.41% calc(100% - var(--th) * 0.428),10.12% calc(100% - var(--th) * 0.401),11.41% calc(100% - var(--th) * 0.347),12.8% calc(100% - var(--th) * 0.379),14.45% calc(100% - var(--th) * 0.58),15.85% calc(100% - var(--th) * 0.59),17.28% calc(100% - var(--th) * 0.377),18.74% calc(100% - var(--th) * 0.295),19.98% calc(100% - var(--th) * 0.363),21.3% calc(100% - var(--th) * 0.328),22.73% calc(100% - var(--th) * 0.275),24.35% calc(100% - var(--th) * 0.199),25.7% calc(100% - var(--th) * 0.307),27.11% calc(100% - var(--th) * 0.384),28.49% calc(100% - var(--th) * 0.561),30.16% calc(100% - var(--th) * 0.518),31.44% calc(100% - var(--th) * 0.435),32.89% calc(100% - var(--th) * 0.391),34.31% calc(100% - var(--th) * 0.473),35.64% calc(100% - var(--th) * 0.433),37.26% calc(100% - var(--th) * 0.192),38.71% calc(100% - var(--th) * 0.147),39.95% calc(100% - var(--th) * 0.289),41.35% calc(100% - var(--th) * 0.303),43% calc(100% - var(--th) * 0.394),44.12% calc(100% - var(--th) * 0.33),45.72% calc(100% - var(--th) * 0.511),47.3% calc(100% - var(--th) * 0.581),48.65% calc(100% - var(--th) * 0.624),49.96% calc(100% - var(--th) * 0.361),51.3% calc(100% - var(--th) * 0.264),52.85% calc(100% - var(--th) * 0.265),54.25% calc(100% - var(--th) * 0.382),55.7% calc(100% - var(--th) * 0.208),57.05% calc(100% - var(--th) * 0.219),58.68% calc(100% - var(--th) * 0.217),59.81% calc(100% - var(--th) * 0.499),61.63% calc(100% - var(--th) * 0.561),62.94% calc(100% - var(--th) * 0.476),64.4% calc(100% - var(--th) * 0.382),65.58% calc(100% - var(--th) * 0.449),66.99% calc(100% - var(--th) * 0.514),68.5% calc(100% - var(--th) * 0.317),70.12% calc(100% - var(--th) * 0.223),71.4% calc(100% - var(--th) * 0.158),72.76% calc(100% - var(--th) * 0.33),74.39% calc(100% - var(--th) * 0.323),75.82% calc(100% - var(--th) * 0.334),76.97% calc(100% - var(--th) * 0.434),78.43% calc(100% - var(--th) * 0.39),79.89% calc(100% - var(--th) * 0.582),81.36% calc(100% - var(--th) * 0.485),82.93% calc(100% - var(--th) * 0.356),84.21% calc(100% - var(--th) * 0.324),85.81% calc(100% - var(--th) * 0.306),87.24% calc(100% - var(--th) * 0.363),88.59% calc(100% - var(--th) * 0.238),90.01% calc(100% - var(--th) * 0.235),91.43% calc(100% - var(--th) * 0.36),92.86% calc(100% - var(--th) * 0.511),94.41% calc(100% - var(--th) * 0.517),95.78% calc(100% - var(--th) * 0.463),97.08% calc(100% - var(--th) * 0.395),98.7% calc(100% - var(--th) * 0.482),100% calc(100% - var(--th) * 0.401));
}
/* THE PAPER. The yellow is its own layer, the sheet the whole section is printed on: sunflower, the halftone field and (js/cta.js) the canvas swell all live INSIDE it, and the
   sheet is cut by one torn edge that hangs --th below the section and overlaps the footer's top. So the dots carry on right down to the rough edge and are torn off with it, the
   way a sheet printed with dots would be. (A first version tore a plain yellow strip off the bottom of a section whose dots were clipped square at its edge: the dots stopped in a
   hard line just above the torn paper.) --tear-paper is the Grown-ups block's torn edge (css/grownups.css, --tear-down) mirrored, so the two seams are not cut from one sheet, with
   every height measured up from the bottom of this taller box: a point at p% down the strip is at calc(100% - --th * (100 - p) / 100). The seam above, the blue tearing down over
   this yellow, is the Grown-ups block's own, which is why that block sits above this one in the stack. */
.cta-paper{position:absolute;left:0;right:0;top:0;bottom:calc(1px - var(--th));z-index:0;background:var(--sunflower);clip-path:var(--tear-paper);pointer-events:none}

/* ---------- the art: clipped to the section, never takes a click ---------- */
.cta-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* the field (inside the paper, see above): the app's own halftone (a square lattice of dots turned 22 degrees, as in every sticker's shading), tone on tone, behind everything. With script and motion js/cta.js
   draws it on a canvas (.halftone, from js/halftone.js) as a swell of bigger dots rolling slowly across; this is the still version for no script and for reduced motion, a plain lattice under a
   diagonal fade, and it is hidden once the canvas is there. Nothing in it radiates from a point. */
.cta-field{position:absolute;inset:-45% -15%;rotate:22deg;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.42) 0 22%,transparent 24%) 0 0/calc(var(--u) * 1.65) calc(var(--u) * 1.65);
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.3) 42%,#000 100%);mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.3) 42%,#000 100%)}
.cta-paper.has-wave .cta-field{display:none}
.js .getapp:not(.in) .halftone{opacity:0}
.js .getapp.in .halftone{transition:opacity 1.4s ease-out .2s}
.cta-stage{position:absolute;inset:0;container-type:size}

/* ---------- a sticker (.cs): where it is, how big, how it is tilted ---------- */
.cs{--sx:1;--sy:1;--fx:calc((50 - var(--x)) * var(--sx) * 1cqw);--fy:calc((46 - var(--y)) * var(--sy) * 1cqh);
  position:absolute;display:block;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqh);width:calc(var(--w) * var(--u));height:auto;max-width:none;rotate:var(--r,0deg);z-index:var(--z,1);
  animation:cs-bob var(--f,6s) ease-in-out var(--bd,0s) infinite alternate}
.cs.xr{left:auto;right:calc(var(--x) * 1cqw);--sx:-1}
.cs.yb{top:auto;bottom:calc(var(--y) * 1cqh);--sy:-1}
@keyframes cs-bob{from{transform:translateY(calc(var(--u) * -.3)) rotate(-1.4deg)}to{transform:translateY(calc(var(--u) * .3)) rotate(1.4deg)}}
/* a print or the strip is a block of its own: its box is the sticker's box */
.cs .pcard{width:100%}
.cs .bstrip{position:relative;display:block;width:100%}
.cs .pcard,.cs .bstrip{filter:drop-shadow(0 calc(var(--u) * .12) calc(var(--u) * .3) rgba(30,42,36,.28))}
.cs .pcard{box-shadow:none}

/* who goes where (the poster, 701px and up). The words sit in the middle third, so nothing is nearer the middle than about a quarter of the width, except below the words. */
.cs-p1{--x:2;--y:61;--w:11.8;--r:-12deg;--z:1;--d:.02s;--spin:-120deg;--f:6.4s;--bd:-.6s}
.cs-p2{--x:8;--y:53.5;--w:12.2;--r:-4deg;--z:2;--d:.08s;--spin:90deg;--f:5.8s;--bd:-2.2s}
.cs-p3{--x:17;--y:62.5;--w:11.8;--r:9deg;--z:3;--d:.14s;--spin:140deg;--f:6.8s;--bd:-1.1s}
.cs-monster{--x:3.2;--y:8;--w:15.5;--r:-10deg;--z:2;--d:.06s;--spin:-200deg;--f:7s;--bd:-3s}
.cs-frog{--x:1.2;--y:36;--w:9.4;--r:8deg;--d:.2s;--spin:160deg;--f:5.2s;--bd:-1.7s}
.cs-rocket{--x:21.5;--y:10;--w:9;--r:6deg;--d:.26s;--spin:-140deg;--f:5.6s;--bd:-.3s}
.cs-flower{--x:41.5;--y:86;--w:5.6;--r:-12deg;--d:.32s;--spin:200deg;--f:6.2s;--bd:-2.6s}
.cs-astro{--x:33;--y:82;--w:8;--r:-9deg;--z:4;--d:.3s;--spin:-170deg;--f:5s;--bd:-.9s}

.cs-vex{--x:3.4;--y:8;--w:14;--r:9deg;--z:2;--d:.1s;--spin:200deg;--f:6.6s;--bd:-1.3s}
.cs-strip{--x:10.5;--y:49;--w:6.9;--r:7deg;--z:2;--d:.16s;--spin:-100deg;--f:6s;--bd:-2.4s}
.cs-roxy{--x:2.2;--y:35;--w:10.4;--r:-8deg;--z:1;--d:.22s;--spin:150deg;--f:5.4s;--bd:-.5s}
.cs-robot{--x:1.6;--y:57;--w:9.4;--r:7deg;--z:3;--d:.24s;--spin:-160deg;--f:6.2s;--bd:-3.3s}
.cs-ghost{--x:15;--y:77;--w:8.6;--r:8deg;--z:3;--d:.34s;--spin:130deg;--f:5.8s;--bd:-1.9s}
.cs-gem{--x:18.6;--y:11;--w:7.6;--r:-12deg;--d:.28s;--spin:180deg;--f:6.4s;--bd:-2.8s}
.cs-present{--x:1.2;--y:74;--w:9.6;--r:6deg;--z:2;--d:.36s;--spin:-130deg;--f:5.6s;--bd:-.2s}
.cs-donut{--x:40;--y:82.5;--w:6.4;--r:14deg;--d:.4s;--spin:210deg;--f:6s;--bd:-1.5s}
.cs-balloon{--x:23;--y:60;--w:6.6;--r:10deg;--d:.38s;--spin:-190deg;--f:5.2s;--bd:-2.1s}
.cs-ice{--x:30;--y:79;--w:6.4;--r:-8deg;--d:.42s;--spin:150deg;--f:6.6s;--bd:-.8s}
/* the heads and things on the right hand side (.xr in the markup) count from the right edge */

/* ---------- the sparkles ---------- */
.sp{position:absolute;left:calc(var(--x) * 1cqw);top:calc(var(--y) * 1cqh);width:calc(var(--w,2.2) * var(--u));aspect-ratio:1;fill:#fff;opacity:0;scale:.2;animation:sp-tw 2.6s ease-in-out var(--bd,0s) infinite}
@keyframes sp-tw{0%,100%{scale:.2;rotate:0deg;opacity:0}45%{scale:1;rotate:45deg;opacity:.95}}
.sp1{--x:33;--y:27;--w:2.6;--bd:.1s}.sp2{--x:66.5;--y:25;--w:2;--bd:1s}.sp3{--x:29.5;--y:57;--w:1.8;--bd:1.7s}.sp4{--x:71;--y:62;--w:2.6;--bd:.5s}.sp5{--x:49;--y:13;--w:1.8;--bd:1.3s}.sp6{--x:58;--y:86;--w:2.2;--bd:2s}

/* ---------- the words and the button ---------- */
.cta-in{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 2.4)}
.cta-h{display:flex;flex-direction:column;align-items:center;font-size:calc(var(--u) * 9.4);line-height:.9;letter-spacing:-.012em;text-shadow:-.032em .045em 0 var(--ghost-sun)}
.cta-l1,.cta-l2{display:block;white-space:nowrap}
.cta-l1{rotate:-4deg;translate:-1.1em .06em}
.cta-l2{rotate:1.6deg;font-size:1.2em}
.cta-btn{position:relative;display:inline-flex;align-items:center;padding:.5em 1.3em .56em;border:.07em solid var(--ink);border-radius:999px;background:var(--pink);color:var(--ink);text-decoration:none;white-space:nowrap;
  font:700 calc(var(--u) * 3.2)/1.05 var(--font-title);font-variation-settings:"wght" 700,"wdth" 100;box-shadow:.085em .1em 0 var(--ink);rotate:-2deg;
  transition:translate .28s var(--spring-pop),rotate .4s var(--spring-pop),box-shadow .12s;animation:cta-breathe 3.4s ease-in-out infinite}
@keyframes cta-breathe{0%,100%{scale:1}50%{scale:1.035}}
/* a ring swells out of it now and then, and a star sticker is stuck on its corner */
.cta-btn::before{content:"";position:absolute;inset:-.09em;border-radius:inherit;border:.07em solid var(--pink);opacity:0;pointer-events:none;animation:cta-ping 2.6s ease-out 1.6s infinite}
@keyframes cta-ping{0%{opacity:.95;scale:1}70%,100%{opacity:0;scale:1.4}}
.cta-star{position:absolute;right:-.42em;top:-.62em;width:1.5em;height:auto;rotate:16deg;pointer-events:none;transition:rotate .4s var(--spring-pop),scale .4s var(--spring-pop)}
.cta-btn:hover{translate:0 -.07em;rotate:1deg}
.cta-btn:hover .cta-star{rotate:-10deg;scale:1.18}
.cta-btn:active{translate:.05em .06em;box-shadow:0 0 0 var(--ink)}
.cta-btn:focus-visible{border-radius:999px;outline:3px solid var(--ink);outline-offset:2px;box-shadow:.085em .1em 0 var(--ink),0 0 0 5px #fff}
.cta-btn.is-hit{animation:cta-hit .5s var(--spring-pop)}
@keyframes cta-hit{0%{scale:1}22%{scale:.92}100%{scale:1}}
.cta-sub{font-size:calc(var(--u) * 1.7);font-weight:800;line-height:1.3;color:var(--ink)}

/* the burst js/cta.js throws when the button is pressed: stickers appended to the page, moved with transform only, removed when they land */
.cta-conf{position:absolute;z-index:58;display:block;height:auto;max-width:none;pointer-events:none;user-select:none;-webkit-user-select:none}

/* ---------- the entrance: JS only, once the section is on screen (.in). Each sticker springs out from behind the button; the words and the button pop after them ---------- */
.js .getapp:not(.in) .cs{opacity:0;scale:.15;translate:var(--fx) var(--fy);rotate:calc(var(--r,0deg) + var(--spin,160deg))}
.js .getapp.in .cs{transition:opacity .25s ease-out var(--d,0s),scale 1s var(--spring-pop) var(--d,0s),translate 1s var(--spring-pop) var(--d,0s),rotate 1.15s var(--spring-pop) var(--d,0s)}
.js .getapp.in .sp{transition:opacity .4s ease-out .6s}
.js .getapp:not(.in) .cta-l1,.js .getapp:not(.in) .cta-l2{opacity:0;scale:.82}
.js .getapp.in .cta-l1,.js .getapp.in .cta-l2{transition:opacity .2s ease-out var(--hd,0s),scale .8s var(--spring-pop) var(--hd,0s)}
.js .getapp.in .cta-l2{--hd:.1s}
.js .getapp:not(.in) .cta-btn,.js .getapp:not(.in) .cta-sub{opacity:0;scale:.7}
.js .getapp.in .cta-btn{transition:opacity .2s ease-out .34s,scale .8s var(--spring-pop) .34s,translate .28s var(--spring-pop),rotate .4s var(--spring-pop),box-shadow .12s}
.js .getapp.in .cta-sub{transition:opacity .3s ease-out .55s,scale .6s var(--spring-pop) .55s}
/* idle motion only while the section is on screen */
.getapp:not(.is-live) .cs,.getapp:not(.is-live) .sp,.getapp:not(.is-live) .cta-btn,.getapp:not(.is-live) .cta-btn::before{animation-play-state:paused}
/* the button, while it is being pointed at: the party gets lively */
.getapp:has(.cta-btn:hover) .cs{animation-duration:calc(var(--f,6s) * .45)}

/* ---------- 900px and under (a phone, or a tablet held upright): a stack. Words and button in the middle, the two big heads above, the three prints below ---------- */
@media (max-width:900px){
  .getapp{min-height:max(100svh,660px);padding:clamp(100px,18vw,160px) calc(18px + var(--sar)) clamp(120px,24vw,200px) calc(18px + var(--sal))}
  .cta-h{font-size:clamp(2.7rem,14.2vw,9rem)}
  .cta-l1{translate:-.7em .04em}
  .cta-in{gap:clamp(18px,4vw,40px)}
  .cta-btn{font-size:clamp(1.7rem,7.6vw,4.4rem)}
  .cta-sub{font-size:clamp(1rem,3.8vw,2rem)}
  /* a stack is as tall as it is wide or taller, so the stickers follow whichever of the width and half the height is smaller (a phone: the width; a tablet held upright: the height). The height is the SMALL one (svh), the section's own: a phone's browser bars take a hundred pixels or more of it */
  .getapp{--cu:min(1vw,.5vh)}
  .cs{width:calc(var(--w) * var(--cu))}
  /* only the cast that fits: two heads and a rocket on top, and the three prints along the bottom (clear of the arrows at the right edge) */
  .cs-frog,.cs-roxy,.cs-robot,.cs-ghost,.cs-gem,.cs-present,.cs-donut,.cs-ice,.cs-flower,.cs-strip,.cs-astro,.cs-balloon{display:none}
  .cs-monster{--x:3;--y:7.5;--w:27;--r:-10deg}
  .cs-vex{--x:4;--y:7.5;--w:24;--r:9deg}
  .cs-rocket{--x:37;--y:9;--w:14;--r:6deg}
  /* the three prints stand on the section's bottom edge, --yb sizes (--cu) up from it, so a short section can never cut them off (placed as a share of the height, a phone with its browser bars showing, aspect 0.56, had the Bear's print cut across its chin;
     --y is still there for the entrance, which starts every sticker from the middle). The first is stepped in 3 units so its tilted corner is not cut by the screen's left edge */
  .cs-p1{--x:5;--y:73;--w:33;--r:-12deg;--yb:8}
  .cs-p2{--x:27;--y:69.5;--w:34;--r:-2deg;--yb:13.5}
  .cs-p3{--x:51;--y:74;--w:33;--r:10deg;--yb:8}
  .cs-p1,.cs-p2,.cs-p3{top:auto;bottom:calc(var(--yb) * var(--cu))}
  .sp1{--x:12;--y:30;--w:5}.sp2{--x:84;--y:28;--w:4}.sp3{--x:8;--y:52;--w:4}.sp4{--x:88;--y:52;--w:5}.sp5{--x:50;--y:13;--w:4}.sp6{--x:70;--y:64;--w:4}
}
@supports (height:1svh){
  @media (max-width:900px){.getapp{--cu:min(1vw,.5svh)}}
}
/* a short screen (a phone on its side, a small laptop window): the section is as tall as a phone's, whatever the window, so the stickers follow the width alone and the heads are a little smaller */
@media (max-width:900px) and (max-height:700px){
  .cs{width:calc(var(--w) * 1vw)}
  .cs-monster{--w:17}.cs-vex{--w:15}.cs-rocket{display:none}
  .getapp{padding-top:96px;--cu:min(1vw,3.6px)}   /* the section is 660px tall whatever the window, so the prints are no bigger than a phone's (they were 33vw wide: 280px on a phone on its side, and cut off by 200px) */
  .cs-p1,.cs-p2,.cs-p3{width:calc(var(--w) * var(--cu))}
}

/* ---------- reduced motion, and print ---------- */
@media (prefers-reduced-motion:reduce){
  .cs,.sp,.cta-btn,.cta-btn::before{animation:none!important}
  .sp{opacity:.9;scale:1}
  .cta-btn::before{display:none}
  .js .getapp:not(.in) .cs,.js .getapp:not(.in) .cta-l1,.js .getapp:not(.in) .cta-l2,.js .getapp:not(.in) .cta-btn,.js .getapp:not(.in) .cta-sub{opacity:1;scale:1;translate:none}
  .js .getapp:not(.in) .cs{rotate:var(--r,0deg)}
  .cs,.cta-l1,.cta-l2,.cta-btn,.cta-sub,.cta-star{transition:none!important}
}
@media print{.cta-art,.cta-paper{display:none}.getapp{min-height:0;background:#fff}}