/* ==========================================================
   Opening film: a picture frame that suits the painting, now and then.
   js/lframe.js builds it inside .lf__frame; it grows outward from the painting's edge while loading and
   retracts back to the hairline when loading ends. Drawn in CSS only (bars with mitred corners from
   clip-path, wood grain / gilding from gradients), no photographs. The painting's box (258:154) never changes:
   the frame sits OUTSIDE it (negative inset), so nothing is stretched.
   Four thicknesses (--ft --fr --fb --fl) are animated separately so the sides can arrive one after another.
   ========================================================== */
.lf__fr{--ft:0px;--fr:0px;--fb:0px;--fl:0px;--fo:0;position:absolute;pointer-events:none;
  left:calc(var(--fl) * -1);right:calc(var(--fr) * -1);top:calc(var(--ft) * -1);bottom:calc(var(--fb) * -1);
  filter:drop-shadow(0 calc(var(--fmax) * .45) calc(var(--fmax) * .8) rgba(0,0,0,calc(var(--fo) * .32)))}
.lf__fb{position:absolute;display:block}
.lf__fb--t{left:0;right:0;top:0;height:var(--ft);clip-path:polygon(0 0,100% 0,calc(100% - var(--fr)) 100%,var(--fl) 100%)}
.lf__fb--b{left:0;right:0;bottom:0;height:var(--fb);clip-path:polygon(var(--fl) 0,calc(100% - var(--fr)) 0,100% 100%,0 100%)}
.lf__fb--l{left:0;top:0;bottom:0;width:var(--fl);clip-path:polygon(0 0,100% var(--ft),100% calc(100% - var(--fb)),0 100%)}
.lf__fb--r{right:0;top:0;bottom:0;width:var(--fr);clip-path:polygon(0 var(--ft),100% 0,100% 100%,0 calc(100% - var(--fb)))}
/* the frame's lip: a bright inner edge and a soft shadow it throws onto the picture */
.lf__fm{position:absolute;left:var(--fl);right:var(--fr);top:var(--ft);bottom:var(--fb);
  box-shadow:inset 0 0 0 calc(var(--fo) * 1.2px) var(--lip),inset 0 0 calc(var(--fmax) * .7) rgba(0,0,0,calc(var(--fo) * .3))}
.lf__frame.has-fr ~ .lf__meta{margin-top:calc(16px + var(--fmaxpx,20px))}

/* finishes. Each sets a colour per side (light from the upper left), a grain, and the lip colour */
.lf__fr[data-fin="oak"]{--lip:rgba(255,236,200,.55);
  --gt:repeating-linear-gradient(180deg,rgba(80,42,12,.13) 0 1px,transparent 1px 5px),repeating-linear-gradient(180deg,rgba(255,230,190,.08) 0 2px,transparent 2px 9px);
  --gs:repeating-linear-gradient(90deg,rgba(80,42,12,.13) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(255,230,190,.08) 0 2px,transparent 2px 9px)}
.lf__fr[data-fin="oak"] .lf__fb--t{background:var(--gt),linear-gradient(180deg,#d9ad76,#c0925a)}
.lf__fr[data-fin="oak"] .lf__fb--l{background:var(--gs),linear-gradient(90deg,#cfa06a,#b88850)}
.lf__fr[data-fin="oak"] .lf__fb--r{background:var(--gs),linear-gradient(90deg,#a97a46,#946632)}
.lf__fr[data-fin="oak"] .lf__fb--b{background:var(--gt),linear-gradient(180deg,#9a6d3c,#865a2c)}

.lf__fr[data-fin="walnut"]{--lip:#c9a46a;
  --gt:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px),repeating-linear-gradient(180deg,rgba(255,200,150,.05) 0 2px,transparent 2px 11px);
  --gs:repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(255,200,150,.05) 0 2px,transparent 2px 11px)}
.lf__fr[data-fin="walnut"] .lf__fb--t{background:var(--gt),linear-gradient(180deg,#5a4034,#43301f)}
.lf__fr[data-fin="walnut"] .lf__fb--l{background:var(--gs),linear-gradient(90deg,#53392d,#3f2c20)}
.lf__fr[data-fin="walnut"] .lf__fb--r{background:var(--gs),linear-gradient(90deg,#3a281e,#2c1d15)}
.lf__fr[data-fin="walnut"] .lf__fb--b{background:var(--gt),linear-gradient(180deg,#33231a,#25180f)}

.lf__fr[data-fin="gilt"]{--lip:#fff0b8}
.lf__fr[data-fin="gilt"] .lf__fb--t{background:linear-gradient(180deg,#f5de9a,#d2a94c 55%,#b98d36)}
.lf__fr[data-fin="gilt"] .lf__fb--l{background:linear-gradient(90deg,#f0d487,#c99f43 55%,#b08430)}
.lf__fr[data-fin="gilt"] .lf__fb--r{background:linear-gradient(90deg,#c39a3e,#a97e2c 55%,#8f6a22)}
.lf__fr[data-fin="gilt"] .lf__fb--b{background:linear-gradient(180deg,#b58a34,#9a7126 55%,#80601d)}

.lf__fr[data-fin="black"]{--lip:rgba(255,255,255,.28)}
.lf__fr[data-fin="black"] .lf__fb--t{background:linear-gradient(180deg,#2a2a2d,#17171a)}
.lf__fr[data-fin="black"] .lf__fb--l{background:linear-gradient(90deg,#26262a,#141417)}
.lf__fr[data-fin="black"] .lf__fb--r{background:linear-gradient(90deg,#141417,#0a0a0c)}
.lf__fr[data-fin="black"] .lf__fb--b{background:linear-gradient(180deg,#0f0f11,#070708)}

.lf__fr[data-fin="white"]{--lip:rgba(0,0,0,.14)}
.lf__fr[data-fin="white"] .lf__fb--t{background:linear-gradient(180deg,#fbf9f4,#ece7dc)}
.lf__fr[data-fin="white"] .lf__fb--l{background:linear-gradient(90deg,#f6f2ea,#e6e0d3)}
.lf__fr[data-fin="white"] .lf__fb--r{background:linear-gradient(90deg,#e4ddcf,#d6cebe)}
.lf__fr[data-fin="white"] .lf__fb--b{background:linear-gradient(180deg,#dcd5c6,#cfc7b6)}

.lf__fr[data-fin="green"]{--lip:#d9b86a}
.lf__fr[data-fin="green"] .lf__fb--t{background:linear-gradient(180deg,#2f5a47,#1f4033)}
.lf__fr[data-fin="green"] .lf__fb--l{background:linear-gradient(90deg,#2b5442,#1b392e)}
.lf__fr[data-fin="green"] .lf__fb--r{background:linear-gradient(90deg,#1b392e,#12291f)}
.lf__fr[data-fin="green"] .lf__fb--b{background:linear-gradient(180deg,#16301f,#0e2218)}

.lf__fr[data-fin="ash"]{--lip:rgba(255,255,255,.5);
  --gt:repeating-linear-gradient(180deg,rgba(120,90,50,.10) 0 1px,transparent 1px 6px);
  --gs:repeating-linear-gradient(90deg,rgba(120,90,50,.10) 0 1px,transparent 1px 6px)}
.lf__fr[data-fin="ash"] .lf__fb--t{background:var(--gt),linear-gradient(180deg,#e9dcc3,#d8c8aa)}
.lf__fr[data-fin="ash"] .lf__fb--l{background:var(--gs),linear-gradient(90deg,#e3d4b8,#d1bf9f)}
.lf__fr[data-fin="ash"] .lf__fb--r{background:var(--gs),linear-gradient(90deg,#cdbb9a,#bba884)}
.lf__fr[data-fin="ash"] .lf__fb--b{background:var(--gt),linear-gradient(180deg,#c3b08c,#b09b74)}

.lf__fr[data-fin="silver"]{--lip:rgba(255,255,255,.7);
  --gt:repeating-linear-gradient(180deg,rgba(255,255,255,.28) 0 1px,transparent 1px 3px);
  --gs:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 3px)}
.lf__fr[data-fin="silver"] .lf__fb--t{background:var(--gt),linear-gradient(180deg,#eef2f5,#bcc5cc)}
.lf__fr[data-fin="silver"] .lf__fb--l{background:var(--gs),linear-gradient(90deg,#e4e9ed,#b2bcc4)}
.lf__fr[data-fin="silver"] .lf__fb--r{background:var(--gs),linear-gradient(90deg,#aab4bc,#929ea8)}
.lf__fr[data-fin="silver"] .lf__fb--b{background:var(--gt),linear-gradient(180deg,#9aa6b0,#85919c)}

/* reduced motion: no frame at all (js/lframe.js does not build it) */