/* the waitlist page: the door, opened, with the ending on it */

body.wl { overflow: hidden; background: #f6efe6; }
.wl-stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; display: flex; flex-direction: column; align-items: center; }
.wl-frame { position: absolute; inset: 0; clip-path: inset(22% 34% 22% 34% round 28px); will-change: clip-path; }
.wl-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform: scale(1.25); will-change: transform; transition: translate 1.2s var(--ease); }
.wl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.1) 48%, rgba(255,255,255,0) 70%, rgba(255,255,255,.5) 100%); }

.wl-content { position: relative; z-index: 2; text-align: center; padding: clamp(110px, 17vh, 170px) var(--gut) 0; }
.wl-content .label { color: var(--ink); opacity: .7; margin-bottom: 22px; }
.wl-content h1 { font-size: clamp(64px, 10.5vw, 170px); line-height: .86; letter-spacing: -.035em; }
.wl-sub { margin: 22px 0 0; font-size: clamp(15px, 1.25vw, 18px); color: var(--ink); opacity: .8; }
.wl-content .join { margin-top: 30px; max-width: 420px; display: flex !important; }
.wl-content .join .btn { height: 34px; }
.wl-content .join-msg { font-size: 13px; }

.wl-foot { position: absolute; }
.wl-foot.intro { display: grid !important; }
body.ready .wl-foot { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .wl-foot { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wl-content { padding-top: 110px; }
  .wl-content h1 { font-size: clamp(60px, 19vw, 100px); }
  .wl-content .join { max-width: 100%; }
  .wl-foot .foot-legal { font-size: 10px; }
  .nav .icon-btn { display: none; }
}