/* V4.21 — Phil Pearson luxury editorial page transitions */
.page-transition{
  position:fixed;
  inset:0;
  z-index:10000;
  pointer-events:auto;
  overflow:hidden;
  isolation:isolate;
  visibility:visible;
  background:rgba(5,5,6,.34);
  -webkit-backdrop-filter:blur(16px) saturate(.88);
  backdrop-filter:blur(16px) saturate(.88);
  transition:background .7s ease,-webkit-backdrop-filter .85s ease,backdrop-filter .85s ease,visibility 0s 1.05s;
  animation:phil-transition-failsafe 0s 2.8s forwards;
}
.page-transition__panel{
  position:absolute;
  top:0;
  bottom:0;
  width:51%;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,45,149,.045),transparent 32%),
    linear-gradient(180deg,#09090a,#050506 60%,#070708);
  will-change:transform;
  transition:transform .82s cubic-bezier(.76,0,.24,1);
}
.page-transition__panel--left{left:0;border-right:1px solid rgba(255,255,255,.035)}
.page-transition__panel--right{right:0;border-left:1px solid rgba(255,45,149,.08)}
.page-transition__grain{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:.13;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  transition:opacity .55s ease;
}
.page-transition__brand{
  position:absolute;
  z-index:4;
  left:50%;
  top:50%;
  width:min(420px,68vw);
  transform:translate(-50%,-50%) scale(.965);
  opacity:1;
  filter:blur(0);
  will-change:transform,opacity,filter;
  transition:opacity .46s ease,transform .72s cubic-bezier(.2,.72,.2,1),filter .5s ease;
}
.page-transition__brand img{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 55px rgba(0,0,0,.42))}
.page-transition__line{
  position:absolute;
  z-index:5;
  left:50%;
  top:calc(50% + min(112px,18vw));
  width:min(180px,32vw);
  height:1px;
  transform:translateX(-50%) scaleX(1);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--pink,#ff2d95),transparent);
  opacity:.9;
  transition:transform .6s cubic-bezier(.76,0,.24,1),opacity .35s ease;
}
.page-transition__tag{
  position:absolute;
  z-index:5;
  left:50%;
  top:calc(50% + min(132px,21vw));
  transform:translateX(-50%);
  color:rgba(255,255,255,.44);
  font:700 .55rem/1.4 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:opacity .35s ease,transform .55s ease;
}

/* New page reveals by parting the two dark editorial panels. */
.page-transition.is-revealing{
  pointer-events:none;
  background:rgba(5,5,6,0);
  -webkit-backdrop-filter:blur(0) saturate(1);
  backdrop-filter:blur(0) saturate(1);
}
.page-transition.is-revealing .page-transition__panel--left{transform:translate3d(-102%,0,0)}
.page-transition.is-revealing .page-transition__panel--right{transform:translate3d(102%,0,0)}
.page-transition.is-revealing .page-transition__grain{opacity:0}
.page-transition.is-revealing .page-transition__brand{opacity:0;transform:translate(-50%,-50%) scale(1.025);filter:blur(5px)}
.page-transition.is-revealing .page-transition__line{transform:translateX(-50%) scaleX(.08);opacity:0}
.page-transition.is-revealing .page-transition__tag{opacity:0;transform:translate(-50%,8px)}
.page-transition.is-dormant{visibility:hidden;pointer-events:none;animation:none}

/* Link click: panels return over the current page before navigation. */
.page-transition.is-covering{
  visibility:visible!important;
  pointer-events:auto;
  animation:none;
  background:rgba(5,5,6,.34);
  -webkit-backdrop-filter:blur(16px) saturate(.88);
  backdrop-filter:blur(16px) saturate(.88);
  transition-delay:0s;
}
.page-transition.is-covering .page-transition__panel{transform:translate3d(0,0,0)}
.page-transition.is-covering .page-transition__grain{opacity:.13}
.page-transition.is-covering .page-transition__brand{opacity:1;transform:translate(-50%,-50%) scale(.965);filter:blur(0);transition-delay:.18s}
.page-transition.is-covering .page-transition__line{transform:translateX(-50%) scaleX(1);opacity:.9;transition-delay:.22s}
.page-transition.is-covering .page-transition__tag{opacity:1;transform:translateX(-50%);transition-delay:.28s}

@keyframes phil-transition-failsafe{to{visibility:hidden;pointer-events:none}}

@media(max-width:760px){
  .page-transition__brand{width:min(330px,76vw)}
  .page-transition__line{top:calc(50% + 92px);width:128px}
  .page-transition__tag{top:calc(50% + 110px);font-size:.48rem;letter-spacing:.17em}
  .page-transition__panel{transition-duration:.74s}
}

@media(prefers-reduced-motion:reduce){
  .page-transition{background:#080808;-webkit-backdrop-filter:none;backdrop-filter:none;transition:opacity .18s ease,visibility 0s .2s}
  .page-transition__panel{display:none}
  .page-transition__grain,.page-transition__line,.page-transition__tag{display:none}
  .page-transition__brand{transition:opacity .18s ease;transform:none;filter:none}
  .page-transition.is-revealing{opacity:0}
  .page-transition.is-revealing .page-transition__brand{opacity:0;transform:translate(-50%,-50%);filter:none}
  .page-transition.is-covering{opacity:1}
  .page-transition.is-covering .page-transition__brand{opacity:1;transform:translate(-50%,-50%);transition-delay:0s}
}