@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');
:root{--serif:'Libre Baskerville','Times New Roman',Georgia,serif}
*{box-sizing:border-box;margin:0}
html,body{background:#000;height:100%;overflow:hidden}
body{color:#fff;font-family:var(--serif)}

/* phone: the picture takes the whole top of the screen, the quote and clock sit below it, nothing overlaps */
.layout{height:100svh;display:flex;flex-direction:column;align-items:center;padding:0 16px 2.4svh}
.scene{position:relative;flex:1 1 0;min-height:0;width:calc(100% + 32px);margin:0 -16px;overflow:hidden}
.door{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 36%;display:block;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);
}
.verse{flex:none;text-align:center;max-width:24ch;margin-top:1svh}
.verse p{font-size:min(5.2vw,3.1svh);line-height:1.22;text-transform:uppercase;text-shadow:0 0 14px rgba(255,255,255,.55),0 0 38px rgba(255,255,255,.25)}
.verse cite{display:block;margin-top:1svh;font-style:normal;font-size:min(3.6vw,2.2svh);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 12px rgba(255,255,255,.5)}
.clock{flex:none;display:flex;gap:clamp(12px,5vw,28px);margin-top:1.8svh}
.clock div{display:flex;flex-direction:column;align-items:center;min-width:3.2ch}
.clock b{font-size:min(7vw,4.4svh);text-shadow:0 0 14px rgba(255,255,255,.55),0 0 34px rgba(255,255,255,.22);font-variant-numeric:tabular-nums;line-height:1}
.clock small{margin-top:.9svh;font-size:min(2.6vw,1.45svh);letter-spacing:.2em;text-transform:uppercase;color:#bdbdbd}
.clock.done b{color:#c04040;text-shadow:0 0 16px rgba(190,50,50,.6)}

/* landscape screens: quote on the left, the door in the middle, the countdown on the right */
@media (min-aspect-ratio:5/4){
  .layout{display:grid;grid-template-columns:1fr calc(100svh * .75) 1fr;grid-template-areas:"verse scene clock";align-items:center;padding:0}
  .scene{grid-area:scene;width:100%;height:100svh;margin:0}
  .door{-webkit-mask-image:radial-gradient(ellipse 70% 66% at 50% 50%,#000 58%,transparent 100%);mask-image:radial-gradient(ellipse 70% 66% at 50% 50%,#000 58%,transparent 100%)}
  .verse{grid-area:verse;justify-self:end;text-align:right;margin:0 3vw 0 0;max-width:22ch}
  .verse p{font-size:min(2.2vw,4.4svh)}
  .verse cite{font-size:min(1.4vw,2.8svh)}
  .clock{grid-area:clock;justify-self:start;margin:0 0 0 3vw;display:grid;grid-template-columns:repeat(2,auto);gap:2.6svh 3.2vw}
  .clock b{font-size:min(3.6vw,7svh)}
  .clock small{font-size:min(.8vw,1.6svh)}
}

/* the lamp's flicker: a black layer over the picture, driven by flicker.js */
.dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:2;
  /* the torch is its own light: wherever the beam falls, the lamp's flicker does not dim the picture */
  -webkit-mask-image:radial-gradient(circle 190px at var(--tx,-999px) var(--ty,-999px),transparent 0,transparent 40%,#000 100%);
          mask-image:radial-gradient(circle 190px at var(--tx,-999px) var(--ty,-999px),transparent 0,transparent 40%,#000 100%)}