/* =============================================================================
   project-popup.css — accessible "Start a Project" dialog
   -----------------------------------------------------------------------------
   Animation contract (driven by assets/project-popup.js):
     • Open:         panel settles in from the left.
     • Cancel close: panel returns toward its entry edge.
     • Submit:       success state holds for 3 s, then exits right.

   Selector contract (mirrors project-popup.js):
     .project-popup
       data-state = "closed" | "opening" | "open"
                                | "submitting" | "submitted"
                                | "closing" | "exiting"
       .project-popup__backdrop
       .project-popup__panel       (the centered rounded card)
         .project-popup__head
         .project-popup__body
           .project-popup__form
         .project-popup__success   (shown when data-state="submitted")
   ========================================================================== */

.project-popup {
  position: fixed;
  inset: 0;
  z-index: 250;            /* above booking modal (200), below toast */
  /* Flex centerer — replaces the old full-height side-panel layout. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  pointer-events: none;
}

/* Visible across every "live" state. The "closed" state stays display:none
   so the panel and backdrop are fully out of the document flow. */
.project-popup[data-state="opening"],
.project-popup[data-state="open"],
.project-popup[data-state="submitting"],
.project-popup[data-state="closing"],
.project-popup[data-state="exiting"],
.project-popup[data-state="submitted"] {
  display: flex;
}

/* -- Backdrop (full-screen dim) -------------------------------------------- */
.project-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 280ms var(--ease-out, cubic-bezier(.2,.7,.2,1));
  pointer-events: auto;
}
.project-popup[data-state="open"]       .project-popup__backdrop,
.project-popup[data-state="submitting"] .project-popup__backdrop,
.project-popup[data-state="submitted"]  .project-popup__backdrop { opacity: 1; }
.project-popup[data-state="closing"]    .project-popup__backdrop,
.project-popup[data-state="exiting"]    .project-popup__backdrop { opacity: 0; }

/* -- Panel: centered rounded card ----------------------------------------- */
.project-popup__panel {
  position: relative;
  width: min(560px, 100%);
  /* Auto-height up to a comfortable max — taller forms scroll INSIDE the
     panel rather than expanding past the viewport. */
  /* vh fallback first, dvh upgrade further down via @supports.
   * Without this, iOS Safari < 15.4 collapses the panel to 0. */
  max-height: calc(100vh - clamp(24px, 6vw, 64px));
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;                   /* clip rounded corners */
  pointer-events: auto;

  transform: translate3d(-32px, 0, 0);
  opacity: 0;
  transition:
    transform 280ms cubic-bezier(.2, .85, .2, 1),
    opacity 220ms ease-out;
  will-change: transform, opacity;
}

/* In a "live" state, the panel is centered (flexbox) at translateX(0). */
.project-popup[data-state="open"]       .project-popup__panel,
.project-popup[data-state="submitting"] .project-popup__panel,
.project-popup[data-state="submitted"]  .project-popup__panel {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/* Closing and successful submission leave in opposite directions. */
.project-popup[data-state="closing"]    .project-popup__panel {
  transform: translate3d(-32px, 0, 0);
  opacity: 0;
}
.project-popup[data-state="exiting"]    .project-popup__panel {
  transform: translate3d(32px, 0, 0);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .project-popup__panel,
  .project-popup__backdrop { transition-duration: 0.001s; }
}

/* Mobile — give the panel breathing room from the screen edges. */
@media (max-width: 640px) {
  .project-popup        { padding: 12px; }
  .project-popup__panel { max-height: calc(100vh - 24px); border-radius: 8px; }
}

/* dvh upgrade — modern browsers exclude iOS Safari URL bar. */
@supports (height: 100dvh) {
  .project-popup__panel { max-height: calc(100dvh - clamp(24px, 6vw, 64px)); }
  @media (max-width: 640px) {
    .project-popup__panel { max-height: calc(100dvh - 24px); }
  }
}

/* -- Header (title + close) ----------------------------------------------- */
.project-popup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--bg-1) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  flex: none;
}
.project-popup__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.project-popup__title strong {
  font-size: 18px;
  color: var(--fg-0);
  font-weight: 500;
  letter-spacing: 0;
}
.project-popup__title span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-2);
}
.project-popup__close {
  width: 44px; height: 44px;
  border-radius: 4px;
  display: grid; place-items: center;
  color: var(--fg-1);
  border: 1px solid var(--line);
  background: transparent;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
  flex: none;
}
.project-popup__close:hover { color: var(--fg-0); background: var(--line); border-color: var(--line-strong); }
.project-popup__close:active { transform: scale(.94); }
.project-popup__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.project-popup__close svg { width: 14px; height: 14px; }

/* -- Body (scrollable area for the form) ---------------------------------- */
.project-popup__body {
  padding: 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
}
.project-popup__lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg-1);
  margin-bottom: 24px;
  max-width: 48ch;
}
.project-popup__form { display: grid; gap: 18px; }
.project-popup__form .field { gap: 8px; }
.project-popup__form .chips { gap: 6px; }
.project-popup__form .chip { font-size: 11px; padding: 9px 12px; min-height: 44px; }

/* Action row */
.project-popup__actions {
  display: flex;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.project-popup__actions__hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-left: auto;
}

/* -- Success state — replaces the form --------------------------------- */
.project-popup__success {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px;
  text-align: left;
}
.project-popup[data-state="submitted"] .project-popup__form    { display: none; }
.project-popup[data-state="submitted"] .project-popup__lead    { display: none; }
.project-popup[data-state="submitted"] .project-popup__body    { display: none; }
.project-popup[data-state="submitted"] .project-popup__success { display: flex; }

.project-popup__success__icon {
  width: 52px; height: 52px;
  border-radius: 8px;
  background: color-mix(in oklab, #34d399 20%, transparent);
  border: 1px solid #34d399;
  color: #34d399;
  display: grid; place-items: center;
}
.project-popup__success__icon svg { width: 24px; height: 24px; }
.project-popup__success h3 {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-0);
}
.project-popup__success p { color: var(--fg-1); line-height: 1.5; max-width: 44ch; }

.project-popup-toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 320;
  max-width: min(420px, calc(100vw - 32px));
  transform: translate3d(-50%, 16px, 0);
  opacity: 0;
  padding: 13px 16px;
  border-radius: 8px;
  border: 1px solid color-mix(in oklab, #34d399 52%, var(--line));
  background: color-mix(in oklab, var(--bg-1) 92%, #34d399 8%);
  color: var(--fg-0);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}
.project-popup-toast[data-state="visible"] {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}
.project-popup-toast[data-state="hiding"] {
  opacity: 0;
  transform: translate3d(-50%, 10px, 0);
}

/* -- Nav-CTA hint caret (subtle slide-in indicator) ------------------------ */
.nav-cta[data-popup-trigger]::after {
  content: '';
  display: inline-block;
  width: 0; height: 0;
  margin-left: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  opacity: 0;
  transition: opacity .2s, margin-left .2s;
}
.nav-cta[data-popup-trigger]:hover::after { opacity: 0.6; margin-left: 6px; }

@media (max-width: 640px) {
  .project-popup__head,
  .project-popup__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .project-popup__close,
  .project-popup__form .chip,
  .project-popup__actions .btn {
    min-height: 48px;
  }

  .project-popup__actions .btn {
    flex: 1 1 calc(50% - 6px);
  }

  .project-popup__actions__hint {
    width: 100%;
    margin-left: 0;
  }
}