/* HFC public pages - signature effects (see fx.js). Uses the page's own colour tokens' values directly so it works on every page. */
.pre{display:none}
html.pre-on .pre{display:flex;position:fixed;inset:0;z-index:1000;flex-direction:column;justify-content:space-between;gap:20px;padding:clamp(22px,4vw,52px);background:#1E352D;color:#FAF8F2;overflow:hidden;animation:preOut .8s cubic-bezier(.8,0,.2,1) 4.2s forwards}
.pre img{height:clamp(46px,6vw,72px);width:auto;align-self:flex-start}
.pre p{margin:0;max-width:11em;font:400 clamp(2rem,6.4vw,5.2rem)/1 "Rozha One",Georgia,serif;color:#FAF8F2}
.pre b{align-self:flex-end;font:400 clamp(5rem,20vw,15rem)/.8 "Rozha One",Georgia,serif;color:#F6C94B;min-width:3ch;text-align:right}
.pre i{position:absolute;left:0;bottom:0;height:10px;width:0;background:#F28B6B}
html.pre-done .pre{transform:translateY(-100%);transition:transform .85s cubic-bezier(.8,0,.2,1)}
@keyframes preOut{to{transform:translateY(-100%);visibility:hidden}}
/* the hero waits for the curtain */
html.pre-on .hero .hl .w>i{transition-delay:calc(var(--i,0)*70ms + 1.6s)!important}
html.pre-on .hero .stamp{animation-delay:2.6s}
html.pre-on .hero .hero-copy>*:not(.hl){animation:fxIn .8s 2.1s both}
@keyframes fxIn{from{opacity:0;transform:translateY(18px)}}

/* trailing square cursor */
.cur{display:none}
html.fx-cur .cur{display:block;position:fixed;left:0;top:0;z-index:900;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid #F28B6B;pointer-events:none;transition:width .22s,height .22s,margin .22s,background .22s,border-color .22s}
html.fx-cur .cur.big{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(246,201,75,.28);border-color:#F6C94B}
html.fx-cur .cur.view{width:84px;height:84px;margin:-42px 0 0 -42px;background:#F6C94B;border-color:#1E352D;display:flex}
html.fx-cur .cur.view:after{content:"View";margin:auto;font:700 .95rem "Hind",system-ui,sans-serif;color:#1E352D}

/* magnetic buttons: the lean is added to each page's own hover move */
.btn{transform:translate(var(--mx,0px),var(--my,0px))}
.btn:hover{transform:translate(calc(var(--mx,0px) - 3px),calc(var(--my,0px) - 3px))}

/* hero pictures drift */
.collage figure{translate:calc(var(--tx,0)*var(--d,14)*1px) calc(var(--ty,0)*var(--d,14)*.7px);transition:translate .35s cubic-bezier(.2,.8,.2,1)}
.collage .c2{--d:-26}.collage .c3{--d:34}.collage .c1{--d:10}

/* statement that fills in as you scroll */
.fx-on .fill span{opacity:.16;transition:opacity .35s}
.fx-on .fill span.on{opacity:1}

/* giant sliding type */
.giant{overflow:hidden;background:#FAF8F2;border-block:2px solid #1E352D;padding:clamp(20px,4vw,52px) 0;user-select:none}
.giant-row{display:flex;width:max-content;transform:translate3d(calc(var(--gx,0)*1px),0,0);will-change:transform}
.giant-row span{flex:none;padding-right:.5em;font:400 clamp(4.2rem,15vw,12.5rem)/1.02 "Rozha One",Georgia,serif;white-space:nowrap;color:transparent;-webkit-text-stroke:2px #1E352D}
.giant-row.b span{color:#1E352D;-webkit-text-stroke:0}
.giant-row span:nth-child(3n){color:#F6C94B;-webkit-text-stroke:2px #1E352D}
.giant-row.b span:nth-child(3n){color:#F28B6B;-webkit-text-stroke:2px #1E352D}

@media(prefers-reduced-motion:reduce){html.pre-on .pre{display:none}.giant-row{transform:none}.cur{display:none!important}}