/* Apple-style motion layer. Every rule is scoped to html.am, which motion.js adds.
   To remove it: set APPLE_MOTION to false in pages.mjs and rebuild, or open any page with ?motion=off. */
html.am{--ease:cubic-bezier(.16,1,.3,1);--h:72px}

/* Translucent sticky header */
html.am .site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px)}
html.am .site-footer{position:relative;z-index:2;background:var(--bg)}

/* Pinned scenes: the wrapper adds scroll distance, the section stays stuck while it plays.
   motion.js adds .am-off when a section's content would not fit the screen; it then scrolls like the plain site. */
.am-pin{position:relative;z-index:1;flex:none}
.am-pin::after{content:"";display:block;height:var(--travel,0px)}
html.am .am-pin:not(.am-off)>.hero,html.am .am-pin:not(.am-off)>.profile{position:sticky;top:var(--h);height:calc(100svh - var(--h));min-height:0}
html.am .am-pin:not(.am-off)>.about-band{position:sticky;top:var(--h);min-height:calc(100svh - var(--h));overflow-x:clip}
html.am .am-pin:has(.hero){--travel:240vh}
html.am .am-pin:has(.profile){--travel:85vh}
html.am .am-pin:has(.about-band){--travel:150vh}
html.am .am-pin.am-off{--travel:0px!important}
.am-row{will-change:transform}
.am-row>.outline{white-space:nowrap}
html.am .hero-type h1{transform-origin:50% 0}
html.am .hero-team{transform:translate(calc(-50% + var(--am-mx,0px)),0) scale(var(--s,1));transform-origin:50% 55%;transition:none;will-change:transform}
html.am .portrait{transform:translateX(var(--am-mx,0px)) scale(var(--s,1));transform-origin:50% 100%;transition:none;will-change:transform}
html.am .about-band h1{transform-origin:0 100%}
.am-w{display:inline-block}
.am-statement{position:absolute;inset:0;z-index:4;display:flex;flex-wrap:wrap;align-content:center;gap:.02em .26em;padding:0 var(--gutter);font-family:var(--display);font-weight:800;font-size:min(11.5vw,24svh);line-height:.95;letter-spacing:-.045em;text-transform:uppercase;color:var(--accent);opacity:0;pointer-events:none}

/* The next section follows the pinned one; it never slides over its text. */
html.am .strip-band,html.am .cup{position:relative;z-index:2}

/* Scroll focus: lists brighten as they reach the middle of the screen. */
html.am .row>:not(.ink),html.am .platform:not(.main)>:not(.ink){opacity:var(--focus,1)}
html.am .row:hover>*,html.am .row:focus-visible>*,html.am .platform:hover>*,html.am .platform:focus-visible>*{opacity:1}

/* Longer, softer timing everywhere */
html.am .ink{transition:clip-path .75s var(--ease)}
html.am .account .ink{transition:clip-path .75s var(--ease)}
html.am .rule::before,html.am .rule::after{transition:transform 1.6s var(--ease)}
html.am .rule .mark{transition:transform 1.3s var(--ease)}
html.am [data-reveal]{transition:opacity 1.2s var(--ease) calc(var(--i,0) * 90ms),transform 1.4s var(--ease) calc(var(--i,0) * 90ms)}
html.am [data-reveal]:not(.in){opacity:0;transform:translateY(64px) scale(.985)}
html.am .posts a:hover img{transform:scale(1.05)}
html.am .posts img{transition:transform 1.1s var(--ease)}

/* Page load */
@keyframes am-title{from{clip-path:inset(100% -5% -30% -5%);translate:0 .32em}to{clip-path:inset(-30% -5% -30% -5%);translate:0 0}}
@keyframes am-up{from{opacity:0;translate:0 32px}}
@keyframes am-side{from{opacity:0;translate:calc(var(--dir,1) * 12vw) 0}}
/* Photos never fade or get cut: they rise, fully opaque, from behind the section's bottom edge, heads first. */
@keyframes am-team{from{translate:0 105%}}
html.am .hero-type h1,html.am .title h1,html.am .nick-stack h1,html.am .about-band h1{animation:am-title 1.4s var(--ease) backwards}
html.am .am-row{animation:am-side 1.7s var(--ease) calc(.12s + var(--i,0) * .1s) backwards}
html.am .hero-team{animation:am-team 1.8s var(--ease) .15s backwards}
/* The portrait frame stays put; the person rises from its bottom line. */
html.am .portrait img{animation:am-team 1.8s var(--ease) .2s backwards}
html.am .hero-meta,html.am .title .label,html.am .profile-top{animation:am-up 1.1s var(--ease) .35s backwards}
html.am .hero-foot,html.am .profile-info{animation:am-up 1.2s var(--ease) .7s backwards}
/* On phones the info bar is the ground line the person rises from, so its line is there from the start and only its text arrives. */
@media(max-width:760px){html.am .profile-info{animation:none}html.am .profile-info>*{animation:am-up 1.2s var(--ease) .7s backwards}}
html.am .about-band>.label,html.am .about-band .body-copy{animation:am-up 1.2s var(--ease) .45s backwards}

/* Page change */
@keyframes am-page-out{to{opacity:0;scale:.975}}
@keyframes am-page-in{from{opacity:0;translate:0 28px}}
html.am:not(.theme-switching)::view-transition-old(root){animation:am-page-out .45s var(--ease) both}
html.am:not(.theme-switching)::view-transition-new(root){animation:am-page-in .9s var(--ease) both}

@media(max-width:760px){
 html.am .am-pin:has(.hero){--travel:170vh}
 html.am .am-pin:has(.about-band){--travel:110vh}
 html.am .am-pin:has(.profile){--travel:0px}
 html.am .am-pin:not(.am-off)>.profile{position:relative;top:auto;height:auto}
 .am-statement{font-size:min(17vw,20svh)}
}