/* =========================================================================
   Carried over from the Team ZAZA site (branch zaza-motion, 25.9.2026),
   re-cut to this design system. Three things only, by Sagi's choice:
   headings, the before/after divider, and the contact form.
   ========================================================================= */

/* ---- headings: words rise out of a mask when the .reveal fires ---- */
.mo-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.mo-wi { display: inline-block; transition: transform .95s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 55ms + var(--reveal-delay, 0ms)); }
.js .mo-split:not(.in) .mo-wi { transform: translateY(108%); }
/* words with no space between them (a full stop after a highlight) never part */
.mo-glue { white-space: nowrap; }
.mo-glue > .mo-w { white-space: normal; }

/* ---- before / after: a divider instead of a cross-fade ----
   "After" is the right-hand share of the frame, --swap wide. It rests at .5,
   the split the Team ZAZA version showed (Sagi asked for it back on
   10.10.2026), so the default here matches what app.js paints and nothing
   jumps when the script runs. */
.swap__img--after {
  opacity: 1;
  clip-path: inset(0 0 0 calc((1 - var(--swap, .5)) * 100%));
  transition: clip-path .6s var(--ease-out);
}
html.swap-dragging .swap__img--after { transition: none; }
.swap__divider {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px;
  left: calc((1 - var(--swap, .5)) * 100%);
  background: var(--text); box-shadow: -2px 2px 12px rgba(0, 0, 0, .45);
  pointer-events: none; transition: left .6s var(--ease-out);
}
.swap__divider::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--text); color: var(--bg); font-weight: 900; font-size: 1.05rem; letter-spacing: .1em;
  box-shadow: -4px 6px 16px rgba(0, 0, 0, .45);
}
html.swap-dragging .swap__divider { transition: none; }
.hero__card[data-swap] { cursor: ew-resize; }
/* The switch reports which photo holds most of the frame. With the divider
   resting mid-frame a thumb riding --swap parked across both labels, so it
   follows the state instead and only tracks the finger during a drag. */
html:not(.swap-dragging) .swap__thumb { transform: translateX(0); }
html:not(.swap-dragging) .swap__switch:has([data-swap-set="1"][aria-pressed="true"]) .swap__thumb { transform: translateX(calc(-1 * (100% + 4px))); }

/* ---- contact form, Team ZAZA treatment ---- */
.lead-form {
  border-radius: 22px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--a) 9%, var(--panel)), var(--bg));
  /* falls down-left, like every ambient shadow on the page (one light, top-right) */
  box-shadow: -14px 34px 70px -30px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.lead-form__title { font-size: 1.35rem; letter-spacing: -.01em; }

/* choice pills: fill solid when picked */
.lead-form .choice__opt span { transition: background .25s, color .25s, border-color .25s, transform .15s; }
.lead-form .choice__opt:active span { transform: scale(.96); }
.lead-form .choice__opt input:checked + span { background: var(--text); color: var(--bg); border-color: var(--text); }

/* inputs: a line that draws in from the right on focus */
.lead-form .input {
  border-radius: 10px;
  background-image: linear-gradient(var(--a), var(--a));
  background-repeat: no-repeat; background-position: right bottom; background-size: 0% 2px;
  transition: background-size .45s cubic-bezier(.16, 1, .3, 1), border-color .25s;
}
.lead-form .input:hover { border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.lead-form .input:focus { background-size: 100% 2px; }

/* the submit arrow slides on hover */
.lead-form__submit::after { content: "←"; display: inline-block; margin-inline-start: 10px; transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
.lead-form__submit:hover::after { transform: translateX(-6px); }

/* success card pops in */
.lead-done:not([hidden]) { animation: mo-pop .5s cubic-bezier(.16, 1, .3, 1); }
@keyframes mo-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } }

/* =========================================================================
   Micro-interactions after transitions.dev (25.9.2026), written from scratch
   for this page. Every one of them answers a tap; nothing plays on its own.
   ========================================================================= */

/* ---- submit while sending: the arrow becomes a spinner ---- */
.lead-form__submit:disabled { cursor: progress; opacity: 1; }
.lead-form__submit:disabled::after {
  content: ""; width: 1em; height: 1em; vertical-align: -.15em; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  transform: none; animation: mo-spin .7s linear infinite;
}
@keyframes mo-spin { to { transform: rotate(-360deg); } }

/* ---- a field that failed: red edge and one short shake ---- */
.lead-form .input.mo-bad { border-color: var(--danger); }
.lead-form .input.mo-shake { animation: mo-shake .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes mo-shake {
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}

/* ---- FAQ: the answer rises into place as its panel opens ---- */
.acc__panel-inner { transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
[data-acc][aria-expanded="false"] + .acc__panel .acc__panel-inner { opacity: 0; transform: translateY(-6px); }

/* ---- mobile menu: links arrive one after another ---- */
.menu:not([hidden]) { animation: mo-fade .25s ease both; }
.menu:not([hidden]) .menu__link,
.menu:not([hidden]) .menu__ig,
.menu:not([hidden]) .menu__cta { animation: mo-rise .5s cubic-bezier(.16, 1, .3, 1) both; }
.menu:not([hidden]) .menu__link:nth-child(2) { animation-delay: 45ms; }
.menu:not([hidden]) .menu__link:nth-child(3) { animation-delay: 90ms; }
.menu:not([hidden]) .menu__link:nth-child(4) { animation-delay: 135ms; }
.menu:not([hidden]) .menu__link:nth-child(5) { animation-delay: 180ms; }
.menu:not([hidden]) .menu__ig { animation-delay: 200ms; }
.menu:not([hidden]) .menu__cta { animation-delay: 240ms; }
@keyframes mo-fade { from { opacity: 0; } }
@keyframes mo-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---- everything off when motion is off ---- */
@media (prefers-reduced-motion: reduce) {
  .lead-form .input.mo-shake, .menu:not([hidden]), .menu:not([hidden]) * { animation: none !important; }
  .acc__panel-inner { transition: none; }
}
html.acc-noanim .lead-form .input.mo-shake, html.acc-noanim .menu:not([hidden]), html.acc-noanim .menu:not([hidden]) * { animation: none !important; }
html.acc-noanim .acc__panel-inner { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .mo-wi { transform: none !important; transition: none; }
  .swap__img--after, .swap__divider { transition: none; }
  .lead-done:not([hidden]) { animation: none; }
}
html.acc-noanim .mo-wi { transform: none !important; transition: none; }
html.acc-noanim .swap__img--after, html.acc-noanim .swap__divider { transition: none; }
html.acc-noanim .lead-done:not([hidden]) { animation: none; }