/* =========================================================================
   pages.css — the shared shell for every page that slides over the sky
   (project, All Works, About, Contact). Shown/hidden by js/core/router.js.
   ========================================================================= */

.page{position:fixed;inset:0;z-index:10;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;transition:opacity .7s,visibility 0s .7s;-webkit-overflow-scrolling:touch}
.page.on{opacity:1;visibility:visible;transition:opacity .7s .15s,visibility 0s}

/* scrolled content fades out before it reaches the fixed top bar, so it never runs under the menu.
   The mask sits on the scrolling box itself, so it stays put while the content moves through it.
   Fully hidden down to just under the bar, then a soft fade — above where any page's content starts. */
.page{
  --mask-clear:calc(env(safe-area-inset-top,0px) + 62px);
  --mask-solid:calc(env(safe-area-inset-top,0px) + 94px);
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--mask-clear),#000 var(--mask-solid));
  mask-image:linear-gradient(to bottom,transparent var(--mask-clear),#000 var(--mask-solid));
}
/* the Contact drop page never scrolls, and its pieces fall in from above — no mask there */
#pg-contact[data-design="drop"]{-webkit-mask-image:none;mask-image:none}

/* the centred content column */
.page-in{box-sizing:border-box;max-width:1240px;margin:0 auto;padding-inline:var(--gutter);padding-block:clamp(110px,16vh,170px) 120px}
.page-in.wide{max-width:1640px}

/* blocks marked .rise slide up softly when their page opens */
.page .rise{transform:translateY(30px);opacity:0;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s}
.page.on .rise{transform:none;opacity:1}
.page.on .rise:nth-child(2){transition-delay:.08s}
.page.on .rise:nth-child(3){transition-delay:.16s}
.page.on .rise:nth-child(4){transition-delay:.24s}