/* PICKUP Zine — motion layer.
   Only loads when "Animations" is on in Site settings AND the visitor hasn't asked
   their device to reduce motion. Everything here is an enhancement: with this file
   removed the site looks exactly the same, just still.
   Elements are animated automatically — new posts, gigs and issues get the same
   effects without any extra setup. */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);     /* fast start, long soft landing */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- page-to-page transitions (Chrome, Edge, Safari 18+) ---------- */
@view-transition { navigation: auto; }
.masthead { view-transition-name: masthead; }
::view-transition-old(root) { animation: vt-out .28s var(--ease-inout) both; }
::view-transition-new(root) { animation: vt-in .7s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-16px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(28px); } }

/* ---------- fade-up reveal ---------- */
.motion :is(
  .hero__text > .label, .hero__tagline, .hero__lede, .hero .actions,
  .page-head .label, .page-head__lede, .page-head .actions,
  .post__head .label, .post__cover, .prose > *,
  .section__head .label--link, .section__head > .label, .about-intro__more, .about-intro .actions,
  .about-cta .actions, .faces, .member, .gig, .card, .issue, .panel, .big-text,
  .issue-feature__text > :not(.issue-feature__title),
  .contact__row, .empty, .pager, .footer__inner > *
) {
  opacity: 0;
  transform: translate3d(0, 36px, 0);
  transition:
    opacity .9s var(--ease-out) var(--d, 0ms),
    transform 1.2s var(--ease-out) var(--d, 0ms),
    box-shadow .4s var(--ease-out);
}
.motion .is-in:is(
  .hero__text > .label, .hero__tagline, .hero__lede, .hero .actions,
  .page-head .label, .page-head__lede, .page-head .actions,
  .post__head .label, .post__cover, .prose > *,
  .section__head .label--link, .section__head > .label, .about-intro__more, .about-intro .actions,
  .about-cta .actions, .faces, .member, .gig, .card, .issue, .panel, .big-text,
  .issue-feature__text > :not(.issue-feature__title),
  .contact__row, .empty, .pager, .footer__inner > *
) {
  opacity: 1;
  transform: none;
}

/* ---------- headline words rise out of a mask ---------- */
.motion :is(.hero__title, .page-head__title, .post__title, .section__title,
            .issue-feature__title, .panel__title, .issue__title) { opacity: 0; }
.motion .is-split { opacity: 1 !important; }
.motion .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.motion .w > span {
  display: inline-block;
  transform: translate3d(0, 112%, 0) rotate(4deg);
  transform-origin: left bottom;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + var(--wi, 0) * 75ms);
}
.motion .is-in .w > span { transform: none; }

/* ---------- images wipe open, then settle ---------- */
/* (the clip goes on the image, not the frame, so the frame can still be watched for scrolling into view) */
.motion :is(.hero__media, .issue-feature__cover) { overflow: hidden; }
.motion :is(.hero__media, .issue-feature__cover) img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.22);
  transition: clip-path 1.4s var(--ease-inout) var(--d, 0ms), transform 2s var(--ease-out) var(--d, 0ms);
}
.motion :is(.hero__media, .issue-feature__cover).is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---------- about page: the team sheet drops onto the page ---------- */
.motion .about-sheet {
  opacity: 0;
  transform: translate3d(0, 60px, 0) rotate(-5deg) scale(.94);
  transition: opacity .8s var(--ease-out) var(--d, 0ms), transform 1.6s var(--ease-out) var(--d, 0ms), box-shadow 1.2s var(--ease-out);
  box-shadow: 0 0 0 var(--ink);
}
.motion .about-sheet img { clip-path: inset(0 0 100% 0); transform: scale(1.15); transition: clip-path 1.5s var(--ease-inout) calc(var(--d, 0ms) + 250ms), transform 2.2s var(--ease-out) calc(var(--d, 0ms) + 250ms); }
.motion .about-sheet.is-in { opacity: 1; transform: translate3d(0, var(--sheet-y, 0px), 0) rotate(1.2deg); box-shadow: 10px 10px 0 var(--ink); }
.motion .about-sheet.is-in img { clip-path: inset(0 0 0 0); transform: scale(1); }
@media (max-width: 820px) { .motion .about-sheet.is-in { transform: none; box-shadow: 6px 6px 0 var(--ink); } }

/* team cards: portraits sketch in (from blurred, high-contrast) and wobble on hover */
.motion .member__face img {
  opacity: 0; filter: blur(6px) contrast(3); transform: scale(1.08) rotate(-2deg);
  transition: opacity .9s var(--ease-out), filter 1.3s var(--ease-out), transform 1.4s var(--ease-out);
  transition-delay: calc(var(--d, 0ms) + 200ms);
}
.motion .member.is-in .member__face img { opacity: 1; filter: none; transform: none; }
.motion .member.is-in:hover { transform: translate3d(-6px, -6px, 0); box-shadow: 6px 6px 0 var(--ink); transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.motion .member.is-in:hover .member__face img { transform: scale(1.05) rotate(-2deg); transition-delay: 0ms; transition-duration: .5s; }
.motion .faces li { opacity: 0; transform: translate3d(0, 18px, 0) rotate(6deg); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--d, 0ms) + var(--fi, 0) * 70ms); }
.motion .faces.is-in li { opacity: 1; transform: none; }

/* hero drifts as you scroll (values set by main.js) */
.motion .hero__text { transform: translate3d(0, var(--hero-y, 0px), 0); opacity: var(--hero-o, 1); will-change: transform; }
.motion .hero__media { translate: 0 var(--media-y, 0px); }

/* ---------- header: tucks away on scroll down, returns on scroll up ---------- */
.motion .masthead { transition: transform .55s var(--ease-out); }
.motion .masthead.is-hidden { transform: translate3d(0, -100%, 0); }
.motion .masthead__inner { transition: min-height .45s var(--ease-out); }
.motion .masthead.is-scrolled .masthead__inner { min-height: 60px; }

.motion .nav a { position: relative; }
.motion .nav a:hover { border-color: transparent; }
.motion .nav a::after {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .45s var(--ease-out);
}
.motion .nav a:hover::after { transform: scaleX(1); transform-origin: left center; }
.motion .nav a[aria-current="page"]::after { display: none; }

@media (max-width: 820px) {
  .motion .nav.is-open { animation: menu-drop .45s var(--ease-out) both; }
  .motion .nav.is-open a { animation: menu-item .6s var(--ease-out) both; }
  .motion .nav.is-open a:nth-child(2) { animation-delay: 40ms; }
  .motion .nav.is-open a:nth-child(3) { animation-delay: 80ms; }
  .motion .nav.is-open a:nth-child(4) { animation-delay: 120ms; }
  .motion .nav.is-open a:nth-child(5) { animation-delay: 160ms; }
  .motion .nav.is-open a:nth-child(6) { animation-delay: 200ms; }
  .motion .nav a::after { display: none; }
}
@keyframes menu-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes menu-item { from { opacity: 0; transform: translate3d(0, -12px, 0); } }

/* reading progress on blog posts (bar added by main.js) */
.read-progress {
  position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--ink); transform-origin: left center; transform: scaleX(var(--p, 0));
}

/* ---------- buttons: ink wipes across ---------- */
.motion .btn {
  --fill: var(--ink);
  background-image: linear-gradient(var(--fill), var(--fill));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .55s var(--ease-out), color .35s var(--ease-out), transform .2s var(--ease-out);
}
.motion .btn:hover { background-size: 100% 100%; background-color: transparent; color: var(--white); }
.motion .btn:active { transform: scale(.97); }
.motion .btn--solid { --fill: var(--white); }
.motion .btn--solid:hover { background-color: var(--ink); color: var(--ink); }
.motion .btn--light { --fill: var(--ink); }
.motion .btn--light:hover { background-color: var(--white); color: var(--white); }
.motion .btn--ghost-light { --fill: var(--white); }
.motion .btn--ghost-light:hover { background-color: transparent; color: var(--ink); }

/* ---------- cards lift off the page with a hard shadow ---------- */
.motion :is(.card, .gig, .issue).is-in { transition-delay: 0ms; }
.motion :is(.card, .gig, .issue).is-in:hover {
  transform: translate3d(-6px, -6px, 0);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.motion .card__media img { transition: transform .8s var(--ease-out), filter .6s var(--ease-out); }
.motion .card__link:hover .card__media img { transform: scale(1.06); filter: grayscale(0) contrast(1); }

/* ---------- ticker reacts to scrolling (driven by main.js) ---------- */
.motion .ticker--js .ticker__track { animation: none; will-change: transform; }
.motion .ticker:hover .ticker__track { animation-play-state: paused; }