html.js:not(.pre-on):not(.pre-off) body{animation:preHoldBg 4.6s linear}
html.js:not(.pre-on):not(.pre-off) body > *{animation:preHold 4.6s linear}
@keyframes preHoldBg{0%,100%{background-color:var(--dark)}}
@keyframes preHold{0%,86%{opacity:0}100%{opacity:1}}

html.pre-off.pre-fade body > :not(.pre){animation:preIn .6s var(--ease-out) both}
@keyframes preIn{from{opacity:0}}

html.pre-on.lenis-stopped{overflow:visible}
html.pre-on{scroll-behavior:auto}


.pre{position:fixed;inset:0;z-index:1000;background:var(--dark);color:var(--paper);overflow:hidden;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.pre__stage{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.pre__box{--ew:min(600px,72vw);position:relative;width:var(--ew);aspect-ratio:1.6;margin-top:12vh}
.pre__box > i{position:absolute;display:block}
.pre__snow{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none}


.pre__back{inset:0;z-index:1;background:var(--acc);box-shadow:inset 0 0 0 999px rgba(4,38,58,.24),0 60px 90px -40px rgba(0,0,0,.75)}
.pre__front{inset:0;z-index:3;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L50 56L100 100' fill='none' stroke='%2304263A' stroke-opacity='.2' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 0L50 54L100 0' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .15 0 0 0 0 .23 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E"),var(--acc);
  clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.pre__flap{--sh:.04;left:0;right:0;top:0;height:60%;z-index:5;transform-origin:50% 0;
  background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .02 0 0 0 0 .15 0 0 0 0 .23 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow:inset 0 0 0 999px rgba(4,38,58,var(--sh));clip-path:polygon(0 0,100% 0,50% 100%)}
.pre__seal{--sz:clamp(58px,6.4vw,92px);left:50%;top:60%;width:var(--sz);aspect-ratio:1;margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);z-index:6;border-radius:50%;
  background:url(../images/foil-silver.webp) 0 0/200px;box-shadow:inset 0 0 0 5px rgba(255,255,255,.35),inset 0 0 0 7px rgba(8,9,11,.18),0 10px 22px rgba(4,38,58,.34);display:grid;place-items:center}
.pre__seal svg{width:56%;height:56%;filter:drop-shadow(0 1px 0 #fff)}


.pre__box{--ew:min(420px,70vw);aspect-ratio:.78;margin-top:18vh}
.pre__tk{position:absolute;left:50%;top:50%;z-index:2;pointer-events:none}
.pre__tkw{display:grid;place-items:center}
.pre__tk .tw{will-change:auto}

.pre__flood{position:absolute;inset:0;z-index:2;visibility:hidden;display:grid;place-items:center;color:#062a3f}
.pre__fbg{position:absolute;inset:0;background:var(--acc) url(../images/card-blue.webp) 0 0/440px}
.pre__rose{position:absolute;left:50%;top:50%;width:min(130vmin,1300px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.5;pointer-events:none;will-change:transform}
.pre__big{position:relative}
.pre__big{display:grid;justify-items:center;text-align:center;font-family:var(--f-d);font-weight:500;line-height:1.1;transform-origin:50% 50%}
.pre__big b{font-weight:600;font-size:clamp(150px,22vw,330px);line-height:.84;letter-spacing:-.02em;text-shadow:0 2px 0 rgba(255,255,255,.4),0 -2px 0 rgba(4,38,58,.3)}
.pre__big span{font-size:clamp(24px,2.6vw,42px);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.pre__big span:first-of-type{margin-top:.3em}
.pre__big span + span{margin-top:.2em;padding-top:.2em;border-top:1px solid rgba(4,38,58,.3);min-width:3.4em}


.pre__cap{position:absolute;z-index:3;left:0;right:0;top:clamp(26px,6vh,56px);display:flex;align-items:center;justify-content:center;gap:12px;white-space:nowrap;margin:0;
  font-family:var(--f-d);font-weight:500;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:rgba(244,245,246,.66)}
.pre__cap svg{width:30px;height:30px;flex:0 0 auto}
.pre__bar{position:absolute;z-index:3;left:50%;bottom:clamp(28px,6vh,52px);width:clamp(120px,12vw,180px);height:1px;margin-left:calc(clamp(120px,12vw,180px) / -2);background:rgba(244,245,246,.16)}
.pre__bar i{position:absolute;inset:0;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}
.pre__skip{position:absolute;z-index:3;right:var(--gm,24px);bottom:clamp(16px,6vh,40px);padding:10px 0;background:none;border:0;cursor:pointer;
  font-family:var(--f-d);font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,245,246,.46);transition:color .6s var(--ease-exp)}
.pre__skip:hover{color:var(--acc)}

@media (max-width:760px){
  .pre__box{--ew:min(290px,68vw);margin-top:20vh}
  .pre__cap{font-size:10.5px;letter-spacing:.22em;gap:10px}
  .pre__cap svg{width:24px;height:24px}
  .pre__skip{left:50%;right:auto;transform:translateX(-50%);bottom:14px}
  .pre__bar{bottom:64px}
}
.pre__seal{position:absolute}.pre__seal svg{position:absolute;left:22%;top:22%;width:56%;height:56%;display:block;margin:0}