@font-face { font-family: "Plus Jakarta Sans"; src: url("assets/fonts/plus-jakarta-sans.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
:root { --foot: 64px; --pine: #0a2a23; --pine-2: #0f3a30; --cream: #f8f3e6; --soft: #d4dfd8; --brass: #e8c476; --gutter: clamp(20px, 5vw, 80px); }
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--pine); -webkit-text-size-adjust: 100%; }
body { position: relative; isolation: isolate; margin: 0; min-height: 100svh; overflow: clip; display: grid; grid-template-rows: 1fr; padding: var(--gutter) var(--gutter) calc(var(--foot) + 16px); color: var(--cream); font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
main { align-self: center; max-width: min(46vw, 760px); position: relative; z-index: 2; }
h1 { display: flex; align-items: center; gap: .16em; margin: 0; font-size: clamp(54px, 8.6vw, 150px); font-weight: 700; line-height: 1; letter-spacing: -.05em; white-space: nowrap; }
.mark { flex: none; width: .78em; height: .78em; }
.line { margin: clamp(16px, 2vw, 30px) 0 0; font-size: clamp(20px, 2vw, 30px); line-height: 1.28; font-weight: 500; letter-spacing: -.018em; color: var(--soft); text-wrap: pretty; }
.line strong { display: block; margin-top: .3em; font-weight: 700; color: var(--brass); }
footer { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--foot); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; white-space: nowrap; background: var(--pine); font-size: clamp(15px, 1.3vw, 19px); font-weight: 600; }
footer a { display: inline-block; padding: 8px 0; color: var(--cream); text-underline-offset: 5px; }
#toggle { font: inherit; font-weight: 500; color: var(--soft); background: none; border: 0; padding: 8px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.field { position: absolute; inset: 0 0 var(--foot); z-index: 0; overflow: hidden; contain: paint; }
.scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, var(--pine) 28%, rgb(10 42 35 / .78) 46%, rgb(10 42 35 / 0) 62%); }
.stage { position: absolute; left: 73%; top: 50%; width: 0; height: 0; }
.burst { position: absolute; width: 34vmin; height: 34vmin; left: -17vmin; top: -17vmin; border: 3px solid var(--brass); border-radius: 50%; opacity: 0; will-change: transform, opacity; }


.dir-c { --above: -115%; --hold: -80%; --rest: 14%; --settle: 17%; --exit-x: 60vw; --exit-y: -90vh; }
.dir-c main { max-width: min(40vw, 700px); }
.dir-c .stage { left: 72%; top: 54%; }
.front { position: absolute; inset: 0 0 var(--foot); z-index: 1; overflow: hidden; contain: paint; pointer-events: none; }
.glow { position: absolute; left: 34%; top: 2%; width: 76%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, #1a5a4a, rgb(26 90 74 / 0)); }
.fly { position: absolute; left: -30vw; height: auto; will-change: transform; }
.f1 { top: 6%; width: 15vw; } .f2 { top: 66%; width: 24vw; } .f3 { top: 30%; width: 11vw; } .f4 { top: 80%; width: 13vw; }
.f5 { top: -4%; width: 21vw; } .f6 { top: 54%; width: 10vw; } .f7 { top: 18%; width: 12vw; }
.scene3d { position: absolute; left: 72%; top: 54%; width: min(38vw, 76vmin); aspect-ratio: 3 / 2; margin-left: calc(min(38vw, 76vmin) / -2); transform: translateY(-50%); }
.env { position: absolute; inset: 0; will-change: transform; }
.env > * { position: absolute; display: block; }
.back { inset: 0; background: #c9bd9f; border-radius: 1.2% / 1.8%; }
.pocket { inset: 0; width: 100%; height: 100%; }
.flap { left: 0; top: 0; width: 100%; height: 58%; transform-origin: 50% 0; will-change: transform, opacity; }
.flap.open { transform: perspective(1400px) rotateX(180deg); opacity: 0; }
.card { left: 6%; top: 7%; width: 88%; height: auto; opacity: 0; will-change: transform, opacity; }
.wax { position: absolute; width: 30.7%; height: auto; left: 34.65%; top: 33.5%; will-change: transform, opacity; }

@media (orientation: portrait) {
  body { grid-template-rows: auto; padding-top: clamp(56px, 9svh, 110px); }
  main { align-self: start; max-width: none; }
  h1 { font-size: clamp(46px, 14.6vw, 136px); }
  .line { font-size: clamp(20px, 3.8vw, 34px); }
  .scrim { background: linear-gradient(180deg, var(--pine) 40%, rgb(10 42 35 / .7) 52%, rgb(10 42 35 / 0) 62%); }
  .stage, .dir-c .stage { left: 50%; top: 76%; }
  .dir-c { --exit-x: 130vw; --exit-y: 4vh; }
  .dir-c main { max-width: none; }
  .dir-c .stage { left: 50%; top: calc(100svh - var(--foot) - 16px - 24vw); }
  .scene3d { left: 50%; top: calc(100svh - var(--foot) - 16px - 24vw); width: 72vw; margin-left: -36vw; }
  .fly { left: -60vw; }
  .f1 { top: 44%; width: 30vw; } .f2 { top: 86%; width: 44vw; } .f3 { top: 60%; width: 22vw; } .f4 { top: 94%; width: 26vw; }
  .f5 { top: 52%; width: 38vw; } .f6 { top: 72%; width: 20vw; } .f7 { top: 40%; width: 24vw; }
}



.go .env { animation: fly 12400ms cubic-bezier(.6, 0, .2, 1) infinite; }
.go .flap.open { animation: flapopen 12400ms linear infinite; }
.go .flap.shut { animation: flapshut 12400ms cubic-bezier(.4, 0, .4, 1) infinite; }
.go .wax { animation: wax 12400ms cubic-bezier(.5, 0, .2, 1) infinite; }
.go .burst { animation: waxburst 12400ms cubic-bezier(.1, .7, .2, 1) infinite; }
.go .b2 { animation-delay: 160ms; }
.go .fly { animation: cross 20s linear infinite; }
.go .f1 { animation-duration: 24s; animation-delay: -3s; } .go .f2 { animation-duration: 11s; animation-delay: -7s; } .go .f3 { animation-duration: 30s; animation-delay: -20s; }
.go .f4 { animation-duration: 21s; animation-delay: -12s; } .go .f5 { animation-duration: 13s; animation-delay: -2s; } .go .f6 { animation-duration: 33s; animation-delay: -9s; } .go .f7 { animation-duration: 26s; animation-delay: -16s; }
@keyframes cross { from { transform: translate3d(0, 5vh, 0) rotate(-7deg); } to { transform: translate3d(165vw, -9vh, 0) rotate(5deg); } }
@keyframes fly { 0% { transform: translate(34vw, 110vh) rotate(16deg) scale(.7); } 5.645%, 87.097% { transform: none; } 95.968%, 100% { transform: translate(var(--exit-x), var(--exit-y)) rotate(-14deg) scale(1.25); } }
@keyframes flapopen { 0%, 54.032% { transform: perspective(1400px) rotateX(180deg); opacity: 1; } 58.065% { transform: perspective(1400px) rotateX(91deg); opacity: 1; } 58.073%, 100% { transform: perspective(1400px) rotateX(91deg); opacity: 0; } }
@keyframes flapshut { 0%, 58.065% { transform: perspective(1400px) rotateX(90deg); opacity: 0; } 58.073% { transform: perspective(1400px) rotateX(90deg); opacity: 1; } 62.903%, 100% { transform: perspective(1400px) rotateX(0deg); opacity: 1; } }
@keyframes wax { 0%, 64.516% { transform: scale(3.4) rotate(-22deg); opacity: 0; } 69.355% { transform: scale(.92); opacity: 1; } 71.774% { transform: scale(1.04); opacity: 1; } 73.387%, 100% { transform: scale(1); opacity: 1; } }
@keyframes waxburst { 0%, 68.548% { transform: scale(.9); opacity: 0; } 69.355% { transform: scale(.95); opacity: .9; } 79.839%, 100% { transform: scale(5); opacity: 0; } }

@media (orientation: portrait) and (max-height: 620px) {
  .dir-c .stage, .scene3d { top: calc(100svh - var(--foot) - 16px - 20.67vw); }
  .scene3d { width: 62vw; margin-left: -31vw; }
}
/* Without motion the page rests on the finished signature: the letter out of its open envelope. */
html:not(.go) .c1 { opacity: 1; transform: translate(0, var(--hold)); }
html:not(.go) .flap.open { opacity: 1; }
html:not(.go) .flap.shut, html:not(.go) .wax { opacity: 0; }
.go .c1 { animation: c1 12400ms linear infinite; }
@keyframes c1 { 0%, 6.452% { transform: translate(70vw, var(--above)) rotate(8deg); opacity: 0; } 6.500% { transform: translate(70vw, var(--above)) rotate(8deg); opacity: 1; animation-timing-function: cubic-bezier(.16, .84, .3, 1); } 10.081% { transform: translate(0, var(--above)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .4, 1); } 11.694%, 14.516% { transform: translate(0, var(--hold)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 17.339% { transform: translate(0, var(--settle)) rotate(0deg); opacity: 1; animation-timing-function: ease-out; } 18.387%, 100% { transform: translate(0, var(--rest)) rotate(0deg); opacity: 1; } }
.go .c2 { animation: c2 12400ms linear infinite; }
@keyframes c2 { 0%, 17.339% { transform: translate(80vw, var(--above)) rotate(-6deg); opacity: 0; } 17.387% { transform: translate(80vw, var(--above)) rotate(-6deg); opacity: 1; animation-timing-function: cubic-bezier(.16, .84, .3, 1); } 20.968% { transform: translate(0, var(--above)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .4, 1); } 22.581%, 25.403% { transform: translate(0, var(--hold)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 28.226% { transform: translate(0, var(--settle)) rotate(0deg); opacity: 1; animation-timing-function: ease-out; } 29.274%, 100% { transform: translate(0, var(--rest)) rotate(0deg); opacity: 1; } }
.go .c3 { animation: c3 12400ms linear infinite; }
@keyframes c3 { 0%, 28.226% { transform: translate(70vw, var(--above)) rotate(6deg); opacity: 0; } 28.274% { transform: translate(70vw, var(--above)) rotate(6deg); opacity: 1; animation-timing-function: cubic-bezier(.16, .84, .3, 1); } 31.855% { transform: translate(0, var(--above)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .4, 1); } 33.468%, 36.290% { transform: translate(0, var(--hold)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 39.113% { transform: translate(0, var(--settle)) rotate(0deg); opacity: 1; animation-timing-function: ease-out; } 40.161%, 100% { transform: translate(0, var(--rest)) rotate(0deg); opacity: 1; } }
.go .c4 { animation: c4 12400ms linear infinite; }
@keyframes c4 { 0%, 39.113% { transform: translate(80vw, var(--above)) rotate(-8deg); opacity: 0; } 39.161% { transform: translate(80vw, var(--above)) rotate(-8deg); opacity: 1; animation-timing-function: cubic-bezier(.16, .84, .3, 1); } 42.742% { transform: translate(0, var(--above)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.4, 0, .4, 1); } 44.355%, 47.177% { transform: translate(0, var(--hold)) rotate(0deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 50.000% { transform: translate(0, var(--settle)) rotate(0deg); opacity: 1; animation-timing-function: ease-out; } 51.048%, 100% { transform: translate(0, var(--rest)) rotate(0deg); opacity: 1; } }
.paused *, .paused *::before, .paused *::after, .tab-hidden *, .tab-hidden *::before, .tab-hidden *::after { animation-play-state: paused !important; }