/* =============================================================================
   project-popup.css — centered rounded-card "Start a Project" form
   -----------------------------------------------------------------------------
   Animation contract (driven by assets/project-popup.js):
     • Open:         panel flies in from the LEFT and lands centered.
     • Cancel close: panel flies BACK to the left, off-screen.
     • Submit:       success state shows, holds for 3 s, then panel flies
                     OUT to the RIGHT, off-screen.

   The site uses GSAP for the actual motion when available (lazy-loaded the
   first time the popup opens). The CSS rules below are a fully-functional
   fallback so the popup still works without GSAP — useful for offline page
   loads, CSP-blocked CDNs, or older browsers that fail to fetch the script.
   When GSAP is loaded, it sets inline `transform`/`opacity` which override
   these CSS state-driven values.

   Selector contract (mirrors project-popup.js):
     .project-popup
       data-state = "closed" | "opening" | "open"
                                | "submitting"
                                | "exiting" | "submitted"
       .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="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 .35s 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="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: var(--r-lg, 22px);   /* rounded rectangle, all four corners */
  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;

  /* CSS fallback: parked off-screen to the left, fading. GSAP overrides
     these via inline `transform`/`opacity` once it loads. */
  transform: translate3d(-110vw, 0, 0);
  opacity: 0;
  transition:
    transform .7s cubic-bezier(.2, .85, .2, 1),
    opacity   .45s ease-out;
  will-change: transform, opacity;    /* hint the GPU layer */
}

/* 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;
}

/* The "exiting" phase slides RIGHT off-screen. Used after a successful
   submission (held for 3 s by the JS, then triggered). */
.project-popup[data-state="exiting"]    .project-popup__panel {
  transform: translate3d(110vw, 0, 0);
  opacity: 0;
  transition:
    transform .7s cubic-bezier(.4, 0, .2, 1),
    opacity   .55s ease-in;
}

@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: 18px; }
}

/* 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.01em;
}
.project-popup__title span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.project-popup__close {
  width: 38px; height: 38px;
  border-radius: 999px;             /* rounded — matches design system */
  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; }
/* Chip touch target — bumped from 30px to 36px so phone taps don't
 * miss. Still smaller than the global 38px chip since the popup form
 * has tighter overall rhythm. */
.project-popup__form .chip { font-size: 10px; padding: 7px 12px; min-height: 36px; }

/* 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.12em;
  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__success { display: flex; }

.project-popup__success__icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  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.02em;
  color: var(--fg-0);
}
.project-popup__success p { color: var(--fg-1); line-height: 1.5; max-width: 44ch; }

/* -- 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; }