/* Studio finish, laid over the current design: pages fade into each other, big headings rise into place word by word,
   case study pictures open out as they arrive, a View circle follows the cursor over the work, the app logos sit in one
   tone, and the footer name rises letter by letter. Plays for everyone, as the rest of the site's motion does. */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pl-page-out .42s cubic-bezier(.65, 0, .35, 1) both; }
/* the new page waits until the old one has nearly gone, so the two never show through each other */
::view-transition-new(root) { animation: pl-page-in .8s cubic-bezier(.22, .61, .36, 1) .4s both; }
.nav { view-transition-name: pl-nav; }
::view-transition-group(pl-nav), ::view-transition-old(pl-nav), ::view-transition-new(pl-nav) { animation: none; }
/* only the arriving page's header is shown: it is drawn exactly like the one it replaces (header.css), so nothing moves,
   and a link still lit from the click doesn't linger over it for the length of the fade */
::view-transition-old(pl-nav) { display: none; }
@keyframes pl-page-out { to { opacity: 0; transform: translateY(-2vh); } }
@keyframes pl-page-in { from { opacity: 0; transform: translateY(3vh); } }

/* Headings: each word comes up out of its own slot, a line at a time */
.pl-w { display: inline-block; overflow: hidden; vertical-align: top; padding: .24em .1em .32em; margin: -.24em -.1em -.32em; }
.pl-w > .pl-i { display: inline-block; transform: translateY(112%); transition: transform 1.15s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--d, 0s); will-change: transform; }
.pl-on .pl-w > .pl-i { transform: none; }

/* Case study pictures open out from a little inset, and the picture inside settles from slightly closer */
.pl-open { clip-path: inset(7% 5% 7% 5%); transition: clip-path 1.4s cubic-bezier(.22, .61, .36, 1); }
.pl-open > img, .pl-open > video, .pl-open .c-shot { transform: scale(1.08); transition: transform 1.8s cubic-bezier(.22, .61, .36, 1); }
.pl-open.pl-on { clip-path: inset(0 0 0 0); }
.pl-open.pl-on > img, .pl-open.pl-on > video, .pl-open.pl-on .c-shot { transform: none; }

/* A View circle that follows the cursor over the work */
.pl-cursor { position: fixed; left: 0; top: 0; z-index: 60; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%;
  display: grid; place-items: center; background: #EFECE5; color: #000000; font: 600 15px/1 var(--font); letter-spacing: -.01em;
  pointer-events: none; transform: translate3d(var(--x, -200px), var(--y, -200px), 0) scale(0); transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.pl-cursor.pl-show { transform: translate3d(var(--x), var(--y), 0) scale(1); }
.pl-cursor span { transition: opacity .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .pl-has-cursor .pv-s-card, .pl-has-cursor .c-next { cursor: none; }
}

/* The apps we connect to, in one tone; each takes its own colour back under the cursor */
.dark-site .tool .tool-mark { filter: brightness(0) invert(.93); opacity: .7; transition: filter .5s ease, opacity .5s ease; }
.dark-site .tool .tool-name { transition: color .5s ease; }
.dark-site .tool:hover .tool-mark { filter: none; opacity: 1; }

/* The footer name rises letter by letter as you reach the bottom */
.wordmark .pl-w { padding: .12em .02em .04em; margin: -.12em -.02em -.04em; }
.wordmark .pl-i { transition-duration: 1.3s; }

/* First visit to the homepage: the UD mark draws itself, then the night lifts away */
html.pl-intro::before { content: ""; position: fixed; inset: 0; z-index: 100; background: #000000; transition: transform 1s cubic-bezier(.76, 0, .24, 1); }
/* phones: Safari's see-through bottom bar sits outside a fixed inset 0 box, so the page showed under it while the mark
   drew (Alex 2 Nov 18:00). The night is made as tall as the screen with the bars hidden, plus a margin, so it covers
   behind the bar too; the page itself is black underneath until the night lifts */
html.pl-intro::before { bottom: auto; height: calc(100vh + 160px); height: calc(100lvh + 160px); }
html.pl-intro:not(.pl-lift) { background: #000000; }
html.pl-intro.pl-lift::before { transform: translateY(-100%); }
.pl-mark { position: fixed; left: 50%; top: 50%; z-index: 101; width: 84px; margin: -33px 0 0 -42px; pointer-events: none; transition: transform 1s cubic-bezier(.76, 0, .24, 1), opacity .5s ease; }
.pl-mark path { fill: none; stroke-width: 12; stroke-dasharray: 160; stroke-dashoffset: 160; animation: pl-draw .9s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.pl-mark .brand-u { stroke: #EFECE5; stroke-linecap: round; }
.pl-mark .brand-d { stroke: var(--mint, #8CCFC6); stroke-linejoin: round; animation-delay: .4s; }
html.pl-lift .pl-mark { transform: translateY(-50vh); opacity: 0; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
/* Arriving from another page, the page's fade in is the entrance: the homepage words are already in place inside it
   instead of rising under it (polish-intro.js sets pl-arrived) */
html.pl-arrived .hero-title .line > span { animation: none; transform: none; }
/* the same for the headings and pictures already on the first screen of any page (polish.js sets pl-now) */
.pl-now .pl-w > .pl-i, .pl-now.pl-open, .pl-now.pl-open > img, .pl-now.pl-open > video, .pl-now.pl-open .c-shot { transition: none !important; }
html.pl-intro .hero-title .line > span { animation-play-state: paused; }
html.pl-intro.pl-lift .hero-title .line > span { animation-play-state: running; }

/* First visit: under the mark, a line fills in word by word as the films below are opened behind the night
   (polish.js); unlit words wait faint, the next one comes up halfway, lit ones are full */
.pl-line { position: fixed; left: 0; right: 0; top: calc(50% + 58px); z-index: 101; margin: 0; text-align: center; pointer-events: none;
  font: 400 clamp(20px, 1.45vw, 28px)/1.2 var(--font); letter-spacing: -.01em; color: #EFECE5; transition: opacity .5s ease; }
.pl-line span { opacity: .16; transition: opacity .45s cubic-bezier(.16, 1, .3, 1); }
.pl-line span.is-next { opacity: .5; }
.pl-line span.is-lit { opacity: 1; }
.pl-line sup { font-size: .5em; margin-left: .08em; vertical-align: .9em; }
html.pl-lift .pl-line { opacity: 0; }
@media (max-width: 760px) { .pl-line { top: calc(50% + 52px); padding: 0 24px; font-size: 19px; } }