*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* Hint typeface. This stylesheet lives in /src, and the font is also in /src,
   so the path is just the filename. */
@font-face{
  font-family:'Palatino Linotype W02';
  src:url('Palatino Linotype W02.woff2') format('woff2');
  font-display:swap;
}

html,body{
  width:100%;height:100%;overflow:hidden;
  overscroll-behavior:none;
  background:#000;
  touch-action:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
#c{
  display:block;width:100%;height:100%;
  filter:saturate(0.35) contrast(1.2) brightness(0.85);
  touch-action:none;
}

/* Film grain — grain.avif is now 256x256 (was 1024). To keep each speckle the
   same on-screen size as before, the tile renders at 1/4 the old size
   (1024 -> 256 source, drawn at 64px) so it simply tiles 4x more often.
   The +256px oversize keeps the layer covering the viewport as JS jitters it. */
#grain{
  position:fixed;top:0;left:0;
  width:calc(100% + 256px);height:calc(100% + 256px);
  pointer-events:none;z-index:10;opacity:0.50;
  background:url('texture_grain.avif') repeat;
  background-size:64px 64px;
  will-change:transform;
}
#vig{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:11;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.7) 100%);
}
#scan{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:12;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);
}

/* "drag to look around" hint — appears after intro, fades on first drag */
#hint{
  position:fixed;left:50%;
  bottom:calc(36px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  z-index:9;opacity:0;pointer-events:none;
  transition:opacity 1.4s ease;
  color:#a8a090;
  font-family:'Palatino Linotype W02',Georgia,'Times New Roman',serif;
  font-size:12px;letter-spacing:0.32em;
  text-transform:uppercase;font-style:italic;
  text-shadow:0 1px 4px #000,0 0 14px rgba(0,0,0,0.85);
  white-space:nowrap;
}
#hint.vis{opacity:0.5;animation:hintBreathe 4.5s ease-in-out infinite}
@keyframes hintBreathe{
  0%,100%{opacity:0.32}
  50%{opacity:0.55}
}

/* Fade-to-black — initial reveal (.boot) and link transition (.act) */
#fb{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:#000;z-index:100;opacity:0;pointer-events:none;
  transition:opacity 1s ease;
}
#fb.act{opacity:1;pointer-events:all}
#fb.boot{opacity:1}