/* Heatmaps on caption words (heat.js), the shader readout (shaders.js) and the menu's on/off labels. */
/* the paging blocks and the depth canvas get the same gentle develop as the photograph (the shader canvas copies it itself) */
#push>canvas:not(.shader){filter:contrast(1.05) saturate(1.12)}
/* attention heatmap (heat.js) */
.caption .hot-word{pointer-events:auto;cursor:help;background:linear-gradient(90deg,#f98e09,#bc3754) 0 100%/100% 1.5px no-repeat;padding-bottom:1px;transition:color .2s}
.caption .hot-word:hover,.caption .hot-word:focus-visible{color:#fcd38a;outline:none}
.heat{position:absolute;z-index:2;left:0;top:0;width:var(--size,200px);height:var(--size,200px);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .35s}
.heat.on{opacity:.82}
.heat i{position:absolute;inset:0;border-radius:47% 53% 44% 56%/52% 45% 55% 48%;background:radial-gradient(closest-side,#fcffa4,#f98e09 24%,#dd513a 40%,#bc3754d8 54%,#57106ea0 72%,#1b0c4140 88%,transparent);filter:blur(4px);mix-blend-mode:hard-light;animation:heat-wob 2.8s ease-in-out infinite alternate}
.heat i:nth-child(2){inset:14% -12% 8% 22%;animation-duration:3.4s;animation-delay:-1s;opacity:.75}
.heat i:nth-child(3){inset:-10% 26% 30% -8%;animation-duration:2.2s;animation-delay:-.4s;opacity:.55}
.heat.on i{animation-name:heat-wob,heat-in}
@keyframes heat-wob{to{border-radius:56% 44% 58% 42%/42% 57% 43% 58%;transform:rotate(14deg) scale(1.06)}}
@keyframes heat-in{from{transform:scale(.3);opacity:0}}
.heat b{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;padding:3px 7px;background:#0a0204d8;color:#fcd38a;font:600 10px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;mix-blend-mode:normal}
.heating .scene::after{opacity:1}
/* the shader readout: denoising steps */
.readout{position:fixed;top:30px;left:50%;z-index:61;transform:translate(-50%,-6px);padding:5px 11px;border:1px solid color-mix(in srgb,var(--tint) 40%,transparent);border-radius:3px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;color:var(--tint);opacity:0;transition:opacity .4s,transform .5s var(--ease);pointer-events:none;white-space:nowrap}
.readout.on{opacity:1;transform:translate(-50%,0)}
#lens-cycle span,#trans-toggle span,#depth-toggle span,#sound-toggle span{font-size:14px;color:var(--soft);text-transform:none;letter-spacing:.02em;font-family:var(--serif);font-style:italic}
@media(max-width:700px){.readout{top:76px;max-width:calc(100vw - 32px);white-space:normal;text-align:center}}
.heat.up b{top:auto;bottom:calc(100% + 4px)}