/* torch and the hidden words */
html,body{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.hasmouse{cursor:none}

.torch{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(255,240,200,.30) 0%,rgba(255,233,176,.12) 38%,transparent 68%);
  mix-blend-mode:screen;opacity:0;transition:opacity .6s;will-change:transform}
.torch.on{opacity:1;animation:tflick 5s infinite}
@keyframes tflick{0%,100%{filter:brightness(1)}30%{filter:brightness(.9)}31%{filter:brightness(1.12)}60%{filter:brightness(.95)}}

/* the hidden words sit in the foreground, in front of the door, and only exist inside the beam */
.hidden-layer{position:absolute;inset:0;z-index:4;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle 150px at var(--tx,-999px) var(--ty,-999px),#000 0,#000 40%,transparent 100%);
          mask-image:radial-gradient(circle 150px at var(--tx,-999px) var(--ty,-999px),#000 0,#000 40%,transparent 100%)}
.secret{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;
  font-family:'Libre Baskerville','Times New Roman',serif;font-weight:700;text-transform:uppercase;color:#fff;
  font-size:min(8.6vw,5.4svh);line-height:1.12;letter-spacing:.04em;
  text-shadow:0 0 18px rgba(255,255,255,.75),0 0 50px rgba(255,255,255,.4)}
.secret span{display:block}
.secret .big{font-size:1.6em;letter-spacing:.08em;margin:.04em 0}

.hint{position:fixed;top:1.8svh;left:0;right:0;text-align:center;z-index:4;pointer-events:none;
  font-family:'Libre Baskerville','Times New Roman',serif;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:#6f6f6f;
  opacity:0;transition:opacity 2.5s}
.hint.show{opacity:1}
@media (min-aspect-ratio:5/4){.secret{font-size:min(5.8svh,2.7vw)}}

@media (prefers-reduced-motion:reduce){.torch.on{animation:none}}

/* sound button, top right, clear of the clock and the quote */
.snd{position:fixed;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:6;width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);border:1px solid #3a3a3a;color:#cfcfcf;cursor:pointer;padding:0;
  transition:color .2s,border-color .2s}
.snd:hover,.snd:focus-visible{color:#fff;border-color:#bbb;outline:none}
.snd .x{display:none}
.snd.off{color:#6a6a6a}
.snd.off .x{display:inline}
.snd.off .w{display:none}
body.hasmouse .snd{cursor:pointer}

/* until the first tap, the sound button gently pulses so people know sound is waiting */
.snd.wait{animation:snd-wait 2.2s ease-in-out infinite}
@keyframes snd-wait{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.14)}}
@media (prefers-reduced-motion:reduce){.snd.wait{animation:none}}

/* the extra hidden line, small and wide-set under the main words */
.secret .note{font-size:.37em;letter-spacing:.12em;line-height:1.5;margin-top:1.8em;color:#e6e6e6;text-transform:none}
.secret .note span{display:block;letter-spacing:inherit;font-size:1em;margin:0}

/* a plain prompt under the speaker button until the first click or tap, because browsers will not play sound before that */
.snd-tip{position:fixed;top:calc(max(10px,env(safe-area-inset-top)) + 46px);right:max(10px,env(safe-area-inset-right));z-index:6;pointer-events:none;
  font-family:'Libre Baskerville','Times New Roman',serif;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:#a8a8a8;
  opacity:0;animation:tip-in 1.2s ease 1s forwards;transition:opacity .6s}
.snd-tip .for-touch{display:none}
@media (hover:none){.snd-tip .for-mouse{display:none}.snd-tip .for-touch{display:inline}}
body.engaged .snd-tip{animation:none;opacity:0}
@keyframes tip-in{to{opacity:1}}