/* motion layer (demo, phone + PC) */
@font-face{font-family:'FXCond';src:url('fx-barlow-cond-bold.woff2') format('woff2');font-weight:700;font-display:block}   /* Barlow Condensed Bold, SIL OFL, capitals only */
#fx{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:hidden}
#fx>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fxl{position:absolute;left:0;top:0;opacity:0;font:600 12.5px/1.32 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.fxl b{display:block;font-weight:700;font-size:13.5px;min-height:1.3em}
.fxl i{display:block;font-style:normal;opacity:.66;min-height:1.3em}
.fxl.pill{background:rgba(8,10,14,.66);border:1px solid rgba(255,255,255,.32);border-radius:9px;padding:7px 10px;text-shadow:none;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.fxl.gold{border-color:rgba(243,213,155,.6)} .fxl.gold b{color:#F3D59B}
.fxl.right{text-align:right}
.fxl.nut i{text-transform:none;letter-spacing:.08em}
.fxl.kick{font-size:14px;font-weight:700;letter-spacing:.22em}
.fxl.kick.center{font-weight:700;letter-spacing:.42em}
.fxl.big{font:600 34px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:-.02em;text-transform:none}
.fxl.big small{font-size:15px;opacity:.7}
.fxl.deg{font:600 22px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:0}
.fxl.deg small{font-size:11px;opacity:.6;letter-spacing:.14em}
.fxlogo{position:absolute;left:0;top:0;transform-origin:0 0;font:600 34px/1.1 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;letter-spacing:-.015em;color:#fff;white-space:nowrap;opacity:0}
.fxlogo span{opacity:.12}
.fxgesture{position:absolute;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));text-align:center;opacity:0;font:400 14px -apple-system,BlinkMacSystemFont,sans-serif;color:rgba(255,255,255,.86)}
.fxgesture svg{display:block;margin:0 auto 6px}
/* this demo replaces the old texts over the film */
#project,#hint,#bar{display:none!important}
@media (orientation: landscape){   /* PC: headline smaller, top left, so the pins on the globe stay free */
.hero{align-items:flex-start;padding-top:96px;background:none}
.hero h1{font-size:clamp(30px,3.4vw,52px);max-width:14em;text-wrap:balance}
.hero p{display:none}
}
@media (orientation: portrait){
.hero{align-items:flex-start;padding-top:calc(86px + env(safe-area-inset-top,0px));background:none}
.hero h1{font-size:30px;max-width:12.5em;text-wrap:balance}
.hero p{display:none}
}

.fxbands{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fxband{position:absolute;left:0;top:0;white-space:nowrap;font:700 120px/.86 'FXCond','Arial Narrow',sans-serif;letter-spacing:.01em;text-transform:uppercase;opacity:0;will-change:transform}
.fxband.line{-webkit-text-stroke-width:1.6px}
.fxl.center{text-align:center}
@media (orientation: portrait){   /* phone: 12 px minimum (wiki rule) */
.fxl{font-size:12px;letter-spacing:.1em} .fxl b{font-size:12.5px} .fxl.kick{font-size:12.5px;letter-spacing:.2em}
}