/* ===========================================================================
   CAVE MODE: the things that live down here.
   Paired with cave-crawl.js. Delete both and the cave is empty again.
   =========================================================================== */

/* The creatures sit ABOVE the torch darkness (.torch is z-index 9990), not
   below it. Below it they would be perfectly hidden, which sounds right and
   plays wrong: nothing appears to happen and the whole thing reads as broken.
   Above it, drawn nearly black, they are a suggestion of a shape you are not
   quite sure about, and the beam is what confirms it. --lit is written from JS
   as the torch closes on them, and it does the confirming. */
.crawlers{position:fixed;inset:0;z-index:9993;pointer-events:none;
  opacity:0;transition:opacity .9s ease}
.crawlers.on{opacity:1}

.cr{position:absolute;left:0;top:0;will-change:transform;
  /* almost nothing in the dark, everything in the beam */
  color:rgb(calc(24 + var(--lit,0) * 190), calc(20 + var(--lit,0) * 168), calc(18 + var(--lit,0) * 140));
  opacity:calc(.30 + var(--lit,0) * .70);
  filter:drop-shadow(0 0 calc(var(--lit,0) * 9px) rgba(255,170,90,calc(var(--lit,0) * .55)))}
.cr svg{width:100%;height:100%;display:block;overflow:visible}

/* THE EYES ARE THE WHOLE TRICK. The body fades out in the dark; the eyes never
   quite do. A pair of eyes with no body attached is worse than either, and it
   is what makes you look twice at a corner of the screen. */
.cr .cr-eye{fill:#FFCE7A;opacity:calc(.55 + var(--lit,0) * .45)}
.cr-moth .cr-eye{fill:#EFE6FF}
.cr-spider .cr-eye{fill:#FF9A7A}

/* the moth is lit from in front, because it is flying at the torch */
.cr-moth{color:rgb(calc(40 + var(--lit,0) * 190), calc(36 + var(--lit,0) * 176), calc(46 + var(--lit,0) * 168));
  opacity:calc(.34 + var(--lit,0) * .66)}

/* ---------------------------------------------------------------- the sound
   Sits under the mode switch, same corner, same language, so the two controls
   that belong to cave mode read as a pair. Only exists while the lights are out. */
.cr-sound{position:fixed;z-index:9997;display:none;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;border-radius:999px;cursor:pointer;
  bottom:calc(env(safe-area-inset-bottom,0px) + 76px);
  right:calc(env(safe-area-inset-right,0px) + clamp(4px,2.2vw,30px) + 62px);
  color:#FFE7C4;background:linear-gradient(120deg,rgba(46,22,4,.94),rgba(24,11,2,.94));
  border:1px solid rgba(255,186,96,.5);
  box-shadow:0 0 0 3px rgba(255,170,70,.08),0 0 20px rgba(255,158,58,.4),0 6px 20px rgba(0,0,0,.7);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s ease,color .2s ease}
html[data-mode="cave"] .cr-sound{display:inline-flex}
.cr-sound svg{width:17px;height:17px}
.cr-sound:hover{transform:translateY(-1px);box-shadow:0 0 0 4px rgba(255,170,70,.12),0 0 26px rgba(255,158,58,.55),0 6px 20px rgba(0,0,0,.7)}
.cr-sound:focus-visible{outline:2px solid #FFCE7A;outline-offset:3px}
.cr-sound.off{color:rgba(255,231,196,.5);border-color:rgba(255,186,96,.22);
  box-shadow:0 6px 20px rgba(0,0,0,.7)}

@media(max-width:620px){
  .cr-sound{width:36px;height:36px;
    bottom:calc(env(safe-area-inset-bottom,0px) + 126px);
    right:calc(env(safe-area-inset-right,0px) + 30px)}
}

/* Nothing crawls and nothing is drawn for someone who asked for stillness.
   The JS refuses to start the loop as well; this is the belt to that braces. */
@media(prefers-reduced-motion:reduce){
  .crawlers{display:none}
  .cr-sound{transition:none}
  .cr-sound:hover{transform:none}
}