/* The airy level of the space homepage (html.airy, js/space-airy.js): the same page and type as the world
   (css/space.css), over stills of the same world. No WebGL, no filters at scroll time: only opacity and transform
   move, on the two house curves. Reduced motion: still frames, no transitions. */

/* the layer behind the page, where the world's canvas would be: one still at a time, the next one fading in over it */
.airy-world{position:fixed;inset:0;width:100%;height:100lvh;z-index:-1;overflow:hidden;pointer-events:none;background:#02030a;contain:strict}
html.airy[data-theme=dark] .airy-world{background:#02030a}
html.airy:not([data-theme=dark]) .airy-world{background:#ffffff}   /* (22 Oct, jury F15) the day print's own paper: the old navy sky showed as a band above the frame wherever no still lay */
.airy-still{position:absolute;inset:0;opacity:0;will-change:opacity,transform;transform-origin:50% 50%;transition:opacity .7s cubic-bezier(.65,0,.35,1)}   /* the turn: power3.inOut */
.airy-still.is-on{opacity:1}
.airy-still.is-arrival{transition-duration:1.2s}   /* an arrival into a new world takes the long tempo */
.airy-still.is-cut{transition:none}
.airy-still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* the ring stills keep the screen rectangles the renderer measured (js/space-stills.js): the page's open button and the
   case portal are placed on them, so the picture is never cropped in the middle */
html.airy[data-orientation=port] .airy-still img{object-position:50% 50%}
/* the hero still is the first paint: it must not wait for the layer's fade */
.airy-still.is-first{transition:none}
/* the hero on portrait screens (lead, 22 Oct): its still was rendered with the planet below, where the title and the
   note stand; the live world frames the planet above the copy on phones, so the still is turned over to match */
html.airy[data-orientation=port] .airy-still[data-still=hero] img{transform:scaleY(-1)}

/* the page field of the old flat design (html.no-field, js/3d/page-field.js) stands down: the stills are the field */
html.airy.no-field body::before{display:none!important}
html.airy body{background:transparent!important}
/* no page grain over the stills (the world's grain lives in the renders) */
html.airy body::after{opacity:0!important}

/* the ring of work: the pinned stage from the world, here a shorter hold per project (no flight to fill) */
html.airy .work-orbit{height:calc(var(--wo-count,8)*70svh + 100svh)}
html.airy .work-orbit-sticky{position:sticky;top:0;height:100svh}
/* the open button sits on the screen's lower right corner (placed from the still's measured rectangle) */
html.airy .wo-open{transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s,transform 0s}
html.airy .wo-open.is-shown{transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s,transform 0s}
/* the press answers: the screen's own picture comes up on the still at full contrast, then the portal takes it */
.airy-screen{position:fixed;z-index:180;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
.airy-screen.is-on{opacity:1}
.airy-screen img{position:absolute;display:block;max-width:none}

/* phones and portrait tablets, both levels (the world flies on phones too since 16 Oct): the hero copy keeps the bottom
   left, the ring caption sits under the devices */
@media (max-width: 1023px),(orientation: portrait){
 html:is(.space-on,.airy) body .hero-frame{min-height:100svh!important}
 html:is(.space-on,.airy) body .hero-frame .hero-copy{left:var(--gutter,20px)!important;width:calc(100vw - 2*var(--gutter,20px))!important;bottom:clamp(36px,9svh,80px)!important}
 html:is(.space-on,.airy) body .hero-frame .hero-copy h1{font-size:clamp(40px,11.5vw,76px)!important;letter-spacing:-.05em!important}
 /* the name stands where the desktop has it, top left under the brand's tab: it was hidden here when the nav stood at the
    top (only the heading's label named him, so a phone's first screen never said who; 22 Oct, review R18) */
 html.airy .work-orbit{height:calc(var(--wo-count,8)*62svh + 100svh)}
 html:is(.space-on,.airy) .work-orbit-info{left:0;right:0;bottom:clamp(28px,6svh,60px);max-width:none}
 html:is(.space-on,.airy) .wo-title{font-size:clamp(40px,10vw,64px)}
 html:is(.space-on,.airy) .wo-line{font-size:15px}
 html:is(.space-on,.airy) .wo-open{width:72px;height:72px}
 html:is(.space-on,.airy) .wo-open svg{width:24px;height:24px}
 html:is(.space-on,.airy) .wo-step{width:48px;height:48px}
 html:is(.space-on,.airy) #about :is(.bio-tabs,.bio-panels){margin-left:0}
 html:is(.space-on,.airy) #about .auto-tab-01-logo{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
 .airy-still,.airy-still.is-arrival,.airy-screen{transition:none}
 html.airy .wo-open::before{display:none}
}