/* ---- interactive furniture: everything the reader can touch ---- */

.layer--touch{ pointer-events:auto; }

}

/* the raindrop */
.drop{
  position:absolute;
  left:50%; top:24%;
  width:9px; height:13px;
  margin-left:-4.5px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:linear-gradient(180deg, rgba(226,240,238,.95), rgba(180,212,208,.75));
  box-shadow:0 0 14px rgba(226,240,238,.7);
  transition:transform 1.4s cubic-bezier(.5,0,.75,.4), opacity .3s 1.35s;
}
.drop.is-falling{ transform:translateY(58vh) scaleY(1.5); opacity:0; }

/* the stem that grows with your finger */
.stem{
  position:absolute;
  left:50%; bottom:14%;
  width:5px; height:52%;
  margin-left:-2.5px;
  --grown:0;
  pointer-events:none;
}
.stem__line{
  position:absolute; inset:auto 0 0 0;
  height:calc(var(--grown) * 100%);
  border-radius:3px;
  background:linear-gradient(180deg, #8fae72, #5f7d4e);
  box-shadow:0 0 18px rgba(180,220,150,.35);
  transition:height .12s linear;
}
.stem__tip{
  position:absolute;
  left:50%; bottom:calc(var(--grown) * 100%);
  width:20px; height:20px;
  margin-left:-10px; margin-bottom:-6px;
  border-radius:50% 50% 50% 50% / 66% 66% 34% 34%;
  background:radial-gradient(circle at 40% 35%, #f4dfa6, #d5a95c);
  box-shadow:0 0 26px rgba(240,217,160,.75);
  opacity:calc(var(--grown) * 1.2);
  transition:bottom .12s linear;
}
.stem.is-done .stem__tip{ animation:bloomPop 1s var(--ease-petal) forwards; }
@keyframes bloomPop{ 60%{ transform:scale(1.9); } 100%{ transform:scale(1.5); } }

/* the petals you pull apart */
.petal{
  position:absolute;
  left:50%; top:48%;
  width:34%; padding-bottom:44%;
  border-radius:60% 60% 40% 40%;
  background:linear-gradient(150deg, rgba(246,226,190,.95), rgba(214,168,110,.9));
  box-shadow:inset 0 -14px 30px rgba(150,105,60,.35);
  pointer-events:none;
  transition:transform 1.1s var(--ease-petal);
}
.petal--l{ transform-origin:100% 50%; transform:translate(-100%,-50%) rotate(calc(var(--open,0) * -66deg)); }
.petal--r{ transform-origin:0% 50%;   transform:translate(0,-50%)      rotate(calc(var(--open,0) *  66deg)); }

/* the firefly */
.firefly{
  position:absolute;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,244,200,1) 0%, rgba(255,226,150,.6) 40%, rgba(255,226,150,0) 72%);
  box-shadow:0 0 26px 8px rgba(255,230,160,.55);
  cursor:pointer;
  transition:left 1.1s var(--ease-petal), top 1.1s var(--ease-petal);
  animation:bugFlicker 1.4s ease-in-out infinite;
}
.firefly.is-still{ animation:bugSettle 1.6s var(--ease-soft) forwards; }
@keyframes bugFlicker{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }
@keyframes bugSettle{ to{ transform:scale(2.2); opacity:1; } }

/* drawing surfaces */
.trace{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}
.trace--draw{ pointer-events:none; }

/* candle flames */
.flame{
  position:absolute;
  bottom:34%;
  width:16px; height:26px;
  margin-left:-8px;
  border-radius:50% 50% 42% 42% / 68% 68% 32% 32%;
  background:linear-gradient(180deg, rgba(255,246,210,1), rgba(255,186,74,.92));
  box-shadow:0 0 34px 10px rgba(255,196,96,.5);
  transform-origin:50% 100%;
  animation:flicker 1.5s ease-in-out infinite;
  pointer-events:none;
  transition:opacity .5s, transform .5s var(--ease-petal);
}
.flame.is-out{ opacity:0; transform:scaleY(.2) translateY(6px); }
@keyframes flicker{
  0%,100%{ transform:scaleY(1)    skewX(0deg); }
  33%    { transform:scaleY(1.14) skewX(4deg); }
  66%    { transform:scaleY(.94)  skewX(-4deg); }
}

/* the grey wood floods with colour */
.layer--touch.is-colouring ~ .layer--near,
.stage.is-colouring .layer--mid{ filter:saturate(1); }

/* the dark hill lights up */
.layer--touch.is-lit{ box-shadow:inset 0 0 200px 60px rgba(240,217,160,.14); }

/* the dedication sits on the picture like a note laid on a page,
   so the sleeping animals underneath are never hidden by words */
.prose.is-dedication{
  top:50%; bottom:auto;
  transform:translateY(-50%);
  background:none;
  padding:var(--prose-pad);
}
.prose.is-dedication .prose__text{
  max-width:30ch;
  width:min(92%, 30ch);
  margin:0 auto;
  padding:1.7rem 1.5rem;
  border-radius:14px;
  text-align:center;
  font-size:clamp(.98rem, 3.7vw, 1.28rem);
  line-height:1.72;
  background:rgba(10,16,17,.62);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(240,217,160,.16);
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  text-shadow:none;
}
.prose.is-dedication .prose__text br{
  content:'';
  display:block;
  margin-bottom:.62em;
}
.prose.is-dedication .prose__text strong{
  margin-top:.5em;
  font-size:1.06em;
  letter-spacing:.02em;
}