@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&display=swap');
:root{color-scheme:dark;--cream:#f6eedb;--gold:#e8c890}*{box-sizing:border-box}body{margin:0;background:#031416;color:var(--cream);font-family:'DM Sans',sans-serif;min-height:100svh;isolation:isolate}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:7px}.forest{position:fixed;inset:0;z-index:-3;background:linear-gradient(90deg,#031416ed,#031416bb),url('assets/chrysalis-film-poster.jpg') center/cover;filter:blur(15px)}.film{position:fixed;inset:0 3% 0 auto;width:60%;height:100%;object-fit:contain;z-index:-1;transition:width 1.2s,inset 1.2s;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}header{position:relative;z-index:2;padding:32px 5%}.wordmark{font:28px/1 'Italiana',Georgia,serif}.wordmark span{display:block;font:11px/1.6 'DM Sans',sans-serif;letter-spacing:.3em;margin-top:10px}main{min-height:calc(100svh - 210px);display:flex;align-items:center;padding:36px 7% 70px}.invitation{width:48%;transition:opacity .65s,transform .9s}.eyebrow{font-size:12px;letter-spacing:.2em;color:#c3d8cd;margin:0 0 24px}h1{font:clamp(45px,5.6vw,82px)/1.08 'Italiana',Georgia,serif;margin:0;letter-spacing:-.025em}h1 em{font:italic .88em Georgia,serif;color:var(--gold)}.subline{font-size:16px;line-height:1.8;color:#c7d8d0;margin:25px 0 30px}.begin{display:inline-block;padding:16px 25px;border:1px solid #e8c89099;border-radius:40px;background:#062022b3;font-size:15px;transition:background .2s}.begin:hover{background:#23423c}.small-note{font:italic 15px Georgia,serif;color:#b5cbbf;margin-top:20px}footer{position:fixed;bottom:0;left:0;right:0;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:3;background:linear-gradient(transparent,#031416cc);font-size:14px}#film-status{color:#c3d8cd;max-width:65%;line-height:1.5}.controls{display:flex;gap:24px;align-items:center}.controls button{color:var(--cream);border:0;background:transparent;padding:8px 0;cursor:pointer;font-size:14px}.quiet-entry{padding:8px 0;border-bottom:1px solid #b5cbbf66;white-space:nowrap}.playing .invitation{opacity:0;transform:translateY(-12px);pointer-events:none;visibility:hidden}.playing .film{width:100%;inset:0}.playing header{opacity:.55;transition:opacity .8s}.departing{opacity:0;transition:opacity .6s}.controls [hidden]{display:none}@media(max-width:700px){header{padding:24px}.wordmark{font-size:24px}.film{width:100%;inset:0;object-position:center;mask-image:none}main{min-height:calc(100svh - 100px);align-items:flex-end;padding:20px 24px 125px;background:linear-gradient(0deg,#031416f0 5%,#031416dd 24%,transparent 72%)}.invitation{width:100%;text-align:center}h1{font-size:45px}.eyebrow{font-size:11px;margin-bottom:15px}.subline{font-size:15px;margin:18px 0}.small-note{margin-bottom:0}.playing main{background:none}footer{padding:14px 24px;gap:12px;font-size:13px}.controls{gap:16px}.controls button{font-size:13px}#film-status{max-width:46%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}

/* One stationary scene before and during playback. */
.forest{background:linear-gradient(90deg,#03141666,transparent 45%,#03141633),url('assets/woodland.webp') center/cover no-repeat;filter:none}
.film,.playing .film{inset:0 auto 0 50%;width:min(100vw,57.142857svh);height:100svh;transform:translateX(-50%);object-fit:cover;object-position:center;transition:none;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
main{padding-left:4%;padding-right:4%}
.invitation{width:30%;text-shadow:0 2px 18px #001015;transition:opacity .65s}
h1{font-size:clamp(38px,4.1vw,64px)}
.playing .invitation{transform:none}
@media(max-width:700px){
 .film,.playing .film{inset:0;width:100%;height:100svh;transform:none;object-fit:cover;object-position:center;mask-image:none}
 .invitation{width:100%}
 main{padding-left:24px;padding-right:24px}
 h1{font-size:45px}
}

/* Keep the whole portrait-format film visible, with breathing room for wings. */
.film,.playing .film{inset:50% auto auto 50%;width:min(90vw,51.42857svh);height:90svh;transform:translate(-50%,-50%);object-fit:contain;object-position:center;transition:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
@media(max-width:700px){.film,.playing .film{inset:50% auto auto 50%;width:92vw;height:86svh;transform:translate(-50%,-50%);object-fit:contain;mask-image:none}.controls{gap:12px;flex-wrap:wrap;justify-content:flex-end}footer{align-items:flex-end}.controls button,.quiet-entry{font-size:12px}}
.film,.playing .film{mask-image:none}