/* Engraving layer over site.css: a wider column, framed viewport, illustrations that lag the scroll, film grain. */
.frame { max-width: 1224px; }
@media (max-width: 1264px) { .frame { border-left: 0; border-right: 0; } }

/* illustrations: no box, the edges dissolve into the page, the picture lags the scroll */
.plate { position: relative; margin: 56px calc(var(--pad) * -1) 0; aspect-ratio: var(--ar, 1672 / 941);
         -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
         -webkit-mask-composite: source-in;
         mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 82%, transparent 100%), linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
         mask-composite: intersect; }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--lag, 0px), 0); will-change: transform; }
.plate.lead img { animation: develop 2.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes develop { from { filter: brightness(.05) contrast(1.8) saturate(0); } 55% { filter: brightness(.65) contrast(1.25) saturate(.5); } to { filter: none; } }
.js .plate { opacity: 0; translate: 0 28px; transition: opacity .9s cubic-bezier(.2, .7, .2, 1), translate .9s cubic-bezier(.2, .7, .2, 1); }
.js .plate.in, .js .plate.lead { opacity: 1; translate: none; }
main > h2, main > p, main > figure, main > dl, main > ol, main > .tablewrap, main > .stage { position: relative; z-index: 1; }

/* the viewport frame: an edge that blooms, a glow that marks how far down you are, a flash where you click */
.vframe { position: fixed; inset: 0; z-index: 40; pointer-events: none; border: 5px solid #1f5a33; }
.vframe i { position: absolute; display: block; }
.amb { opacity: .85; animation: amb 42s ease-in-out infinite; }
.amb.t, .amb.b { left: 0; right: 0; height: 5px; background: linear-gradient(90deg, transparent, #d0202f 15%, transparent 30%, transparent 55%, #6cc985 70%, transparent 85%); background-size: 300% 100%; }
.amb.l, .amb.r { top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, transparent, #6cc985 15%, transparent 30%, transparent 55%, #d0202f 70%, transparent 85%); background-size: 100% 300%; }
.amb.t { top: -5px; } .amb.b { bottom: -5px; animation-delay: -21s; } .amb.l { left: -5px; animation-delay: -10s; } .amb.r { right: -5px; animation-delay: -31s; }
@keyframes amb { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }
.sglow { inset: -5px; opacity: .5; background: radial-gradient(10px 220px at 0 var(--sp, 0%), #e3dfd6, transparent), radial-gradient(10px 220px at 100% var(--sp, 0%), #e3dfd6, transparent); }
.flash { inset: -5px; padding: 5px; opacity: 0; background: radial-gradient(200px 200px at var(--cx, 50%) var(--cy, 50%), #e3dfd6, transparent 70%);
         -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.flash.on { animation: flash .7s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-color-scheme: light) { .vframe { border-color: #c6c1b4; } }
@media (max-width: 767px) { .vframe { display: none; } }

.grain { position: fixed; inset: -50%; z-index: 50; pointer-events: none; background: url(brand/engraving/grain.png) 0 0 / 160px 160px; opacity: .04; mix-blend-mode: overlay; animation: grain .9s steps(6) infinite; }
@keyframes grain { 0%, 100% { transform: translate(0, 0); } 17% { transform: translate(-4%, 3%); } 33% { transform: translate(3%, -5%); } 50% { transform: translate(-6%, -2%); } 67% { transform: translate(5%, 4%); } 83% { transform: translate(-2%, 6%); } }

@media (prefers-reduced-motion: reduce) {
  .plate img { transform: none; } .plate.lead img, .amb, .flash.on { animation: none; } .grain { display: none; }
  .js .plate { opacity: 1; translate: none; transition: none; }
}