/* ==========================================================================
   Page transition: black curtain + TO JE TO logo animating at the side.
   Logo piece geometry matches css/intro.css (official logo 895×252).
   ========================================================================== */
.pt {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  pointer-events: none;
}
.pt__panel {
  position: absolute;
  inset: 0;
  background: #030303;
  transform: scaleX(0);
  transform-origin: 100% 50%;
}
.pt__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  background-size: 220px;
  opacity: 0.08;
}
.pt__glow {
  position: absolute;
  left: 0;
  top: 50%;
  width: 70vmin;
  height: 70vmin;
  transform: translate(-30%, -50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.07), transparent 72%);
  opacity: 0;
}
.pt__side {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  width: clamp(170px, 21vw, 310px);
  transform: translateY(-50%);
}

.pt-logo { position: relative; width: 100%; aspect-ratio: 895 / 252; }
.pt-logo__p,
.pt-logo__sweep { position: absolute; inset: 0; display: block; }
.pt-logo__p img,
.pt-logo__sweep img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; }

.pt-logo__p--w1 { clip-path: inset(0 66.2% 28.2% 0); }
.pt-logo__p--w2 { clip-path: inset(0 34.1% 28.2% 33.8%); }
.pt-logo__p--w3 { clip-path: inset(0 0 28.2% 65.9%); }
.pt-logo__p--studio { clip-path: inset(71.8% 19.4% 0 20.4%); }
.pt-logo__p--line-l { clip-path: inset(71.8% 79.6% 0 20.4%); }
.pt-logo__p--line-r { clip-path: inset(71.8% 19.4% 0 80.6%); }

.pt-logo__p img { opacity: 0; transform: translateY(80%); filter: blur(8px); }
.pt-logo__p--line-l img,
.pt-logo__p--line-r img { opacity: 1; transform: none; filter: none; }

.pt-logo__sweep { clip-path: inset(0 0 28.2% 0); opacity: 0; }
.pt-logo__sweep img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  mask-image: linear-gradient(100deg, transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}

.pt__label {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(10px);
}
.pt__label [data-pt-num] { color: var(--text-3); }
.pt__label [data-pt-name] {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text);
}
.pt__bar { position: relative; height: 1px; margin-top: 1.1rem; overflow: hidden; background: var(--line-2); }
.pt__bar i { position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: left; }

/* --- leaving the page ---------------------------------------------------- */
.pt-leaving .pt { visibility: visible; pointer-events: auto; }
.pt-leaving .pt__panel { transform: scaleX(1); transition: transform 0.65s var(--ease-io); }
.pt-leaving .pt__glow { opacity: 1; transition: opacity 1s var(--ease) 0.3s; }
.pt-leaving .pt-logo__p--w1 img { animation: ptWord 0.7s var(--ease) 0.3s both; }
.pt-leaving .pt-logo__p--w2 img { animation: ptWord 0.7s var(--ease) 0.37s both; }
.pt-leaving .pt-logo__p--w3 img { animation: ptWord 0.7s var(--ease) 0.44s both; }
.pt-leaving .pt-logo__p--studio img { animation: ptStudio 0.6s var(--ease) 0.55s both; }
.pt-leaving .pt-logo__p--line-l { animation: ptLineL 0.6s var(--ease) 0.55s both; }
.pt-leaving .pt-logo__p--line-r { animation: ptLineR 0.6s var(--ease) 0.55s both; }
.pt-leaving .pt-logo__sweep { animation: ptSweepShow 0.55s linear 0.45s both; }
.pt-leaving .pt-logo__sweep img { animation: ptSweepMove 0.55s var(--ease-io) 0.45s both; }
.pt-leaving .pt__label { opacity: 1; transform: none; transition: opacity 0.5s var(--ease) 0.45s, transform 0.6s var(--ease) 0.45s; }
.pt-leaving .pt__bar i { transform: scaleX(1); transition: transform 0.95s var(--ease-io); }

/* --- arriving: covered, logo in its final state ---------------------------- */
.pt-entering .pt {
  visibility: visible;
  /* failsafe: never stay covered if scripts do not run */
  animation: ptFailsafe 0s linear 4s forwards;
}
.pt-entering .pt__panel { transform: scaleX(1); transform-origin: 0 50%; }
.pt-entering .pt__glow { opacity: 1; }
.pt-entering .pt-logo__p img { opacity: 1; transform: none; filter: none; }
.pt-entering .pt-logo__p--line-l { clip-path: inset(71.8% 79.6% 0 0); }
.pt-entering .pt-logo__p--line-r { clip-path: inset(71.8% 0 0 80.6%); }
.pt-entering .pt__label { opacity: 1; transform: none; }
.pt-entering .pt__bar i { transform: scaleX(1); }

.pt-revealing .pt-logo,
.pt-revealing .pt__label,
.pt-revealing .pt__bar,
.pt-revealing .pt__glow {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.pt-revealing .pt__panel { transform: scaleX(0); transition: transform 0.8s var(--ease-io) 0.2s; }

/* after a page transition the header and page title should not wait again */
.pt-arrived .nav__inner { transition-delay: 0s; transition-duration: 0.6s; }
.pt-arrived [data-split] .split-w > span { transition-delay: calc(var(--i, 0) * 0.035s); }

/* the header logo answers with a short sweep once the new page is visible */
.pt-arrived .nav__logo img { animation: navLogoIn 1.1s var(--ease) both; }

@keyframes ptWord {
  from { opacity: 0; transform: translateY(80%); filter: blur(8px); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes ptStudio { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ptLineL { from { clip-path: inset(71.8% 79.6% 0 20.4%); } to { clip-path: inset(71.8% 79.6% 0 0); } }
@keyframes ptLineR { from { clip-path: inset(71.8% 19.4% 0 80.6%); } to { clip-path: inset(71.8% 0 0 80.6%); } }
@keyframes ptSweepShow { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ptSweepMove {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes ptFailsafe { to { visibility: hidden; } }
@keyframes navLogoIn {
  from { clip-path: inset(0 100% 0 0); filter: blur(4px); }
  to { clip-path: inset(0 0 0 0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pt-leaving .pt__panel,
  .pt-revealing .pt__panel { transition-duration: 0.01s !important; }
  .pt-leaving .pt-logo__p img,
  .pt-leaving .pt-logo__sweep,
  .pt-leaving .pt-logo__sweep img,
  .pt-arrived .nav__logo img { animation: none !important; }
}