.ph-loader { display: none; }
.ph-loader-active { overflow: hidden; }
.ph-loader-active .ph-loader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 22% 18%, #fcf9f5, transparent 65%), #f8f4ef;
  color: #242521;
  clip-path: inset(0);
  transition: clip-path 900ms cubic-bezier(.76, 0, .24, 1);
}
.ph-loader-progress {
  font: 600 clamp(32px, 3vw, 46px)/1 'Outfit', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  transition: translate 450ms ease, opacity 300ms ease;
}
.ph-loader-skip {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  bottom: 32px;
  padding: 12px 0 12px 20px;
  border: 0;
  background: transparent;
  color: inherit;
  font: 500 13px/1.5 'Manrope', sans-serif;
  opacity: 0;
  animation: ph-loader-skip 250ms 3s forwards;
}
.ph-loader-skip span { margin-left: 16px; }
.ph-loader-skip:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 6px; }
.ph-loader-active .ph-loader.is-leaving { clip-path: inset(0 0 100%); }
.ph-loader.is-leaving .ph-loader-progress { translate: 0 -18px; opacity: 0; }
.ph-loader-active .ph-hero-copy { opacity: 0; }
.ph-loader-active.ph-hero-entering .ph-hero-copy { animation: ph-hero-arrive 1000ms 220ms both cubic-bezier(.22, 1, .36, 1); }
.ph-page-ready .ph-hero-copy { animation: none; }
@keyframes ph-loader-skip { to { opacity: .7; } }
@keyframes ph-hero-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .ph-loader-active .ph-loader { transition: opacity 120ms linear; clip-path: none; }
  .ph-loader-active .ph-loader.is-leaving { opacity: 0; }
  .ph-loader-progress { transition: none; }
  .ph-loader-active.ph-hero-entering .ph-hero-copy { animation: none; opacity: 1; }
}
