/* Entrance screens only. The homepage uses its original stylesheet. */
html.pd-entry-pending { background: #000 !important; }
html.pd-entry-pending body { visibility: hidden; }
html.pd-entry-locked { overflow: hidden !important; overscroll-behavior: none; }

#pdEntryGate {
  position: fixed !important; inset: 0 !important;
  width: 100% !important; max-width: none !important;
  height: 100vh !important; height: 100dvh !important; max-height: none !important;
  min-width: 0 !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important;
  overflow: hidden !important; overscroll-behavior: contain;
  background: #000 !important; color: #fff !important; visibility: visible;
  font-family: Arial, Helvetica, sans-serif; isolation: isolate;
}
#pdEntryGate:not([open]) { display: none !important; }
#pdEntryGate[open] { display: block !important; }
#pdEntryGate::backdrop { background: transparent; }
#pdEntryGate [hidden] { display: none !important; }
#pdEntryGate .pd-entry-intro,
#pdEntryGate .pd-entry-scene { position: absolute; inset: 0; margin: 0; padding: 0; background: #000; }
#pdEntryGate .pd-entry-intro { z-index: 2; display: grid; place-items: center; }
#pdEntryGate .pd-entry-hashtag {
  margin: 0; padding: 0; border: 0; color: #fff;
  font: 900 clamp(38px,11.7vw,300px)/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.065em; white-space: nowrap; transform: none;
}
#pdEntryGate .pd-entry-photo {
  position: absolute; top: 50%; left: 50%; display: block;
  width: auto; height: min(100%,116vw); max-width: none; max-height: none;
  aspect-ratio: 1672/941; object-fit: contain; transform: translate(-50%,-50%);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
#pdEntryGate .pd-entry-center {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 24px;
  padding: 24px 16px; pointer-events: none;
}
#pdEntryGate .pd-entry-center > * { pointer-events: auto; }
#pdEntryGate .pd-entry-control {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: #fff; font: 600 28px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.04em; text-decoration: none; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms var(--pd130-ease-out,cubic-bezier(.23,1,.32,1));
}
#pdEntryGate .pd-entry-skip {
  position: absolute; right: max(18px,env(safe-area-inset-right));
  bottom: max(14px,env(safe-area-inset-bottom));
  font-size: 10px; font-weight: 500; letter-spacing: .04em;
}
#pdEntryGate .pd-entry-control:active { opacity: .65; }
#pdEntryGate button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
#pdEntryGate #pdEntryEnter {
  border: 0; outline: none; background: transparent; box-shadow: none;
}
#pdEntryGate #pdEntryEnter:focus-visible {
  text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px;
}

/* The interactive 3D wordmark belongs to the Enter screen only. */
#pdEntryGate .pd-entry-wordmark {
  position: relative; display: block; width: max-content; max-width: none;
  min-width: 0; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  color: #fff; font: inherit; letter-spacing: inherit; text-align: center;
  text-transform: none; white-space: nowrap; overflow: visible;
  perspective: 14em; cursor: grab; touch-action: pan-y pinch-zoom;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: none; opacity: 1; transform: none;
}
#pdEntryGate .pd-entry-wordmark {
  /* Match the homepage wordmark and leave room for its rotating edges on phones. */
  font: 800 var(--pd-display-wordmark-size)/1 Arial, Helvetica, sans-serif;
  letter-spacing: -.065em;
}
#pdEntryGate .pd-entry-measure { display: block; font: inherit; letter-spacing: inherit; opacity: 0; pointer-events: none; }
#pdEntryGate .pd-entry-rotor {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transform-origin: 50% 50%; pointer-events: none;
}
#pdEntryGate .pd-entry-layer {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; font: inherit; letter-spacing: inherit; color: inherit;
  white-space: nowrap; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  pointer-events: none;
}
#pdEntryGate .pd-entry-wordmark:active { cursor: grabbing; }
@media (hover:hover) and (pointer:fine) {
  #pdEntryGate .pd-entry-control:hover { opacity: .75; }
}
@media (max-width:760px) {
  #pdEntryGate .pd-entry-center { gap: 22px; }
  #pdEntryGate .pd-entry-control:not(.pd-entry-skip) { font-size: 24px; }
}
@media (prefers-reduced-motion:reduce) {
  #pdEntryGate .pd-entry-control { transition: opacity 0ms; }
}