/* Home ⇄ studio page transition (classes set by page-transitions.js).
   Desktop: the binder and desk props slide off the sides, the hero paper opens into the
   studio's set page and the collection choices carry over as its tabs. Phones: a page push. */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}
:root{--vt-ease:cubic-bezier(.22,.8,.24,1);--vt-paper:#fffefa}
:root[data-theme=dark]{--vt-paper:#211a15}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--vt-paper:#211a15}}

/* The same piece on both pages shares a name, so it travels */
.vt-names :is(.bp-top,.topbar){view-transition-name:vt-header}
.vt-names :is(.bp-hero-copy,#sets-dialog){view-transition-name:vt-paper}
.vt-names :is(.bp-modes>.bp-mode:first-child,#choose-by-set){view-transition-name:vt-by-set}
.vt-names :is(.bp-modes>.bp-mode:last-child,#choose-by-pokemon){view-transition-name:vt-by-pokemon}
.vt-names :is(.bp-top .bp-brand-mark,.topbar .brand-mark){view-transition-name:vt-brand}
/* Sized to their words, so one headline can turn into the other */
.vt-names :is(.bp-hero h1,#set-picker-title){view-transition-name:vt-title;width:fit-content}
.vt-names .flow-bar{view-transition-name:vt-flow}
.vt-names .bp-hero-visual{view-transition-name:vt-binder}
.vt-names .bp-prop-plant{view-transition-name:vt-prop-plant}
.vt-names .bp-prop-pins{view-transition-name:vt-prop-pins}
.vt-names .bp-prop-toploaders{view-transition-name:vt-prop-toploaders}
.vt-names .bp-prop-joystick{view-transition-name:vt-prop-joystick}

.vt-nav::view-transition-group(*){animation-duration:.86s;animation-timing-function:var(--vt-ease)}
.vt-nav::view-transition-group(vt-header){z-index:4}
.vt-nav::view-transition-group(vt-brand){z-index:5}
.vt-nav::view-transition-group(vt-by-set),.vt-nav::view-transition-group(vt-by-pokemon),.vt-nav::view-transition-group(vt-title),.vt-nav::view-transition-group(vt-flow){z-index:3}
.vt-nav::view-transition-group(vt-paper){z-index:2}

/* Desktop: the desk stays put underneath; the new page settles over it */
.vt-nav::view-transition-old(root){animation:none}
.vt-nav::view-transition-new(root){animation:bp-vt-fade-in .4s ease both}
/* Nothing to carry over (a page scrolled past its hero): the new page simply rises into place */
.vt-nav:not(.vt-names):not(.vt-solo)::view-transition-new(root){animation:bp-vt-rise-in .42s var(--vt-ease) both}
/* The studio's walnut is drawn by desk.js; until it is, the page itself is the wood */
@media(min-width:1024px){
 .vt-studio body{background:#3a2418 url(/assets/desk/walnut-surface-day.webp) center/cover fixed}
 :root.vt-studio[data-theme=dark] body{background:#1d120b url(/assets/desk/walnut-surface-night.webp) center/cover fixed}
}
@media(min-width:1024px) and (prefers-color-scheme:dark){:root.vt-studio:not([data-theme=light]) body{background:#1d120b url(/assets/desk/walnut-surface-night.webp) center/cover fixed}}

/* The paper grows (or folds back) between the hero card and the set page, its own
   content fading across inside it */
.vt-nav.vt-names::view-transition-group(vt-paper){background:var(--vt-paper);border-radius:22px;overflow:clip;box-shadow:0 2px 0 #0000000d,0 40px 70px -34px #0d0500d9}
.vt-nav.vt-names::view-transition-old(vt-paper),.vt-nav.vt-names::view-transition-new(vt-paper){width:100%;height:100%;object-fit:none;object-position:left top}
.vt-nav.vt-names::view-transition-old(vt-paper){animation:bp-vt-fade-out .22s ease both}
.vt-nav.vt-names::view-transition-new(vt-paper){animation:bp-vt-fade-in .38s .14s ease both}

/* One headline turns into the other while it travels */
.vt-nav::view-transition-old(vt-title){animation:bp-vt-fade-out .24s ease both}
.vt-nav::view-transition-new(vt-title){animation:bp-vt-fade-in .4s .14s ease both}
/* The top bar stays solid: the new one settles over the old */
.vt-nav::view-transition-old(vt-header){animation:none}
.vt-nav::view-transition-new(vt-header){animation:bp-vt-fade-in .3s .06s ease both}
/* The collection choices swap their words early, then glide into place as tabs */
.vt-nav::view-transition-old(vt-by-set),.vt-nav::view-transition-old(vt-by-pokemon){animation:bp-vt-fade-out .2s ease both}
.vt-nav::view-transition-new(vt-by-set),.vt-nav::view-transition-new(vt-by-pokemon){animation:bp-vt-fade-in .34s .1s ease both}
/* The studio's step bar drops in from above (and lifts away on the way home) */
.vt-nav::view-transition-new(vt-flow){animation:bp-vt-drop-in .6s .12s var(--vt-ease) both}
.vt-nav::view-transition-old(vt-flow){animation:bp-vt-lift-out .3s ease-in both}

/* Off the sides: the binder to the right, each prop toward its own edge */
.vt-nav::view-transition-old(vt-binder){animation:bp-vt-off-right .75s var(--vt-ease) both}
.vt-nav::view-transition-new(vt-binder){animation:bp-vt-on-right .9s .06s var(--vt-ease) both}
.vt-nav::view-transition-old(vt-prop-plant),.vt-nav::view-transition-old(vt-prop-pins){animation:bp-vt-prop-right .8s var(--vt-ease) both}
.vt-nav::view-transition-old(vt-prop-toploaders),.vt-nav::view-transition-old(vt-prop-joystick){animation:bp-vt-prop-left .8s var(--vt-ease) both}
.vt-nav::view-transition-new(vt-prop-plant),.vt-nav::view-transition-new(vt-prop-pins){animation:bp-vt-prop-in-right 1s .1s var(--vt-ease) both}
.vt-nav::view-transition-new(vt-prop-toploaders),.vt-nav::view-transition-new(vt-prop-joystick){animation:bp-vt-prop-in-left 1s .1s var(--vt-ease) both}

/* When the other page has no set page to open into (My binder), the hero slides off left
   and the old top bar fades under the new page's own */
.vt-nav.vt-solo::view-transition-old(vt-header){animation:bp-vt-fade-out .3s ease both}
.vt-nav.vt-solo::view-transition-old(vt-paper),.vt-nav.vt-solo::view-transition-old(vt-by-set),.vt-nav.vt-solo::view-transition-old(vt-by-pokemon){animation:bp-vt-off-left .7s var(--vt-ease) both}

/* Phones: a page push, forward into the studio and back out to home */
@media(max-width:1023px){
 .vt-nav::view-transition-group(root){animation-duration:.45s}
 .vt-studio::view-transition-old(root){animation:bp-vt-push-away .45s var(--vt-ease) both}
 .vt-studio::view-transition-new(root){animation:bp-vt-push-in .45s var(--vt-ease) both}
 .vt-home::view-transition-old(root){animation:bp-vt-push-back .45s var(--vt-ease) both;z-index:1}
 .vt-home::view-transition-new(root){animation:bp-vt-push-under .45s var(--vt-ease) both}
}

@keyframes bp-vt-fade-in{from{opacity:0}}
@keyframes bp-vt-fade-out{to{opacity:0}}
@keyframes bp-vt-rise-in{from{opacity:0;transform:translateY(28px)}}
@keyframes bp-vt-lift-out{to{opacity:0;transform:translate(-24px,-10px)}}
@keyframes bp-vt-drop-in{from{opacity:0;transform:translateY(-28px)}}
@keyframes bp-vt-off-right{to{opacity:0;transform:translateX(60vw) rotate(6deg)}}
@keyframes bp-vt-on-right{from{opacity:0;transform:translateX(60vw) rotate(6deg)}}
@keyframes bp-vt-off-left{to{opacity:0;transform:translateX(-55vw) rotate(-5deg)}}
@keyframes bp-vt-prop-right{to{transform:translateX(42vw) translateY(-6vh) rotate(28deg)}}
@keyframes bp-vt-prop-left{to{transform:translateX(-42vw) translateY(6vh) rotate(-28deg)}}
@keyframes bp-vt-prop-in-right{from{transform:translateX(42vw) translateY(-6vh) rotate(28deg)}}
@keyframes bp-vt-prop-in-left{from{transform:translateX(-42vw) translateY(6vh) rotate(-28deg)}}
@keyframes bp-vt-push-away{to{opacity:.6;transform:translateX(-28%)}}
@keyframes bp-vt-push-in{from{transform:translateX(100%)}}
@keyframes bp-vt-push-back{to{transform:translateX(100%)}}
@keyframes bp-vt-push-under{from{opacity:.6;transform:translateX(-28%)}}