/* ---- Making it obvious what to touch ----

   The old cue was a soft glow. On a pale page it was invisible, so a child
   would tap through and never know a page was waiting for them. Everything
   here exists to answer one question before it is asked: where do I press?
*/

/* the target itself: a ring that beats like a small heart */
.spot{
  position:absolute;
  transform:translate(-50%,-50%);
  border-radius:50%;
  cursor:pointer;
  background:radial-gradient(circle,
    rgba(255,236,190,.34) 0%,
    rgba(255,214,120,.16) 44%,
    rgba(255,214,120,0)   70%);
  box-shadow:
    0 0 0 3px rgba(255,246,214,.9),
    0 0 0 5px rgba(60,46,26,.35),
    0 0 26px 8px rgba(255,206,96,.45),
    inset 0 0 34px rgba(255,238,196,.3);
  animation:spotBeat 1.9s var(--ease-soft) infinite;
  transition:opacity .7s var(--ease-soft), transform .7s var(--ease-petal);
}

@keyframes spotBeat{
  0%,100%{ transform:translate(-50%,-50%) scale(1);    opacity:.92; }
  45%    { transform:translate(-50%,-50%) scale(1.13); opacity:1; }
}

/* on a pale page the ring needs a dark edge or it disappears into the paper */
.spot::before{
  content:'';
  position:absolute; inset:-3px;
  border-radius:50%;
  box-shadow:0 0 0 2px rgba(40,32,20,.22);
  pointer-events:none;
}


@keyframes fingerTap{
  0%, 62%, 100% { transform:translate(0,0)     scale(1);   opacity:.95; }
  12%           { transform:translate(0,-9px)  scale(1.06); opacity:1; }
  24%           { transform:translate(0,0)     scale(.94);  opacity:1; }
  36%           { transform:translate(0,-9px)  scale(1.06); opacity:1; }
  48%           { transform:translate(0,0)     scale(.94);  opacity:1; }
}

/* variants keep the ring but change what the finger is doing */
.spot--drag .spot__finger{ animation:fingerDrag 2.8s var(--ease-soft) infinite; }
@keyframes fingerDrag{
  0%,100%{ transform:translate(-14px,0); opacity:.95; }
  50%    { transform:translate( 14px,0); opacity:1; }
}
.spot--hold .spot__finger{ animation:fingerHold 2.2s var(--ease-soft) infinite; }
@keyframes fingerHold{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.14); opacity:1; }
}

/* counted targets carry the number still to find */

.spot__n{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:"Gentium Book Plus", Georgia, serif;
  font-size:1.15rem;
  color:rgba(48,38,24,.9);
  text-shadow:0 1px 0 rgba(255,246,220,.75);
  pointer-events:none;
}

/* found / used */
.spot.is-used,
.spot.is-held{
  opacity:0;
  transform:translate(-50%,-50%) scale(1.75);
  pointer-events:none;
  animation:none;
}
.spot.is-used .spot__finger,
.spot.is-used::before{ display:none; }
/*
  A running animation writes opacity every frame, so it beats a plain
  declaration. Anything that hides or dims a target must stop the animation
  too — forgetting this once made every stepping stone look pressable while
  only one of them actually was.
*/
.spot.is-waiting{ animation:none; opacity:0; pointer-events:none; }

/* a stone further along the crossing: visible, but plainly not its turn */
.spot.is-later{
  animation:none;
  opacity:.34;
  pointer-events:none;
  box-shadow:0 0 0 2px rgba(255,246,214,.4), 0 0 0 4px rgba(60,46,26,.2);
}
.spot.is-later .spot__finger{ display:none; }
.spot.is-later .spot__n{ opacity:.65; }

/* ---- how many left to find ---- */

.counter{
  position:absolute;
  z-index:9;
  left:50%;
  top:calc(var(--safe-t) + 3.2rem);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.55rem;
  padding:.42rem .95rem;
  border-radius:999px;
  background:rgba(12,18,18,.58);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,238,196,.22);
  color:var(--paper);
  font-size:.95rem; letter-spacing:.04em;
  pointer-events:none;
  opacity:0;
  transition:opacity .5s var(--ease-soft);
}
.counter.is-on{ opacity:1; }
.counter__pip{
  width:11px; height:11px;
  border-radius:50%;
  background:rgba(255,238,196,.24);
  box-shadow:inset 0 0 0 1px rgba(255,238,196,.4);
  transition:background .45s var(--ease-soft), transform .45s var(--ease-petal);
}
.counter__pip.is-got{
  background:var(--gold-soft);
  transform:scale(1.28);
  box-shadow:0 0 12px rgba(255,224,150,.85);
}

/* ---- the nudge, louder than before ---- */

.nudge{
  position:absolute;
  z-index:9;
  left:50%; bottom:calc(var(--safe-b) + 5.4rem);
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .9rem .4rem .7rem;
  border-radius:999px;
  background:rgba(12,18,18,.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,238,196,.2);
  color:rgba(255,246,224,.92);
  font-size:.86rem;
  pointer-events:none;
  animation:nudgeIn .7s var(--ease-soft) both;
}
@keyframes nudgeIn{ from{ opacity:0; transform:translateX(-50%) translateY(8px); } }

.nudge__dot{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--gold-soft);
  animation:pulse 2s var(--ease-soft) infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(255,224,150,.6); }
  70% { box-shadow:0 0 0 16px rgba(255,224,150,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,224,150,0); }
}

/* the page itself leans forward a little while it waits */
.stage.is-waiting .layer--art{ animation:waitingBreath 5.5s ease-in-out infinite; }
@keyframes waitingBreath{
  0%,100%{ filter:brightness(1); }
  50%    { filter:brightness(1.045); }
}

/* ---- pieces the little games need ---- */

/* the drop swelling under a cloud that is being squeezed */
.bead{
  position:absolute;
  left:50%; top:30%;
  width:calc(6px + var(--heavy,0) * 10px);
  height:calc(8px + var(--heavy,0) * 14px);
  margin-left:-8px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:linear-gradient(180deg, rgba(232,244,242,.95), rgba(180,212,208,.8));
  box-shadow:0 0 16px rgba(226,240,238,.8);
  opacity:var(--heavy,0);
  transition:width .4s var(--ease-petal), height .4s var(--ease-petal), opacity .4s;
  pointer-events:none;
}

/* the cloud sags as it fills */
.stage.is-waiting .layer--art{ transform-origin:50% 20%; }

/* a hollow with nothing in it gives a little shake */
.spot.is-empty{ animation:emptyShake .6s var(--ease-soft); }
@keyframes emptyShake{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  25%    { transform:translate(-54%,-50%) scale(.96); }
  75%    { transform:translate(-46%,-50%) scale(.96); }
}

/* where a drag should end */
.spot--target{
  animation:targetPull 2.2s var(--ease-soft) infinite;
  box-shadow:
    0 0 0 2px rgba(255,238,196,.4),
    0 0 26px 8px rgba(255,214,120,.25);
}

@keyframes targetPull{
  0%,100%{ transform:translate(-50%,-50%) scale(.9);  opacity:.6; }
  50%    { transform:translate(-50%,-50%) scale(1.1); opacity:.95; }
}

/* fireflies you can actually catch */
.firefly{
  position:absolute;
  width:26px; height:26px;
  margin:-13px 0 0 -13px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,250,220,1) 0%,
    rgba(255,226,150,.72) 34%,
    rgba(255,226,150,0) 72%);
  box-shadow:0 0 30px 10px rgba(255,230,160,.55);
  cursor:pointer;
  transition:left .55s var(--ease-petal), top .55s var(--ease-petal);
  animation:bugDrift 3.4s ease-in-out infinite;
}
@keyframes bugDrift{
  0%,100%{ transform:translate(0,0)      scale(1);   opacity:.82; }
  33%    { transform:translate(7px,-9px) scale(1.1); opacity:1; }
  66%    { transform:translate(-6px,5px) scale(.94); opacity:.9; }
}
.firefly.is-caught{ animation:bugCaught .9s var(--ease-petal) forwards; pointer-events:none; }
@keyframes bugCaught{
  40% { transform:scale(2.1); opacity:1; }
  100%{ transform:scale(.2);  opacity:0; }
}

/* the wood greening as trees are woken */
.layer--touch{ --green:0; }


/* ---- the finger, drawn as a real element so it can never silently fail ---- */

.spot__finger{
  position:absolute;
  left:50%; top:50%;
  width:40px; height:40px;
  margin:-4px 0 0 -9px;
  fill:#fff8e8;
  stroke:#2f2517;
  stroke-width:1.15;
  stroke-linejoin:round;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.55));
  animation:fingerTap 2.6s var(--ease-soft) infinite;
  pointer-events:none;
}

/* ---- the cue bar: what to do, and how many are left ---- */

.cue{
  position:absolute;
  z-index:12;
  left:50%;
  transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem;
  padding:.46rem 1rem .46rem .75rem;
  border-radius:999px;
  background:rgba(14,20,20,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,238,196,.24);
  box-shadow:0 8px 26px rgba(0,0,0,.35);
  color:rgba(255,247,228,.95);
  font-size:.9rem; letter-spacing:.015em;
  white-space:nowrap;
  pointer-events:none;
  animation:cueIn .7s var(--ease-soft) both;

  /* words at the bottom by default, so the cue lives at the top */
  top:calc(var(--safe-t) + 3.4rem);
  bottom:auto;
}

/*
  When the words sit at the top the cue tucks in just beneath them rather than
  dropping to the floor, where it used to land on top of whatever the child was
  being asked to press.
*/
.book.words-top .cue{
  top:34%;
  bottom:auto;
}

@keyframes cueIn{ from{ opacity:0; transform:translateX(-50%) translateY(-8px); } }

.cue__dot{
  width:10px; height:10px;
  border-radius:50%;
  background:var(--gold-soft);
  animation:pulse 2s var(--ease-soft) infinite;
  flex:none;
}
.cue__pips{ display:flex; gap:.34rem; }
.counter__pip{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,238,196,.2);
  box-shadow:inset 0 0 0 1px rgba(255,238,196,.45);
  transition:background .45s var(--ease-soft), transform .45s var(--ease-petal);
}
.counter__pip.is-got{
  background:var(--gold-soft);
  transform:scale(1.3);
  box-shadow:0 0 12px rgba(255,224,150,.9);
}

/* ---- the camera moves smoothly, but follows the finger closely ---- */

.layer--art{ transition:transform .18s linear; }
.stage.is-turning .layer--art{ transition:opacity var(--turn-ms) var(--ease-petal),
                                          transform var(--turn-ms) var(--ease-petal); }

/* a second painting laid over the first */
.layer--after{
  z-index:2;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  transform:scale(1.09);
  pointer-events:none;
  will-change:opacity;
}

/* ---- moths, carried over to a lonely owl ---- */

.moth{
  position:absolute;
  width:22px; height:22px;
  margin:-11px 0 0 -11px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,250,232,.95) 0%, rgba(240,232,200,.5) 42%, rgba(240,232,200,0) 72%);
  box-shadow:0 0 20px 6px rgba(255,246,214,.45);
  animation:mothFlit 2.6s ease-in-out infinite;
  pointer-events:none;
  transition:left 1.1s var(--ease-petal), top 1.1s var(--ease-petal);
}
@keyframes mothFlit{
  0%,100%{ transform:translate(0,0)       scale(1); }
  30%    { transform:translate(5px,-6px)  scale(1.1); }
  70%    { transform:translate(-4px,4px)  scale(.94); }
}
.moth.is-going{ animation:none; opacity:.9; }

/* ---- a candle going out ---- */

.snuff{
  position:absolute;
  width:9%; padding-bottom:11%;
  transform:translate(-50%,-50%) scale(.5);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 55%,
    rgba(26,40,44,.96) 0%,
    rgba(26,40,44,.85) 48%,
    rgba(26,40,44,0)   74%);
  opacity:0;
  transition:opacity .55s var(--ease-soft), transform .55s var(--ease-petal);
  pointer-events:none;
}
.snuff.is-on{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.snuff.is-on::after{
  content:'';
  position:absolute;
  left:50%; top:6%;
  width:3px; height:44%;
  margin-left:-1.5px;
  border-radius:2px;
  background:linear-gradient(to top, rgba(200,208,206,.5), rgba(200,208,206,0));
  animation:smoke 2.4s ease-out forwards;
}
@keyframes smoke{
  from{ opacity:0; transform:translateY(6px)   scaleY(.4); }
  35% { opacity:.75; }
  to  { opacity:0; transform:translateY(-26px) scaleY(1.5); }
}


/* the number on a stone, so counting to three is part of the crossing */
.spot__n{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-family:"Gentium Book Plus", Georgia, serif;
  font-size:1.35rem;
  color:#fff8e8;
  text-shadow:0 1px 4px rgba(30,24,14,.85), 0 0 12px rgba(255,214,120,.6);
  pointer-events:none;
}
/* when a stone carries a number the finger steps aside for it */
.spot--stone .spot__finger{
  left:auto; right:6%;
  top:58%;
  width:26px; height:26px;
  margin:0;
}