/* ==========================================================================
   css/site-drawer.css — SHARED (homepage.html, index.html): the contact form
   drawer. Moved out of css/homepage.css on 5 Oct 2026 so the developers page
   opens the same window. Self-contained: literal colours, its own button.
   js/site-drawer.js
   ========================================================================== */
/* ==========================================================================
   THE FORM DRAWER (her call, 5 Oct: "a window on the left, as
   wondermakers.digital") — their mechanics, her language:
   the page dims under a light blur (0.3 s); a panel slides in from the LEFT
   (half the window, inset 12, radius 50 like the purple panel; 1 s,
   cubic-bezier(.165,.84,.44,1)); inside it the words come up one after the
   other. Light panel (#F7F7F7) and ink, her purple for the accents: the
   Lia word in the title, the line that draws under a field in focus, the
   send button. The labels sit IN the fields and rise as you type.
   js/homepage-drawer.js
   ========================================================================== */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 600;
  visibility: hidden;
  pointer-events: none;
  --du: var(--u, 1px);
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__veil {
  position: absolute;
  inset: 0;
  background: rgba(13, 9, 20, 0.6);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.35, 1);
}
.drawer.is-open .drawer__veil { opacity: 1; }
.drawer__panel {
  /* DARK (her call, 5 Oct): the page's ink, a lilac hairline round it, the
     purple panel's glow rising from its foot, and the page's grid lines
     faint behind the form */
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: 12px;
  width: calc(50% - 18px);
  display: flex;
  flex-direction: column;
  justify-content: safe center;             /* the same room above and below (her note) */
  gap: calc(32 * var(--du));
  padding: calc(72 * var(--du)) calc(80 * var(--du));
  border-radius: calc(50 * var(--du));
  border: var(--hair, 1px) solid rgba(159, 147, 255, 0.25);
  background:
    radial-gradient(120% 60% at 15% 115%, rgba(105, 94, 190, 0.55) 0%, rgba(105, 94, 190, 0) 60%),
    radial-gradient(70% 40% at 100% 0%, rgba(159, 147, 255, 0.16) 0%, rgba(159, 147, 255, 0) 70%),
    #0D0914;
  color: #F7F7F7;
  font-weight: 240;
  overflow-y: auto;
  overscroll-behavior: contain;
  isolation: isolate;
  transform: translateX(calc(-100% - 24px));
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.drawer.is-open .drawer__panel { transform: none; }
/* the words come up after the panel */
.drawer__panel > *, .drawer__form > * {
  opacity: 0;
  transform: translateY(calc(24 * var(--du)));
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer.is-open .drawer__panel > *,
.drawer.is-open .drawer__form > * { opacity: 1; transform: none; transition-delay: calc(0.35s + var(--i, 0) * 0.06s); }
.drawer__form { opacity: 1 !important; transform: none !important; }

.drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(24 * var(--du));
  padding-bottom: calc(32 * var(--du));
  border-bottom: var(--hair, 1px) solid rgba(247, 247, 247, 0.15);
}
.drawer__title {
  margin: 0;
  font-family: "Cooperative", "Arial Narrow", sans-serif;
  font-size: calc(64 * var(--du));
  line-height: 1;
  font-weight: 400;
}
.drawer__lede { margin: calc(-8 * var(--du)) 0 0; font-size: calc(20 * var(--du)); line-height: 1.3; max-width: 32em; opacity: 0.85; }
.drawer__close {
  flex: none;
  width: calc(56 * var(--du));
  height: calc(56 * var(--du));
  border: var(--hair, 1px) solid rgba(247, 247, 247, 0.5);
  border-radius: 50%;
  background: transparent;
  color: #F7F7F7;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer__close:hover, .drawer__close:focus-visible { background: #9F93FF; border-color: #9F93FF; transform: rotate(90deg); }
.drawer__close svg { width: calc(18 * var(--du)); height: calc(18 * var(--du)); }

/* THE FIELDS — the site's pill (as the buttons), a white hairline and a
   quiet wash; the name sits IN the field and rises to its top as you type;
   in focus the line turns lilac and the wash warms. The message box takes
   the cards' rounder corner. */
.drawer__form {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: min-content;
  gap: calc(16 * var(--du));
  align-content: start;
}
.dfield { position: relative; display: block; }
.dfield--wide { grid-column: 1 / -1; }
.dfield__input {
  display: block;
  width: 100%;
  height: calc(64 * var(--du));
  padding: 0 calc(28 * var(--du));              /* the label no longer floats: the text sits centred */
  border: var(--hair, 1px) solid rgba(247, 247, 247, 0.35);
  border-radius: calc(100 * var(--du));
  background: rgba(255, 255, 255, 0.05);
  color: #F7F7F7;
  font: inherit;
  font-size: calc(20 * var(--du));
  text-align: right;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
.dfield__input[type="tel"], .dfield__input[type="email"] { direction: ltr; text-align: right; }
.dfield__input:hover { border-color: rgba(247, 247, 247, 0.6); }
/* her note (6 Oct): in focus ONLY the stroke turns lilac — no wash, no ring */
.dfield__input:focus { border-color: #9F93FF; }
.dfield__input--area {
  height: calc(176 * var(--du));
  padding: calc(22 * var(--du)) calc(28 * var(--du)) calc(16 * var(--du));
  border-radius: calc(28 * var(--du));
  line-height: 1.3;
  resize: none;
}
.dfield__label {
  position: absolute;
  right: calc(28 * var(--du));
  top: calc(22 * var(--du));
  font-size: calc(20 * var(--du));
  line-height: 1;
  color: rgba(247, 247, 247, 0.7);
  pointer-events: none;
  transition: opacity 0.2s ease, color 0.3s ease;
}
/* the label stays put and in its size in focus; it goes once there is text */
.dfield__input:focus ~ .dfield__label,
.dfield__input:not(:placeholder-shown) ~ .dfield__label { opacity: 0; }   /* gone the moment the field is pressed (her note, 6 Oct) */
.dfield.is-wrong .dfield__input { border-color: #FF8FA3; }
.dfield.is-wrong .dfield__label { color: #FF8FA3; }
.drawer__consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: calc(12 * var(--du));
  margin: calc(8 * var(--du)) 0 0;
  font-size: calc(16 * var(--du));
  line-height: 1.3;
  cursor: pointer;
}
.drawer__consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.drawer__box {                               /* the square to tick */
  flex: none;
  position: relative;
  width: calc(22 * var(--du));
  height: calc(22 * var(--du));
  border: var(--hair, 1px) solid rgba(247, 247, 247, 0.6);
  border-radius: calc(6 * var(--du));
  background: rgba(255, 255, 255, 0.05);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.drawer__box::after {                        /* the tick */
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 28%;
  height: 52%;
  border: solid #0D0914;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg) scale(0);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.drawer__consent input:checked + .drawer__box { background: #9F93FF; border-color: #9F93FF; }
.drawer__consent input:checked + .drawer__box::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.drawer__consent input:focus-visible + .drawer__box { box-shadow: 0 0 0 calc(4 * var(--du)) rgba(159, 147, 255, 0.3); }
.drawer__consent.is-wrong .drawer__box { border-color: #FF8FA3; }
.drawer__consent.is-wrong .drawer__text { color: #FF8FA3; }
.drawer__text { opacity: 0.8; }
.drawer__consent a { text-decoration: underline; text-underline-offset: 3px; }
.drawer__foot { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(24 * var(--du)); margin-top: calc(40 * var(--du)); }   /* more room above the button (her note) */
.drawer .drawer__send {
  position: relative;
  display: inline-flex;
  direction: ltr;
  align-items: center;
  justify-content: space-between;
  width: calc(290 * var(--du));
  padding: calc(12 * var(--du)) calc(36 * var(--du));
  border: var(--hair, 1px) solid #9F93FF;
  border-radius: 999px;
  background: #9F93FF;
  color: #FFFFFF;
  font-family: inherit;
  font-weight: inherit;
  font-size: calc(20 * var(--du));
  line-height: 1.591;
  cursor: pointer;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer .drawer__send span { direction: rtl; }
.drawer .drawer__send::before { content: none; }
.drawer .drawer__send:hover,
.drawer .drawer__send:focus-visible { background: transparent; color: #9F93FF; }
.drawer .drawer__send .btn__arrow { display: block; width: calc(56.5 * var(--du)); height: calc(11.046 * var(--du)); transition: transform 0.35s ease; }
.drawer .drawer__send:hover .btn__arrow { transform: translateX(calc(-6 * var(--du))); }
.drawer__note { margin: 0; font-size: calc(16 * var(--du)); line-height: 1.3; }
@media (max-width: 899px) {
  .drawer__panel { width: calc(100% - 24px); padding: 40px 24px; border-radius: 24px; }
  .drawer__form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__veil, .drawer__panel > *, .drawer__form > * { transition: none; }
}


/* while the window is open the floating buttons (WhatsApp, accessibility)
   step aside — on a phone they covered the send button */
html:has(.drawer.is-open) :is(.wa-fab, .a11y-fab) { opacity: 0; pointer-events: none; }
@media (max-width: 899px) {
  /* ONE SCREEN, no scrolling (her note, 5 Oct): tighter on the phone, and the
     whole form scales down with the window's height when a phone is short
     (its unit is the smaller of the page's and the height's share) */
  .drawer { --du: min(var(--u, 1px), calc((100svh - 104px) / 640)); }
  .drawer__panel { padding: 28px 22px; gap: calc(18 * var(--du)); overflow-y: auto; }
  .drawer__head { gap: calc(16 * var(--du)); padding-bottom: calc(16 * var(--du)); }
  .drawer__title { font-size: calc(52 * var(--du)); }
  .drawer__lede { font-size: calc(17 * var(--du)); margin-top: 0; }
  .drawer__close { width: calc(46 * var(--du)); height: calc(46 * var(--du)); }
  .drawer__form { gap: calc(11 * var(--du)); }
  .dfield__input { height: calc(54 * var(--du)); padding: 0 calc(24 * var(--du)); font-size: max(16px, calc(17 * var(--du))); }
  .dfield__input--area { height: calc(108 * var(--du)); padding: calc(18 * var(--du)) calc(24 * var(--du)) calc(10 * var(--du)); border-radius: calc(24 * var(--du)); }
  .dfield__label { right: calc(24 * var(--du)); top: calc(18 * var(--du)); font-size: calc(17 * var(--du)); }
  .drawer__consent { margin-top: calc(4 * var(--du)); font-size: calc(14 * var(--du)); }
  .drawer__foot { margin-top: calc(18 * var(--du)); }
  .drawer .drawer__send { font-size: calc(17 * var(--du)); }
}

/* the law audit (her OK, 6 Oct 2026): required fields say so, and the consent
   box carries the one-line notice of what the details are for */
.dfield__req { color: #FFFFFF; }   /* required: a white asterisk (her note, 6 Oct) */
.drawer__why { display: block; margin-top: calc(4 * var(--du)); font-size: max(12px, calc(13 * var(--du))); line-height: 1.35; opacity: 0.7; }

/* the bots' field (7 Oct): out of sight and out of the tab order; a person
   never fills it, /api/contact drops any send that has it */
.drawer__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ==========================================================================
   THE THANK-YOU PAGE (her call, 7 Oct 2026): after a send the form goes and
   this comes, in the same panel — a lilac ring that draws its tick, "תודה,"
   with the first name, a line, and the way back. js/site-drawer.js builds it.
   ========================================================================== */
.drawer__thanks { display: none; }
.drawer__panel.is-sent > :not(.drawer__thanks):not(.drawer__head) { display: none; }
.drawer__panel.is-sent > .drawer__thanks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--du));
  opacity: 1;
  transform: none;
  animation: drawer-thanks-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.drawer__tick { width: calc(88 * var(--du)); height: calc(88 * var(--du)); overflow: visible; }
.drawer__tick circle,
.drawer__tick path { fill: none; stroke: #9F93FF; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.drawer__tick circle { stroke-dasharray: 227; stroke-dashoffset: 227; transform: rotate(-90deg); transform-origin: 50% 50%;
  animation: drawer-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.15s forwards; }
.drawer__tick path { stroke-width: 3.5; stroke-dasharray: 50; stroke-dashoffset: 50; animation: drawer-draw 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.85s forwards; }
.drawer__thanks-title {
  margin: calc(8 * var(--du)) 0 0;
  font-family: "Cooperative", "Arial Narrow", sans-serif;
  font-size: calc(72 * var(--du));
  line-height: 1.02;
  font-weight: 400;
  outline: none;
  animation: drawer-thanks-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.drawer__thanks-text {
  margin: 0;
  max-width: 26em;
  font-size: calc(22 * var(--du));
  line-height: 1.45;
  opacity: 0.9;
  animation: drawer-thanks-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
.drawer__thanks-small {
  margin: 0;
  font-size: max(13px, calc(16 * var(--du)));
  opacity: 0.6;
  animation: drawer-thanks-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.drawer .drawer__again { margin-top: calc(16 * var(--du)); animation: drawer-thanks-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; }
@keyframes drawer-thanks-in { from { opacity: 0; transform: translateY(calc(24 * var(--du))); } to { opacity: 1; transform: none; } }
@keyframes drawer-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .drawer__panel.is-sent > .drawer__thanks, .drawer__thanks * { animation: none !important; }
  .drawer__tick circle, .drawer__tick path { stroke-dashoffset: 0; }
}
/* the X stays on the thank-you page (her note, 7 Oct): the head without its
   title, lifted out of the flow to the X's own corner */
.drawer__panel.is-sent > .drawer__head {
  display: block;
  position: absolute;
  top: calc(72 * var(--du));
  left: calc(80 * var(--du));
  padding: 0;
  border: 0;
  z-index: 2;
}
.drawer__panel.is-sent > .drawer__head .drawer__title { display: none; }
@media (max-width: 899px) {
  .drawer__panel.is-sent > .drawer__head { top: 28px; left: 22px; }   /* the phone's panel padding */
}