/* 2021 · Sabeti Land — "candy" intro. Everything scoped to .in-candy (set on the chapter's pin). */
.in-candy .cl{position:absolute;inset:0;overflow:hidden}
.in-candy .cl-sky{position:absolute;inset:0;background:linear-gradient(180deg,#e6f0fb 0%,#f3ecf4 38%,#f7ebf1 100%);will-change:opacity}
.in-candy .cl-cloud{position:absolute;z-index:1;border-radius:50%;background:#fff;opacity:0;will-change:transform,opacity}
.in-candy .cl-cloud::before,.in-candy .cl-cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.in-candy .cl-cloud::before{left:16%;top:-50%;width:44%;height:130%}
.in-candy .cl-cloud::after{left:48%;top:-28%;width:38%;height:108%}
.in-candy .cl-hill{position:absolute;z-index:2;border-radius:50%;will-change:transform}
.in-candy .cl-hill.far{background:linear-gradient(180deg,#dcefd6,#c8e4be 30%,#bddcb2)}
.in-candy .cl-hill.near{background:linear-gradient(180deg,#c3e3b6,#a8d39a 35%,#9ccb8d)}
.in-candy .cl-svg{position:absolute;left:0;top:0;z-index:3;overflow:visible;pointer-events:none}
.in-candy .cl-start{position:absolute;z-index:5;font:500 11px/1 var(--sans);letter-spacing:.2em;color:#fff;background:var(--accent);padding:5px 9px 4px 10px;border-radius:999px;opacity:0;will-change:transform,opacity;box-shadow:0 3px 8px rgba(59,42,61,.2)}
.in-candy .cl-start.fin{background:#3b2a3d;letter-spacing:.12em}
.in-candy .cl.narrow .cl-start{font-size:9px;padding:4px 7px 3px 8px}

/* candy props, drawn with gradients (and one SVG spiral). --s is the base size; each kind's box is --s wide and grows upward
   from its anchor. z-index is set per prop from its depth: behind the path (< 1), mid (3) or nearest (4) */
.in-candy .cl-prop{position:absolute;z-index:4;width:var(--s);transform-origin:50% 100%;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 6px 8px rgba(59,42,61,.16))}
.in-candy .cl-prop.lolli .stick{position:absolute;left:46%;top:calc(var(--s)*.5);bottom:0;width:8%;border-radius:999px;background:linear-gradient(90deg,#fff,#e6dfe4)}
.in-candy .cl-prop.lolli .disc{position:absolute;left:0;top:0;width:100%;height:var(--s);display:block;transform-origin:50% 50%;will-change:transform}
.in-candy .cl-prop.lolli .shine{position:absolute;left:0;top:0;width:100%;height:var(--s);border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.72),rgba(255,255,255,0) 40%);box-shadow:inset 0 -3px 8px rgba(59,42,61,.1);pointer-events:none}
.in-candy .cl-prop.drop{height:calc(var(--s)*.85)}
.in-candy .cl-prop.drop .dome{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--s)*.85);border-radius:50% 50% 44% 44%/64% 64% 36% 36%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.75),rgba(255,255,255,0) 42%),radial-gradient(circle,rgba(255,255,255,.85) 0 1.4px,rgba(255,255,255,0) 2.2px) 0 0/9px 9px,var(--c1);box-shadow:inset 0 -4px 10px rgba(59,42,61,.14)}
.in-candy .cl-prop.drop.tree{height:calc(var(--s)*1.5)}
.in-candy .cl-prop.drop.tree .dome{bottom:auto;top:0}
.in-candy .cl-prop.drop.tree .trunk{position:absolute;left:44%;bottom:0;width:12%;height:50%;border-radius:3px;background:linear-gradient(90deg,#c39a74,#8f6647)}
.in-candy .cl-prop.cone{height:calc(var(--s)*1.9)}
.in-candy .cl-prop.cone .wafer{position:absolute;left:8%;top:40%;width:84%;height:60%;clip-path:polygon(0 0,100% 0,50% 100%);background:repeating-linear-gradient(45deg,#e6c9a4 0 6px,#c9a47c 6px 11px),repeating-linear-gradient(-45deg,#e6c9a4 0 6px,#c9a47c 6px 11px);background-blend-mode:multiply}
.in-candy .cl-prop.cone .scoop{position:absolute;left:0;top:0;width:100%;height:calc(var(--s)*.92);border-radius:50% 50% 46% 46%/56% 56% 44% 44%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.8),rgba(255,255,255,0) 44%),var(--c1)}
.in-candy .cl-prop.cone .scoop::after{content:"";position:absolute;left:28%;top:72%;width:16%;height:38%;border-radius:0 0 50% 50%;background:var(--c1)}
.in-candy .cl-prop.mint{height:var(--s)}
.in-candy .cl-prop.mint .disc{position:absolute;inset:0;border-radius:50%;transform-origin:50% 50%;will-change:transform;background:radial-gradient(circle,#fff 0 23%,rgba(255,255,255,0) 24%),conic-gradient(var(--c1) 0 45deg,#fff 45deg 90deg,var(--c1) 90deg 135deg,#fff 135deg 180deg,var(--c1) 180deg 225deg,#fff 225deg 270deg,var(--c1) 270deg 315deg,#fff 315deg 360deg);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset 0 -2px 6px rgba(59,42,61,.12)}
.in-candy .cl-prop.grass{height:calc(var(--s)*.9);filter:none}
.in-candy .cl-prop.grass::before{content:"";position:absolute;inset:0;background:var(--c1);clip-path:polygon(0 100%,8% 42%,18% 100%,27% 8%,38% 100%,50% 0,62% 100%,72% 16%,82% 100%,91% 46%,100% 100%)}

/* lab members (cut-outs from the inside page) standing along the path */
.in-candy .cl-char{position:absolute;z-index:5;transform-origin:50% 100%;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 10px 12px rgba(59,42,61,.22))}
.in-candy .cl-char img{display:block;width:100%;height:100%}

/* die: a 3-D cube, --d is its edge */
.in-candy .cl-dsh,.in-candy .cl-psh{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,rgba(59,42,61,.3),rgba(59,42,61,0) 68%);opacity:0;will-change:transform,opacity}
.in-candy .cl-dsh{z-index:3}
.in-candy .cl-psh{left:0;top:0;z-index:4}
.in-candy .cl-die{position:absolute;left:0;top:0;z-index:7;perspective:calc(var(--d)*9);opacity:0;will-change:transform,opacity}
.in-candy .cl-cube{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.in-candy .cl-face{position:absolute;inset:0;border-radius:16%;background:linear-gradient(150deg,#fff,#f3ecf1);box-shadow:inset 0 0 0 1px rgba(59,42,61,.08)}
.in-candy .cl-face.r,.in-candy .cl-face.l,.in-candy .cl-face.b{background:linear-gradient(150deg,#f6eff4,#e7dbe4)}
.in-candy .cl-face.u{background:#e3d6df}
.in-candy .cl-face.f{transform:translateZ(calc(var(--d)/2))}
.in-candy .cl-face.b{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.in-candy .cl-face.r{transform:rotateY(90deg) translateZ(calc(var(--d)/2))}
.in-candy .cl-face.l{transform:rotateY(-90deg) translateZ(calc(var(--d)/2))}
.in-candy .cl-face.t{transform:rotateX(90deg) translateZ(calc(var(--d)/2))}
.in-candy .cl-face.u{transform:rotateX(-90deg) translateZ(calc(var(--d)/2))}
.in-candy .cl-face i{position:absolute;width:19%;height:19%;border-radius:50%;background:var(--accent);transform:translate(-50%,-50%)}
.in-candy .cl-face .p0{left:27%;top:27%}.in-candy .cl-face .p1{left:50%;top:27%}.in-candy .cl-face .p2{left:73%;top:27%}
.in-candy .cl-face .p3{left:27%;top:50%}.in-candy .cl-face .p4{left:50%;top:50%}.in-candy .cl-face .p5{left:73%;top:50%}
.in-candy .cl-face .p6{left:27%;top:73%}.in-candy .cl-face .p7{left:50%;top:73%}.in-candy .cl-face .p8{left:73%;top:73%}

/* pawn */
.in-candy .cl-pawn{position:absolute;left:0;top:0;z-index:8;transform-origin:50% 100%;opacity:0;will-change:transform,opacity;filter:drop-shadow(0 4px 6px rgba(59,42,61,.28))}
.in-candy .cl-pawn>div{position:absolute;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#ea8cb8,var(--accent) 48%,#8c2c5c)}
.in-candy .cl-pawn .head{top:0;width:54%;height:32%;border-radius:50%}
.in-candy .cl-pawn .collar{top:28%;width:62%;height:10%;border-radius:50%}
.in-candy .cl-pawn .body{top:33%;width:100%;height:49%;clip-path:polygon(36% 0,64% 0,88% 100%,12% 100%)}
.in-candy .cl-pawn .base{top:78%;width:100%;height:22%;border-radius:50%}

/* the board: panels hinged on their left edge, unfolding in a wave; --seam (set on .cl-board) fades the crease lines once flat */
.in-candy .cl-board{position:absolute;z-index:6;perspective:1400px;pointer-events:none;--seam:.35}
.in-candy .cl-frame{position:absolute;inset:-6px;border-radius:8px;background:#fff;box-shadow:0 26px 60px rgba(59,42,61,.24);opacity:0;will-change:transform,opacity}
.in-candy .cl-tile{position:absolute;background-repeat:no-repeat;transform-origin:0% 50%;opacity:0;will-change:transform,opacity;box-shadow:inset 0 0 0 1px rgba(255,255,255,var(--seam))}