.page-transition{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(7,1fr);
  gap:8px;
  padding:12px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.09), rgba(0,0,0,.92) 62%),
    linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  pointer-events:none;
  opacity:1;
  transition:opacity .4s ease, visibility .4s ease;
  overflow:hidden;
}
.page-transition::before,
.page-transition::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.page-transition::before{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:36px 36px;
  mask-image:radial-gradient(circle at center, #000 35%, transparent 85%);
  opacity:.45;
}
.page-transition::after{
  inset:auto 0 0 0;
  height:120px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.06));
}
.page-transition.is-hidden{opacity:0;visibility:hidden}
.page-transition .tile{
  position:relative;
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.17);
  border-radius:14px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 24px rgba(255,255,255,.04),
    0 18px 40px rgba(0,0,0,.32);
  overflow:hidden;
  transform:scale(1) rotate(0deg) translateZ(0);
  opacity:1;
  filter:brightness(1);
  transition:
    transform .72s cubic-bezier(.2,.72,.18,1),
    opacity .68s ease,
    filter .68s ease,
    border-color .4s ease,
    box-shadow .4s ease;
  transition-delay:calc(var(--delay) * 16ms);
  transform-style:preserve-3d;
}
.page-transition .tile::before,
.page-transition .tile::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.page-transition .tile::before{
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(255,255,255,.1) 50%, transparent 52% 100%),
    linear-gradient(transparent 0 48%, rgba(255,255,255,.08) 50%, transparent 52% 100%),
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 58%);
  background-size:28px 28px, 28px 28px, auto;
  opacity:.55;
}
.page-transition .tile::after{
  inset:auto 10px 10px 10px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.88), transparent);
  box-shadow:0 0 16px rgba(255,255,255,.4);
}
.page-transition .tile:nth-child(4n){border-color:rgba(255,255,255,.24)}
.page-transition .tile:nth-child(5n){box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 30px rgba(255,255,255,.06), 0 18px 42px rgba(0,0,0,.34)}
.page-transition.is-revealing .tile{
  transform:scale(.12) rotate(14deg) translateY(-8px);
  opacity:0;
  filter:blur(3px) brightness(1.8);
}
.page-transition.is-covering{pointer-events:auto}
.page-transition.is-covering .tile{
  transform:scale(1) rotate(0deg);
  opacity:1;
  filter:none;
}
.page-transition .transition-core{
  position:absolute;
  top:50%; left:50%;
  translate:-50% -50%;
  width:min(420px,78vw);
  max-width:78vw;
  padding:18px 22px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  text-align:center;
  backdrop-filter:blur(16px);
  pointer-events:none;
}
.page-transition .transition-core strong{
  display:block;
  color:#fff;
  font-size:clamp(22px,4vw,34px);
  letter-spacing:-1px;
  margin-bottom:8px;
}
.page-transition .transition-core span{
  display:block;
  color:rgba(255,255,255,.78);
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
}
.page-transition .transition-core i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius:16px;
  margin-bottom:12px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  color:#fff;
  font-style:normal;
  font-weight:700;
  box-shadow:0 0 30px rgba(255,255,255,.08);
}
.page-transition.is-revealing .transition-core{
  opacity:0;
  transform:translate(-50%,-56%) scale(.92);
  transition:opacity .45s ease, transform .45s ease;
}
.page-transition.is-covering .transition-core{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
  transition:opacity .3s ease .15s, transform .4s ease .15s;
}
@media (max-width: 760px){
  .page-transition{grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(9,1fr);gap:6px;padding:8px}
  .page-transition .tile{border-radius:11px}
  .page-transition .transition-core{padding:14px 16px;border-radius:18px}
}
@media (prefers-reduced-motion: reduce){
  .page-transition{display:none!important}
}