/* the opening flyover */
.fly { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.fly-bar { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transform: scaleY(0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.fly-bar.top { top: 0; transform-origin: top; }
.fly-bar.bot { bottom: 0; transform-origin: bottom; }
.fly.in .fly-bar { transform: scaleY(1); }
.fly-fade { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .6s; }
.fly-fade.on { opacity: 1; }
.fly-card { position: absolute; left: 0; right: 0; bottom: calc(11vh + 5vh); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity 1.1s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1); text-shadow: 0 2px 18px rgba(0, 0, 0, .85), 0 0 4px rgba(0, 0, 0, .7); }
.fly-card.on { opacity: 1; transform: none; }
.fly-card p { margin: 0; }
.fly-l1 { font: italic 400 clamp(22px, 2.6vw, 38px)/1.25 var(--display, 'Cormorant', serif); color: #f6ead0; }
.fly-l2 { margin-top: 6px !important; font: italic 400 clamp(16px, 1.7vw, 24px)/1.4 var(--display, 'Cormorant', serif); color: rgba(246, 234, 208, .82); }
.fly-card.title { bottom: auto; top: 50%; transform: translateY(-50%); }
.fly-card.title.on { transform: translateY(-50%); }
.fly-card.title .fly-l1 { font: 500 clamp(44px, 7vw, 108px)/1 var(--display, 'Cormorant', serif); letter-spacing: .02em; color: #f3dfae; }
.fly-card.title .fly-l2 { margin-top: 14px !important; font: 500 clamp(11px, 1.1vw, 15px)/1 var(--label); letter-spacing: .5em; text-transform: uppercase; color: rgba(243, 223, 174, .85); font-style: normal; }
.fly-skip { pointer-events: auto; position: absolute; right: 22px; top: calc(11vh - 52px); display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 99px; cursor: pointer; font: 500 11px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: rgba(246, 234, 208, .8); background: rgba(255, 255, 255, .08); opacity: 0; transition: opacity .8s .8s, background .2s; }
.fly.in .fly-skip { opacity: 1; }
.fly-skip:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.fly-skip kbd { font: 500 10px/1 var(--label); padding: 3px 5px; border-radius: 4px; background: rgba(255, 255, 255, .1); }
.fly-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(236, 211, 154, .55); transform-origin: left; transform: scaleX(0); }

/* while flying, the page steps aside */
body.flying header.top, body.flying #view, body.flying .world-overlay .marker, body.flying .ink-rose, body.flying .ink-border { opacity: 0 !important; pointer-events: none !important; transition: opacity .8s; }
body.flying .world-overlay .rlabel { transition: opacity .8s; }
@media (max-width: 700px) { .fly-bar { height: 8vh; } .fly-card { bottom: calc(8vh + 3vh); padding: 0 18px; } .fly-skip { top: 12px; } }

/* record mode (?film=1): no interface at all, a fixed 1920x1080 picture */
body.film { background: #000; cursor: none; }
body.film header.top, body.film #view, body.film .grain, body.film #particles, body.film .world-overlay .marker { display: none !important; }
#world.film-frame { position: fixed !important; left: 0; top: 0; width: 1920px !important; height: 1080px !important; transform-origin: 0 0; }
.home-fly { margin-top: 14px; }