@font-face{font-family:"Fraunces";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/fraunces-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:#1F2A1D;color:#F5EFE3;font-family:"Fraunces",Georgia,serif;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:24px;-webkit-font-smoothing:antialiased;overflow:hidden;transition:background-color .6s}
main{position:relative;z-index:3;text-align:center;animation:in 1.2s ease-out backwards;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .8s}
.word{all:unset;cursor:pointer;display:inline-block;-webkit-tap-highlight-color:transparent}
.word:focus-visible{outline:2px solid #E9A23B;outline-offset:12px;border-radius:8px}
h1{transition:color 1s;font-weight:600;font-size:clamp(88px,22vw,240px);line-height:.9;letter-spacing:-.045em;white-space:nowrap}
.l{display:inline-block;transform-origin:100% 100%;transition:rotate .35s ease}
.word:not(.go):hover .l{rotate:-3deg}
.word .l:nth-child(2){transition-delay:.04s}.word .l:nth-child(3){transition-delay:.08s}.word .l:nth-child(4){transition-delay:.12s}.word .l:nth-child(5){transition-delay:.16s}
.word.go .l{transition-delay:0s}
.word .l.tip{animation:topple .42s forwards}
@keyframes topple{0%{transform:rotate(0);animation-timing-function:cubic-bezier(.5,0,.9,.6)}72%{transform:rotate(27deg);animation-timing-function:ease-out}86%{transform:rotate(22deg);animation-timing-function:ease-in-out}100%{transform:rotate(24deg)}}
.word .l.fall{animation:fallflat .8s cubic-bezier(.45,0,.8,.3) forwards}
.word .l.fall:not(.tip){animation-name:fallflat0}
@keyframes fallflat{from{transform:rotate(24deg);opacity:1}to{transform:rotate(95deg) translateY(12%);opacity:0}}
@keyframes fallflat0{from{transform:rotate(0);opacity:1}to{transform:rotate(95deg) translateY(12%);opacity:0}}
.dot{display:inline-block;width:.18em;height:.18em;border-radius:50%;background:#E9A23B;margin-left:.04em;transition:transform .2s}
.dot.hit{transform:scale(1.25);box-shadow:0 0 30px 10px rgba(233,162,59,.6)}
.dot.gone{opacity:0}
.sub{transition:opacity .4s,color 1s,font-size 1.2s;font-style:italic;font-weight:400;font-size:clamp(20px,2.6vw,30px);color:#BFC7B0;margin-top:.5em;letter-spacing:.01em}
.sun{position:fixed;z-index:4;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#FFF1CC 0%,#F6C566 40%,#E9A23B 62%,rgba(233,162,59,0) 72%);transform:scale(1.4);transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .9s ease}
.scene{position:fixed;inset:0;z-index:1;visibility:hidden;opacity:0;transition:opacity 1s,visibility 0s 1s}
.land{position:absolute;inset:0;width:100%;height:100%}
.corner{position:absolute;bottom:0;width:min(42vw,460px);height:auto;overflow:visible}
.corner.left{left:0}.corner.right{right:0;transform:scaleX(-1)}
.rise,.fade,.grow,.unfurl,.sunset{transition-timing-function:cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0ms)}
.rise{transform:translateY(55%);transition-property:transform;transition-duration:1.5s}
.fade{opacity:0;transition-property:opacity;transition-duration:2s}
.grow,.unfurl{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition-property:transform;transition-duration:1.3s}
.unfurl{transform-origin:0% 100%;transform:scale(0) rotate(-20deg)}
.sunset{transform-box:fill-box;transform-origin:50% 50%;transform:scale(1.6);transition-property:transform;transition-duration:2s;transition-delay:.45s}
body.scene-on .scene{visibility:visible;opacity:1;transition:opacity 0s,visibility 0s}
body.scene-on .rise{transform:none}body.scene-on .fade{opacity:1}
body.scene-on .grow,body.scene-on .unfurl,body.scene-on .sunset{transform:none}
body.scene-on main{opacity:0}
body.settled main{opacity:1;transform:translateY(calc(-50dvh + 50% + 56px)) scale(.42)}
body.settled h1{color:#1F2A1D}body.settled .sub{color:#4E5747;font-size:clamp(28px,3.4vw,40px)}
body.scene-on footer{color:#E6E0CF}
footer{position:fixed;z-index:3;left:0;right:0;bottom:24px;text-align:center;font-family:"DM Sans",system-ui,sans-serif;font-size:14px;color:#BFC7B0;padding:0 16px}
footer a{color:#F5EFE3;text-underline-offset:3px}
footer a:hover{color:#E9A23B}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}*,*::before,*::after{transition-duration:.01ms!important;transition-delay:0ms!important;animation:none!important}}