/*!
 * Waitlist for Squarespace 7.1 — v1.0.0
 * Forma-style square-to-panel waitlist signup. Submits through a native
 * Newsletter Block. Repo: github.com/zsawtelle-lgtm/sqsp-waitlist
 */
/* ==========================================================
   Scope: everything lives under .wl
   1. Tokens
   2. Host section (Squarespace)
   3. Lockup (side text)
   4. Card + square
   5. Prompt copy + CTA
   6. Panel (open state)
   7. Field / submit / check
   8. Success, back, share, toast
   9. Keyframes
   10. Mobile + reduced motion
   ========================================================== */

/* 1. Tokens */
.wl {
  --wl-size: min(360px, calc(100vw - 48px));
  --wl-margin: 24px;
  --wl-text: #ffffff;
  --wl-muted: rgba(255, 255, 255, .62);
  --wl-line: rgba(255, 255, 255, .25);
  --wl-tint: rgba(18, 18, 22, .28);
  --wl-field: #f2f2f7;
  --wl-ink: #000000;
  --wl-error: #ff8a80;
  --wl-blur: 25px;
  /* Section heights are set on the section (.wl-host) so they inherit:
     --wl-height (hero, default 100svh) · --wl-inline-height (inline, default 100svh) */
  --wl-out: cubic-bezier(.16, 1, .3, 1);
  --wl-card: cubic-bezier(.22, .94, .28, 1);
  --wl-spring: cubic-bezier(.34, 1.56, .64, 1);

  position: relative;
  isolation: isolate;
  min-height: var(--wl-height, 100svh);
  overflow: hidden;
  color: var(--wl-text);
}
.wl *, .wl *::before, .wl *::after { box-sizing: border-box; }
.wl button { font: inherit; }

/* 2. Host section (Squarespace) — JS adds .wl-host to the section */
.wl-host { position: relative; min-height: var(--wl-height, 100svh); }
.wl-host--inline { min-height: max(560px, var(--wl-inline-height, 100svh)); }
.wl-host > .wl { position: absolute; inset: 0; z-index: 2; min-height: 0; }
.wl-host .sqs-block-newsletter.wl-source {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important;
  pointer-events: none !important;
}

/* 2b. Site header + mobile menu hide while the panel is open (body classes set by JS) */
body.wl-hide-header #header,
body.wl-hide-header .header-menu {
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  transition: opacity .25s ease, visibility 0s linear .25s !important;
}
body.wl-header-return #header {
  transition: opacity .5s ease, visibility 0s !important;
}

/* 2c. Page scroll lock while the panel is open */
html.wl-lock, html.wl-lock body { overflow: hidden !important; }
html.wl-lock body { padding-right: var(--wl-scrollbar, 0px); }

/* 2d. intro: false — skip the load sequence, show the resting state */
.wl.wl--static .wl__left, .wl.wl--static .wl__right, .wl.wl--static .wl__prefix,
.wl.wl--static .wl__pill, .wl.wl--static .wl__rot, .wl.wl--static .wl__square,
.wl.wl--static .wl__square::after, .wl.wl--static .wl__word, .wl.wl--static .wl-cta {
  animation-duration: .01s !important; animation-delay: 0s !important;
}

/* 3. Lockup — text rides beside the 12px square, then pushes to the edges */
.wl__lockup { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* Intro waits for .is-ready (fonts loaded + section in view), so it plays when seen */
.wl:not(.is-ready) *, .wl:not(.is-ready) *::before, .wl:not(.is-ready) *::after { animation-play-state: paused !important; }

.wl__left, .wl__right {
  position: absolute; top: 50%; line-height: 1; white-space: nowrap; opacity: 0;
}
.wl__right { display: flex; align-items: baseline; column-gap: .25em; }
/* "Welcome to" hangs off the left of the brand so the brand alone hugs the square */
.wl__prefix {
  position: absolute; top: 0; right: calc(100% + .25em); white-space: nowrap; pointer-events: none;
  animation: wlFadeOut 1.2s var(--wl-out) 1.5s forwards;
}
.wl__left > .wl__pill {
  position: absolute; top: 50%; left: calc(100% + 8px); transform: translateY(-50%);
  opacity: 0; animation: wlFade .4s linear 2.7s forwards;
}
/* Rotating last word: width set by the longest word, value slides up */
.wl__rot {
  position: relative; display: inline-grid; overflow: hidden; vertical-align: baseline;
  padding-bottom: .25em; margin-bottom: -.25em; opacity: 0;
  animation: wlFade 1.2s var(--wl-out) 1.5s forwards;
}
.wl__rot-size { grid-area: 1 / 1; visibility: hidden; white-space: nowrap; }
.wl__rot-val { position: absolute; left: 0; top: 0; white-space: nowrap; }
.wl__left {
  left: calc(50% - 18px);
  transform: translate(-100%, -50%);
  animation: wlRevealL .75s var(--wl-out) forwards, wlLeftOut 1.2s var(--wl-out) 1.5s forwards;
}
.wl__right {
  right: calc(50% - 18px);
  transform: translate(100%, -50%);
  animation: wlRevealR .75s var(--wl-out) forwards, wlRightOut 1.2s var(--wl-out) 1.5s forwards;
}
.wl__pill {
  border: 1px solid var(--wl-line); border-radius: 8px; padding: 2px 6px;
  font-size: .8em; color: var(--wl-muted);
}

/* 4. Card + square — the card is the box that grows to full section */
.wl__card {
  position: absolute; inset: 0; margin: auto; z-index: 1;
  width: var(--wl-size); height: var(--wl-size);
  transition: width 1s var(--wl-card) .15s, height 1s var(--wl-card) .15s, z-index 0s linear 1.15s;
}
.wl.is-open .wl__card {
  z-index: 4; width: 100%; height: 100%;
  transition: width 1s var(--wl-card) .2s, height 1s var(--wl-card) .2s, z-index 0s;
}
.wl__square {
  position: absolute; inset: 0; margin: auto;
  width: 12px; height: 12px; background: #fff; overflow: clip;
  -webkit-backdrop-filter: blur(var(--wl-blur)); backdrop-filter: blur(var(--wl-blur));
  transform: scale(0);
  animation: wlSqReveal .75s var(--wl-out) forwards, wlSqGrow 1.2s var(--wl-out) 1.5s forwards;
}
.wl__square::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: var(--wl-tint);
  animation: wlFade 1.2s var(--wl-out) 1.5s forwards;
}

/* 5. Prompt copy + CTA */
.wl__copy {
  position: absolute; top: 20px; left: 20px; right: 20px; margin: 0;
  display: flex; flex-wrap: wrap; column-gap: .25em; color: var(--wl-muted); line-height: 1.4;
  transition: opacity .25s 1s, visibility 0s linear 1s;
}
.wl__word { opacity: 0; animation: wlWord .7s var(--wl-out) forwards calc(2.45s + var(--i) * 35ms); }
.wl.is-open .wl__copy { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s linear .2s; }

.wl__cta-wrap {
  position: absolute; inset: 0;
  transition: opacity .75s var(--wl-spring) 1.1s, transform .75s var(--wl-spring) 1.1s;
}
.wl.is-open .wl__cta-wrap {
  opacity: 0; pointer-events: none; transform: translateY(25px);
  transition: opacity .2s, transform 0s linear .2s;
}
.wl-cta {
  position: absolute; left: 20px; right: 20px; bottom: 20px; height: 60px;
  display: flex; align-items: center; justify-content: center; isolation: isolate;
  border: 1px solid var(--wl-line); border-radius: 100px; background: transparent;
  color: var(--wl-text); font-weight: 500; cursor: pointer;
  transition: background-color .2s, color .2s;
  animation: wlRiseIn .75s var(--wl-spring) 2.95s both;
}
.wl-cta::before {
  content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: 101px; pointer-events: none;
  background: conic-gradient(from var(--wl-laser), transparent 0deg, transparent 78%, rgba(255,255,255,.35) 88%, #fff 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: wlLaser 5s linear infinite;
}
@media (hover: hover) { .wl-cta:hover { background: var(--wl-text); color: var(--wl-ink); } }
.wl-cta:focus-visible { outline: 2px solid var(--wl-text); outline-offset: 3px; }

/* 6. Panel (open state) */
.wl__panel {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  visibility: hidden; transition: visibility 0s linear .2s;
}
.wl.is-open .wl__panel { visibility: visible; transition: visibility 0s; }
.wl__content { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.wl__message { position: relative; width: 100%; min-height: 3.2em; display: grid; align-items: end; text-align: center; }
.wl__heading {
  margin: 0; font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; line-height: 1.2;
  opacity: 0; transform: translateY(25px); transition: opacity .15s, transform .15s;
}
.wl.is-open .wl__heading {
  opacity: 1; transform: none;
  transition: opacity .75s var(--wl-spring) .9s, transform .75s var(--wl-spring) .9s;
}
.wl.is-open.is-submitted .wl__heading { opacity: 0; transform: translateY(25px); transition: opacity .15s, transform .15s; }

.wl__close, .wl__back {
  /* --wl-safe-top = how far the site header overlaps the section (set by JS on open) */
  position: absolute; top: calc(var(--wl-safe-top, 0px) + var(--wl-margin) - 4px); width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--wl-text); cursor: pointer;
  opacity: 0; visibility: hidden; transition: background-color .2s, opacity .15s, visibility 0s linear .15s;
}
.wl__close { right: calc(var(--wl-margin) - 4px); }
.wl__back { left: calc(var(--wl-margin) - 8px); }
.wl.is-open .wl__close { opacity: 1; visibility: visible; transition: background-color .2s, opacity .75s var(--wl-spring) .8s; }
.wl.is-open.is-submitted .wl__back { opacity: 1; visibility: visible; transition: background-color .2s, opacity .15s .7s; }
@media (hover: hover) { .wl__close:hover, .wl__back:hover { background: rgba(255,255,255,.08); } }
.wl__close:focus-visible, .wl__back:focus-visible, .wl__share:focus-visible { outline: 2px solid var(--wl-text); outline-offset: 2px; }

/* 7. Field / submit / check — pill collapses into the check circle */
.wl__stage { position: relative; width: 390px; max-width: calc(100vw - var(--wl-margin) * 2); display: grid; }
.wl__field {
  grid-area: 1 / 1; justify-self: center; position: relative;
  display: flex; align-items: center; width: 100%; height: 60px; margin: 0;
  padding: 4px 4px 4px 22px; border-radius: 120px; background: var(--wl-field);
  opacity: 0; transform: translateY(25px);
  transition: opacity .15s, transform .15s,
    width .8s var(--wl-out) .1s, height .8s var(--wl-out) .1s, padding .8s var(--wl-out) .1s, background-color .8s .1s;
}
.wl.is-open .wl__field {
  opacity: 1; transform: none;
  transition: opacity .75s var(--wl-spring) .8s, transform .75s var(--wl-spring) .8s,
    width .8s var(--wl-out) .15s, height .8s var(--wl-out) .15s, padding .8s var(--wl-out) .15s, background-color .8s .15s;
}
.wl.is-submitted .wl__field { width: 52px; height: 52px; padding: 0; background: #fff; }

.wl__input {
  flex: 1; min-width: 0; padding: 0; border: 0; outline: none; background: transparent;
  color: var(--wl-ink); caret-color: var(--wl-ink); font: inherit; font-size: 16px; line-height: 1.4;
  transition: color .2s, opacity .2s .6s;
}
.wl__input::placeholder { color: rgba(0, 0, 0, .5); }
.wl__input.is-error { color: #c62828; }
.wl.is-submitted .wl__input { opacity: 0; visibility: hidden; transition: opacity .15s, visibility 0s linear .15s; }

.wl__submit {
  flex-shrink: 0; display: grid; place-items: center; width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 100px; background: var(--wl-ink); color: #fff; cursor: pointer;
  opacity: 0; visibility: hidden; transform: scale(.75);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.wl.has-value:not(.is-submitted) .wl__submit { opacity: 1; visibility: visible; transform: scale(1); transition: opacity .2s, transform .2s; }
.wl__submit > * { grid-area: 1 / 1; transition: opacity .2s; display: flex; }
.wl__spin { opacity: 0; }
.wl.is-busy .wl__submit .wl__arrow { opacity: 0; }
.wl.is-busy .wl__spin { opacity: 1; animation: wlSpin .8s linear infinite; }

.wl__check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--wl-ink); opacity: 0; visibility: hidden; transform: scale(.6);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.wl.is-submitted .wl__check {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .2s .7s, transform .5s var(--wl-spring) .7s;
}

.wl__error {
  position: absolute; top: calc(100% + 12px); left: 22px; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--wl-error); opacity: 0; visibility: hidden;
  transition: opacity .2s, visibility 0s linear .2s;
}
.wl__error.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* 8. Success, share, toast */
.wl__success {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(25px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.wl.is-submitted .wl__success {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .75s var(--wl-spring) .75s, transform .75s var(--wl-spring) .75s;
}
.wl__success-title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; }
.wl__success-body { color: var(--wl-muted); overflow-wrap: anywhere; }

.wl__share {
  position: absolute; top: calc(100% + 28px); left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px;
  border: 0; background: transparent; color: var(--wl-muted); cursor: pointer; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: color .2s, opacity .15s, transform .15s, visibility 0s linear .15s;
}
.wl.is-submitted .wl__share {
  opacity: 1; visibility: visible; transform: none;
  transition: color .2s, opacity .75s 1.25s, transform .75s var(--wl-spring) 1.25s;
}
/* Zac standard arrow hover: 5px translate + color change */
.wl__share svg { transition: transform .25s var(--wl-out); }
@media (hover: hover) {
  .wl__share:hover { color: var(--wl-text); }
  .wl__share:hover svg { transform: translateX(5px); }
}
.wl__share:focus-visible { color: var(--wl-text); }
.wl__share:focus-visible svg { transform: translateX(5px); }

.wl__toast {
  position: absolute; left: 50%; bottom: calc(var(--wl-margin) + 24px); z-index: 6; translate: -50% 0;
  padding: 12px 16px; border-radius: 8px; background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); font-size: 14px;
  opacity: 0; visibility: hidden; transform: translateY(25px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.wl__toast.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .25s var(--wl-out); }

.wl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 9. Keyframes */
@property --wl-laser { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes wlLaser { to { --wl-laser: 360deg; } }
@keyframes wlFade { to { opacity: 1; } }
@keyframes wlFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes wlRiseIn { from { opacity: 0; visibility: hidden; transform: translateY(25px); } to { opacity: 1; visibility: visible; transform: none; } }
@keyframes wlWord { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes wlSpin { to { transform: rotate(360deg); } }
@keyframes wlSqReveal { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes wlSqGrow {
  from { width: 12px; height: 12px; background: #fff; }
  to { width: 100%; height: 100%; background: rgba(255,255,255,0); }
}
@keyframes wlRevealL { from { opacity: 0; transform: translate(calc(-100% - 25px), -50%); } to { opacity: 1; transform: translate(-100%, -50%); } }
@keyframes wlRevealR { from { opacity: 0; transform: translate(calc(100% + 25px), -50%); } to { opacity: 1; transform: translate(100%, -50%); } }
@keyframes wlLeftOut {
  from { opacity: 1; left: calc(50% - 18px); transform: translate(-100%, -50%); }
  to { opacity: 1; left: var(--wl-margin); transform: translate(0, -50%); }
}
@keyframes wlRightOut {
  from { opacity: 1; right: calc(50% - 18px); transform: translate(100%, -50%); }
  to { opacity: 1; right: var(--wl-margin); transform: translate(0, -50%); }
}

/* 10. Mobile: side text stacks above the card. Reduced motion: final states. */
@media (max-width: 1019px) {
  .wl { --wl-margin: 16px; }
  .wl__left, .wl__right {
    left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
    opacity: 0; animation: wlStackIn .75s var(--wl-spring) 1.75s forwards;
  }
  .wl__left { top: calc(50% - var(--wl-size) / 2 - 84px); display: inline-flex; align-items: center; gap: 8px; }
  .wl__prefix { display: none; }
  .wl__left > .wl__pill { position: static; transform: none; opacity: 1; animation: none; }
  .wl__right { top: calc(50% - var(--wl-size) / 2 - 48px); color: var(--wl-muted); }
  @keyframes wlStackIn { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  .wl *, .wl *::before, .wl *::after { animation-duration: .01s !important; animation-delay: 0s !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}