.opening{display:none}
/* Keep the same viewport width before, during and after the opening. */
html{overflow-y:scroll;scrollbar-gutter:stable}
html.opening-active .opening{display:block;position:fixed;inset:0;z-index:1000;overflow:hidden;isolation:isolate;background:#fcf7ee url('opening-paper.webp') center/cover no-repeat;animation:opening-exit 1.2s 3.3s cubic-bezier(.65,0,.35,1) both}
.opening-logo{position:absolute;inset:0;display:grid;place-items:center;padding:0 7% 5vh;z-index:2;mix-blend-mode:multiply;pointer-events:none}
.opening-logo img{width:min(100%,1080px);height:auto;animation:opening-ink 1.8s .25s cubic-bezier(.16,1,.3,1) both}
.opening-waves,.opening-brush,.opening-bottom{position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-position:center bottom;background-size:100% auto}
.opening-left{background-image:url('opening-left.webp');animation:opening-left-in 1.7s .2s ease-out both}
.opening-right{background-image:url('opening-right.webp');animation:opening-right-in 1.7s .35s ease-out both}
.opening-brush{background-image:url('opening-brush.webp');animation:opening-brush-in 1.9s .4s cubic-bezier(.2,.7,.3,1) both}
.opening-bottom{background-image:url('opening-bottom.webp');animation:opening-bottom-in 1.8s .5s cubic-bezier(.16,1,.3,1) both}
.opening-skip{position:absolute;top:max(22px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:3;display:flex;align-items:center;gap:22px;min-height:44px;border:0;border-bottom:1px solid #a51b2055;padding:8px 4px;background:transparent;color:#811b1e;font:12px/1.6 var(--sans);cursor:pointer}
.opening-skip:focus-visible{outline:2px solid #a51b20;outline-offset:5px}
@keyframes opening-ink{from{opacity:0;transform:translateY(12px) scale(1.045);clip-path:inset(0 100% 0 0)}35%{opacity:1}to{opacity:1;transform:none;clip-path:inset(0)}}
@keyframes opening-left-in{from{opacity:0;transform:translate(-35px,15px)}to{opacity:1;transform:none}}
@keyframes opening-right-in{from{opacity:0;transform:translate(35px,15px)}to{opacity:1;transform:none}}
@keyframes opening-brush-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes opening-bottom-in{from{transform:translateY(12%);opacity:0}to{transform:none;opacity:1}}
@keyframes opening-exit{from{opacity:1}to{opacity:0}}
@media(max-width:760px){
 .opening-logo{padding:0 6% 7vh}
 .opening-waves,.opening-brush,.opening-bottom{background-size:auto 68%;background-position:center bottom}
 .opening-left{background-position:left bottom}.opening-right,.opening-bottom{background-position:right bottom}
 .opening-skip{right:20px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){html.opening-active .opening{display:none}}