.transition-layer{
  position:fixed;
  inset:0;
  z-index:160;
  pointer-events:none;
  overflow:hidden;
  --t-sky:#8dd7ff;
  --t-blue:#4bb8ef;
  --t-deep:#2f9ee8;
  --t-mint:#c8f6d8;
  --t-green:#90e4b6;
  --t-cream:#fff1a8;
  --t-peach:#ffc9b7;
  --t-lilac:#d7cbff;
  --t-rose:#ffc4dc;
  --t-paper:#fbfdfe;
}
.transition-layer i,
.transition-layer em{
  position:absolute;
  display:block;
  will-change:transform,opacity,clip-path;
}
.transition-layer i:before,
.transition-layer i:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.transition-layer em{
  font-style:normal;
  background:linear-gradient(135deg,var(--t-sky),var(--t-mint));
}

/* 01 / paper: a soft chromatic sheet passes through the viewport */
.transition--paper i{
  inset:-8%;
  transform:translateY(110%) rotate(-2deg);
  background:
    linear-gradient(112deg,
      var(--t-paper) 0%,
      #eefaff 22%,
      var(--t-sky) 38%,
      var(--t-mint) 54%,
      var(--t-cream) 70%,
      #ffffff 100%);
  box-shadow:0 -1px 0 rgba(16,35,49,.10),0 22px 70px rgba(67,166,225,.16);
}
.transition--paper i:before{
  inset:0 auto 0 8%;
  width:16vw;
  background:linear-gradient(180deg,rgba(255,255,255,.0),rgba(255,255,255,.58),rgba(255,255,255,.0));
  transform:skewX(-18deg);
  opacity:.72;
}
.transition--paper i:after{
  background:repeating-linear-gradient(90deg,rgba(16,35,49,.055) 0 1px,transparent 1px 42px);
  mix-blend-mode:multiply;
  opacity:.18;
}
.transition--paper.is-running i{animation:paper .88s var(--ease-hard) forwards}
@keyframes paper{
  0%{transform:translateY(110%) rotate(-2deg)}
  46%{transform:translateY(0) rotate(0deg)}
  100%{transform:translateY(-110%) rotate(2deg)}
}

/* 02 / split: two colored print plates close and reopen */
.transition--split i{
  top:0;
  bottom:0;
  width:50%;
  overflow:hidden;
}
.transition--split i:nth-child(1){
  left:0;
  transform:translateX(-100%);
  background:linear-gradient(135deg,#ecfbff 0%,var(--t-sky) 48%,var(--t-lilac) 100%);
}
.transition--split i:nth-child(2){
  right:0;
  transform:translateX(100%);
  background:linear-gradient(225deg,#f7fff8 0%,var(--t-mint) 42%,var(--t-cream) 100%);
}
.transition--split i:before{
  width:22vw;
  left:auto;
  right:-11vw;
  background:rgba(255,255,255,.42);
  transform:skewX(-16deg);
}
.transition--split i:nth-child(2):before{left:-11vw;right:auto}
.transition--split.is-running i:nth-child(1){animation:splitLeft .95s var(--ease-hard) forwards}
.transition--split.is-running i:nth-child(2){animation:splitRight .95s var(--ease-hard) forwards}
@keyframes splitLeft{0%{transform:translateX(-100%)}45%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@keyframes splitRight{0%{transform:translateX(100%)}45%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* 03 / stairs: horizontal pastel strips sweep at different speeds */
.transition--stairs i{
  height:16.7%;
  left:-3%;
  right:-3%;
  transform:translateX(-105%) skewX(-7deg);
  background:linear-gradient(90deg,var(--t-sky),var(--t-mint));
}
.transition--stairs i:nth-child(1){background:linear-gradient(90deg,#e8f8ff,var(--t-sky),#d9f0ff)}
.transition--stairs i:nth-child(2){background:linear-gradient(90deg,#f4fff7,var(--t-mint),#e9fff2)}
.transition--stairs i:nth-child(3){background:linear-gradient(90deg,#fff9d8,var(--t-cream),#effbff)}
.transition--stairs i:nth-child(4){background:linear-gradient(90deg,#eef8ff,var(--t-blue),#d5fff0)}
.transition--stairs i:nth-child(5){background:linear-gradient(90deg,#f7f2ff,var(--t-lilac),#e4faff)}
.transition--stairs i:nth-child(6){background:linear-gradient(90deg,#fff3ef,var(--t-peach),#f4fff7)}
.transition--stairs i:after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  transform:translateX(-42%);
}
.transition--stairs.is-running i{animation:stair .92s var(--ease-hard) forwards;animation-delay:calc(var(--p)*36ms)}
@keyframes stair{0%{transform:translateX(-105%) skewX(-7deg)}46%{transform:translateX(0) skewX(-7deg)}100%{transform:translateX(105%) skewX(-7deg)}}

/* 04 / catalog: vertical color cards flip like a sample book */
.transition--catalog i{
  top:-3%;
  bottom:-3%;
  width:20%;
  border-right:1px solid rgba(16,35,49,.12);
  transform:translateY(104%) rotateX(8deg);
  transform-origin:bottom;
  background:#fff;
}
.transition--catalog i:nth-child(1){background:linear-gradient(180deg,#f8fdff,var(--t-sky))}
.transition--catalog i:nth-child(2){background:linear-gradient(180deg,#f9fff9,var(--t-mint))}
.transition--catalog i:nth-child(3){background:linear-gradient(180deg,#fffdf0,var(--t-cream))}
.transition--catalog i:nth-child(4){background:linear-gradient(180deg,#f5f1ff,var(--t-lilac))}
.transition--catalog i:nth-child(5){background:linear-gradient(180deg,#fff6f2,var(--t-peach))}
.transition--catalog i:before{
  inset:0 0 auto 0;
  height:32%;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0));
}
.transition--catalog.is-running i{animation:catalog .9s var(--ease-hard) forwards;animation-delay:calc(var(--p)*28ms)}
@keyframes catalog{0%{transform:translateY(104%) rotateX(8deg)}48%{transform:translateY(0) rotateX(0)}100%{transform:translateY(-104%) rotateX(-8deg)}}

/* 05 / blueprint: colored route lines instead of a plain black grid */
.transition--blueprint i{
  left:0;
  right:0;
  height:2px;
  border-radius:999px;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg,transparent,var(--t-sky),var(--t-mint),var(--t-cream),transparent);
  box-shadow:0 0 18px rgba(75,184,239,.18);
}
.transition--blueprint em{
  width:20px;
  height:20px;
  border:1px solid rgba(16,35,49,.16);
  background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--t-cream) 19% 42%,var(--t-sky) 43% 70%,var(--t-mint) 71% 100%);
  border-radius:50%;
  opacity:0;
  box-shadow:0 10px 28px rgba(50,145,205,.16);
}
.transition--blueprint.is-running i{animation:blueLine .72s var(--ease) forwards;animation-delay:calc(var(--p)*26ms)}
.transition--blueprint.is-running em{animation:blueDot .72s var(--ease) forwards;animation-delay:.18s}
@keyframes blueLine{0%{transform:scaleX(0)}52%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
@keyframes blueDot{0%{opacity:0;transform:scale(.2)}48%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4)}}

/* 06 / closing: final ink wipe now carries a thin chromatic edge */
.transition--closing i{
  inset:0;
  background:
    linear-gradient(90deg,var(--t-sky),var(--t-mint),var(--t-cream),var(--t-peach),var(--t-lilac),var(--t-sky));
  clip-path:inset(50% 0 50% 0);
}
.transition--closing i:before{
  background:linear-gradient(180deg,rgba(16,35,49,.78),rgba(16,35,49,.84));
  mix-blend-mode:multiply;
}
.transition--closing i:after{
  inset:calc(50% - 1px) 0 auto 0;
  height:2px;
  background:rgba(255,255,255,.8);
  opacity:.72;
}
.transition--closing.is-running i{animation:closing .98s var(--ease-hard) forwards}
@keyframes closing{0%{clip-path:inset(50% 0 50% 0)}42%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(50% 0 50% 0)}}

.page.leaving-next{animation:leaveNext .7s var(--ease-hard) forwards}.page.entering-next{animation:enterNext .7s var(--ease) forwards}.page.leaving-prev{animation:leavePrev .7s var(--ease-hard) forwards}.page.entering-prev{animation:enterPrev .7s var(--ease) forwards}@keyframes leaveNext{to{opacity:0;transform:translateY(-24px) rotateX(2deg);filter:blur(4px)}}@keyframes enterNext{from{opacity:0;transform:translateY(30px) rotateX(-2deg);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}@keyframes leavePrev{to{opacity:0;transform:translateY(24px) rotateX(-2deg);filter:blur(4px)}}@keyframes enterPrev{from{opacity:0;transform:translateY(-30px) rotateX(2deg);filter:blur(6px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.page--intro.is-active .intro-card{animation-name:riseIn,cardSettle;animation-duration:.75s,2.8s;animation-timing-function:var(--ease),ease-in-out;animation-fill-mode:forwards,both;animation-delay:.42s,.9s}@keyframes cardSettle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(.2deg)}}
.page--profile.is-active .profile-photo{animation-name:riseIn,photoFloat;animation-duration:.75s,5.4s;animation-timing-function:var(--ease),ease-in-out;animation-fill-mode:forwards,both;animation-delay:0s,.65s}@keyframes photoFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(-1.2deg) translateY(-8px)}}
.page--works.is-active .work-card{animation:sampleIn .72s var(--ease) both;animation-delay:calc(var(--card,0)*70ms + 180ms)}@keyframes sampleIn{from{opacity:0;transform:translateX(38px) rotate(.6deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@media (max-width:760px){.page.leaving-next,.page.entering-next,.page.leaving-prev,.page.entering-prev{animation-duration:.52s}.transition-layer i,.transition-layer em{animation-duration:.72s!important}.page--profile.is-active .profile-photo{animation-name:riseIn}.page--intro.is-active .intro-card{animation-name:riseIn}}