/* The opening: a line becomes a triangle, the work bursts out of it, the site unfolds. */
html.overture-open,html.overture-open body{overflow:hidden}
.overture{position:fixed;inset:0;z-index:120}
.overture:focus{outline:none}
.ov-panel{position:absolute;left:0;right:0;height:50.2%;background:var(--paper);z-index:1;transition:transform 1.2s cubic-bezier(.76,0,.24,1)}
/* The curtain gathers itself before it parts — the beat you feel in the page. */
.overture.braced .ov-top{transform:translateY(7px);transition:transform .16s ease-out}
.overture.braced .ov-bottom{transform:translateY(-7px);transition:transform .16s ease-out}
.ov-top{top:0}
.ov-bottom{bottom:0}
.ov-seam{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);opacity:0;z-index:4;transform:scaleX(.06);transition:opacity .45s,transform 1.2s cubic-bezier(.76,0,.24,1)}
.ov-burst{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;--cw:clamp(112px,15vw,198px);--ch:clamp(74px,10vw,132px);--cg:13px}
.ov-stack{position:absolute;left:50%;top:50%;width:var(--cw);height:0;transform:translate(-50%,calc(-50% + var(--oy,0px)));transition:transform 1.6s cubic-bezier(.32,.78,.28,1)}
.ov-card{position:absolute;left:0;top:calc(var(--ch)/-2);margin:0;width:var(--cw);height:var(--ch);border-radius:2px;overflow:hidden;background:#EEEDE8;opacity:0;
  box-shadow:0 8px 24px -14px #3a3d4266;
  transform:translateY(0) scale(.3) rotate(var(--r0,0deg));
  transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.ov-card img{display:block;width:100%;height:100%;object-fit:cover}
/* The deck is dealt into one column, top and bottom, and the column drifts up through the mark. */
.overture.stacking .ov-card{opacity:1;transform:translateY(0) scale(.42) rotate(var(--r0,0deg));transition:transform .62s cubic-bezier(.2,.9,.3,1),opacity .4s ease;transition-delay:var(--ds)}
.overture.dealing .ov-card{opacity:1;transform:translateY(calc(var(--slot) * (var(--ch) + var(--cg)))) scale(1) rotate(0deg);transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .4s ease;transition-delay:var(--d)}
.overture.dealing .ov-stack{transform:translate(-50%,calc(-50% + var(--oy,0px) - 1.3 * (var(--ch) + var(--cg))))}
.overture.clearing .ov-card{opacity:0;transition:opacity .6s ease .1s,transform 1.1s cubic-bezier(.16,1,.3,1)}
.ov-core{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;transition:opacity .5s ease,transform .9s cubic-bezier(.3,.8,.3,1)}
.ov-tri{position:relative;appearance:none;border:0;background:none;padding:0;width:min(40vw,282px);cursor:pointer;line-height:0}
/* The forged triangle is real metal, drawn in WebGL over the same box. */
.ov-3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .8s ease}
.overture.forged .ov-3d{opacity:1}
.overture.has-3d .ov-frame{visibility:hidden}
.ov-tri:focus-visible{outline:1px solid var(--ink);outline-offset:14px}
.ov-mark{width:100%;height:auto;overflow:visible}
/* A square is drawn, turns and folds itself into a triangle, and is then forged in metal. */
.ov-pose{transform-origin:140px 136px;transform:rotate(-45deg)}
.ov-line{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round;vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,720);stroke-dashoffset:var(--len,720);transition:opacity .6s ease}
.ov-frame{fill:url(#ovChrome);opacity:0;transform-origin:140px 151px;transform:scale(.94);
  transition:opacity .8s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.overture.forged .ov-line{opacity:0}
.overture.forged .ov-frame{opacity:1;transform:none}
.ov-word{opacity:0;transition:opacity .7s ease,transform .7s ease;transform:translateY(6px)}
/* The word sits under the mark without pulling the mark off centre. */
.ov-word{position:absolute;left:0;right:0;top:calc(50% + min(40vw,282px)*.271 + 40px);text-align:center;font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;color:var(--ink)}
.overture.ready .ov-word{opacity:1;transform:none}
.overture.ringing .ov-tri{transform:scale(1.05);transition:transform .8s cubic-bezier(.2,.8,.3,1)}
/* Once the deck opens, the mark is left alone to frame it. */
.overture.stacking .ov-word{opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s ease}
.overture.opening .ov-core{opacity:0;transform:scale(1.08)}
.overture.opening .ov-seam{opacity:.2;transform:scaleX(1)}
.overture.opening .ov-top{transform:translateY(-100%)}
.overture.opening .ov-bottom{transform:translateY(100%)}
.overture.opening{pointer-events:none}
.hero .photo{transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
html.overture-open .hero .photo{transform:scale(1.08)}
@media(max-width:720px){.ov-tri{width:66vw}.ov-word{font-size:11px;top:calc(50% + 66vw*.271 + 30px)}.ov-burst{--cw:38vw;--ch:25vw;--cg:10px}}
@media(prefers-reduced-motion:reduce){
 .ov-panel,.ov-core,.ov-seam,.ov-card,.ov-stack,.hero .photo,.ov-word,.ov-line,.ov-frame,.ov-pose,.ov-3d{transition:none}
 .ov-line{opacity:0}.ov-frame{opacity:1;transform:none}.ov-pose{transform:none!important}
 .ov-burst{display:none}
 .overture.opening{opacity:0;transition:opacity .3s}
 html.overture-open .hero .photo{transform:none}
}