/* Home teaser scene for /fly/: sky runs sunrise to dusk and a Sisserou flies a route over the island as you scroll. */
.fs{background:var(--abyss);color:var(--sand)}
.fs .stage{display:flex;align-items:center;overflow:hidden;isolation:isolate}
.fs-sky{position:absolute;inset:0;z-index:-3}
.fs-s0{background:linear-gradient(180deg,#14727a 0%,#0c5258 70%,#07343a 100%)}
.fs-s1{background:linear-gradient(180deg,#1b4f63 0%,#7a4f62 55%,#F2755A 125%)}
.fs-s2{background:linear-gradient(180deg,#35D0BA 0%,#118a96 80%);opacity:0}
.fs-s3{background:linear-gradient(180deg,#0b2f3d 0%,#06222a 60%,#3b2250 130%);opacity:0}
html.fx .fs-s1{opacity:clamp(0,calc(1 - var(--p) * 3.4),1)}
html.fx .fs-s2{opacity:clamp(0,calc(1.15 - (var(--p) - .36) * (var(--p) - .36) * 22),.9)}
html.fx .fs-s3{opacity:clamp(0,calc((var(--p) - .6) * 2.6),1)}
.fs-sun{position:absolute;z-index:-2;left:6%;top:44%;width:min(46vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#FFE9B0 0,#FFB547 34%,rgba(255,181,71,.0) 68%)}
html.fx .fs-sun{transform:translate3d(calc(var(--p) * 78vw),calc(var(--p) * (1 - var(--p)) * -150svh),0);opacity:calc(1 - var(--p) * .45)}
.fs-map{position:absolute;z-index:-1;right:max(var(--gut),calc((100vw - 1240px)/2 + var(--gut)));top:50%;width:357px;height:622px;translate:0 -50%;scale:var(--k,1);transform-origin:right center}
@media (min-height:900px){.fs-map{--k:1.22}}
@media (max-height:760px){.fs-map{--k:.92}}
@media (max-height:640px){.fs-map{--k:.74}}
.fs-map svg{display:block;width:357px;height:622px;max-width:none;overflow:visible}
.fs-map .isl{fill:#15614f;stroke:#F4EBDA;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.fs-map .rt{fill:none;stroke:#FFB547;stroke-width:4;stroke-linecap:round;stroke-dasharray:1 0;stroke-dashoffset:0}
.fs-map .dt circle{fill:#FFB547;stroke:#04181A;stroke-width:3}
html.fx .fs-map .rt{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p) * 1.02)}
html.fx .fs-map .dt circle{opacity:clamp(0,calc((var(--p) - var(--at)) * 40 + .12),1)}
.fs-bird{display:none;position:absolute;left:0;top:0;width:64px;height:64px;offset-rotate:auto 90deg;offset-distance:100%}
.fs-bird svg{display:block;width:100%;height:100%;filter:drop-shadow(0 10px 8px rgba(0,0,0,.4))}
@supports (offset-path:path("M0 0")){html.fx .fs-bird{display:block;offset-distance:calc(var(--p) * 100%)}}
.fs-txt{width:100%}
.fs-txt .wrap{max-width:1400px}
.fs h2{font-size:clamp(3.2rem,9vw,8rem);line-height:.88;letter-spacing:-.03em;margin:0 0 26px;max-width:9ch}
.fs h2 em{color:var(--sun)}
.fs p{max-width:40ch;font-size:1.12rem}
@media (max-width:860px){
 .fs .stage{align-items:flex-start;padding-top:96px}
 .fs-map{right:50%;top:auto;bottom:6px;translate:50% 0;--k:.46;transform-origin:center bottom;opacity:.95}
 .fs h2{font-size:clamp(2.8rem,14vw,4rem);margin-bottom:14px}
 .fs p{font-size:1rem;max-width:34ch}
 .fs-txt{position:relative;z-index:2}
 html:not(.fx) .fs .stage{padding-bottom:520px}
}
@media (max-width:860px) and (max-height:700px){.fs-map{--k:.36}.fs p{display:none}}
html:not(.fx) .fs .stage{min-height:0;padding-block:96px}
html:not(.fx) .fs-map{position:relative;right:auto;top:auto;translate:none;scale:.9;margin:30px auto 0}

.fs .stage::before{content:"";position:absolute;left:0;right:0;top:0;height:38svh;background:linear-gradient(180deg,#04181A 0%,rgba(4,24,26,.6) 45%,rgba(4,24,26,0) 100%);z-index:-1;pointer-events:none}