/* X100V playback through the eyecup. The panel takes each frame's shape (set by evf.js):
   --iw/--ih image, --s readout strip below it, --ph panel height, --t type unit, --r half-diagonal. */
@font-face { font-family: EVF; src: url('fonts/barlow-semi-condensed-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: EVF; src: url('fonts/barlow-semi-condensed-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: block; }
#evf {
  --w: var(--t, min(96vw, calc(92vh * 4 / 3), 1400px));
  position: fixed; inset: 0; z-index: 5; background: #000; overflow: hidden;
  display: grid; place-items: center; outline: none;
  font-family: EVF, 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; color: #f2f4f2;
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
#evf[hidden] { display: none; }
.evf-panel { position: relative; width: var(--iw); height: var(--ph); background: #000; opacity: 0; }
/* the OLED seen through the eyepiece (filter in evf.js): barrel, colour fringes, bloom */
.evf-screen { position: absolute; inset: 0; filter: url(#evf-lens); }
.evf-optics { position: absolute; width: 0; height: 0; pointer-events: none; }
/* the panel's dot structure, just visible at this magnification: RGB stripes and the gaps between rows */
.evf-dots { position: absolute; inset: 0 0 auto 0; height: var(--ih); pointer-events: none; mix-blend-mode: multiply; opacity: .1;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.55) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, #ff4a4a 0 1px, #4aff6a 1px 2px, #4a7aff 2px 3px); }
.evf-image { position: absolute; inset: 0 0 auto 0; height: var(--ih); background: #000; overflow: hidden; }
.evf-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; filter: contrast(1.05) saturate(1.07); }  /* OLED punch */
.evf-top { position: absolute; inset: 0 0 auto 0; display: flex; justify-content: space-between; padding: calc(var(--w) * .012) calc(var(--w) * .018);
  font-size: calc(var(--w) * .036); font-weight: 400; letter-spacing: .01em; line-height: 1; text-shadow: 0 0 2px rgba(0,0,0,.55); }
.evf-strip { position: absolute; left: 0; right: 0; bottom: 0; height: var(--s);
  display: flex; align-items: center; gap: calc(var(--w) * .028); padding: 0 calc(var(--w) * .02);
  font-size: calc(var(--w) * .043); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.evf-strip span { display: inline-flex; align-items: baseline; gap: calc(var(--w) * .006); white-space: nowrap; }
.evf-strip span[hidden] { display: none; }
.evf-strip small { font-size: .42em; font-weight: 500; letter-spacing: .02em; }
.evf-strip b { font-weight: 500; }
.evf-strip svg { height: .62em; width: auto; align-self: center; }
/* the playback button: pressed again, it leaves playback */
.evf-mode { font: inherit; color: #9ad7ff; background: none; border: 0; padding: .22em; margin: -.22em; border-radius: .14em; cursor: pointer;
  display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; transition: color .15s, background-color .15s; }
.evf-mode svg { height: .66em; }
.evf-mode:hover, .evf-mode:focus-visible { color: #fff; background: rgba(154,215,255,.18); outline: none; }
.evf-ss { margin-right: calc(var(--w) * .02); }
.evf-ev svg { height: .5em; margin-right: .08em; }
.evf-iso { margin-left: calc(var(--w) * .02); }
.evf-fill { flex: 1; }
.evf-bat svg { height: .52em; }
/* light from the panel on the inside of the eyecup, tinted by the frame */
.evf-glow { position: absolute; width: calc(var(--r) * 2.4); aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--tint, #333) 16%, #0b0c0d) 0 34%, transparent 66%); }
/* the eyecup: round field stop just outside the panel corners, a faint rubber highlight top-right */
.evf-cup { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse calc(var(--r) * .14) calc(var(--r) * .18) at calc(50% + var(--r) * .99) calc(50% - var(--r) * .54), rgba(150,165,190,.07), transparent 70%),
    radial-gradient(circle calc(var(--r) * 1.28) at 50% 50%, transparent 0 calc(var(--r) * 1.02), rgba(0,0,0,.9) calc(var(--r) * 1.18), #000 100%); }
.evf-nav { position: absolute; top: 0; bottom: 0; width: 34%; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.evf-prev { left: 0; } .evf-next { right: 0; }
.evf-nav:focus-visible { outline: 1px solid rgba(255,255,255,.35); outline-offset: -8px; }
/* back: a bare return arrow in the readout's grey, in the dark beyond the eyecup */
.evf-back { position: absolute; left: max(10px, 1.4vmin); top: max(10px, 1.4vmin); z-index: 2; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: 50%; color: rgba(242,244,242,.38); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color .15s, background-color .15s; }
.evf-back svg { width: 24px; height: 24px; }
.evf-back:hover, .evf-back:focus-visible { color: #f2f4f2; background: rgba(255,255,255,.07); outline: none; }
.evf-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* power-on: the OLED lights up in one go, a touch over-bright, and settles */
#evf.on .evf-panel { animation: evf-on .2s cubic-bezier(.2,.7,.3,1) forwards; }
#evf.on .evf-glow { animation: evf-glow .5s ease-out forwards; }
@keyframes evf-on { 0% { opacity: 0; filter: brightness(1.5); } 35% { opacity: 1; filter: brightness(1.18); } 100% { opacity: 1; filter: none; } }
@keyframes evf-glow { to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { #evf.on .evf-panel, #evf.on .evf-glow { animation-duration: 1ms; } }