/* =========================================================
   CONTACT-ENTRANCE.CSS
   The scroll entrances for everything below the hero on the
   contact page: the "מי אנחנו" band, the message form with its
   photograph and contact details, the legal note and the
   closing photograph.

   The numbers band is NOT here. It already has its count-up,
   built earlier and living in js/stats-reveal.js + contact.css:
   0 to the value over 1.4s on an expo curve with no overshoot,
   100ms apart in reading order, the dividers drawing downward,
   the "+" held outside the running figure, once per page load.
   Nothing about it is touched.

   ANIMATION ONLY -- opacity, transform and clip-path, none of
   which affect the box an element occupies. No layout, spacing,
   typography, colour, image, content, form behaviour or
   validation is changed, and the page transition and the hero
   entrance are untouched.

   ---------------------------------------------------------
   WHY EVERY ENTRANCE HERE IS A KEYFRAME ANIMATION
   A `transition` declaration replaces any earlier one on the
   same element. This page is full of them -- the inputs' focus
   underline (`transition: border-color` on every input and
   textarea), the submit button's arrow, the "קרא עוד" link's
   hairline and its icon -- so not one entrance is written as a
   transition. Animation and transition are separate properties
   and never overwrite each other.

   Every armed state is additionally scoped to `:not(.is-in)`
   and every animation is `backwards`, so the moment a section
   is revealed nothing here is declared on any element any more
   and every hover and focus behaves exactly as it does now.

   THE INPUTS' OWN UNDERLINES ARE LEFT ALONE, on purpose. Each
   one is the input's `border-bottom`, and that border's colour
   is what the focus state animates. Drawing it separately would
   have meant holding it transparent and handing it back inside
   the one property the form already uses for focus -- a real
   risk to the field's behaviour for a detail that arrives with
   its field anyway. Each field enters as one unit: its label,
   its input and its rule together.

   SAFETY: nothing is hidden until js/contact-entrance.js adds
   .is-armed. If that script is missing or fails, no rule here
   matches and the whole page is simply there from the first
   paint.
   ========================================================= */

:root {
  /* The same two curves as every other entrance on the site,
     restated so the files stay independent of load order. */
  --cx-ease: cubic-bezier(0.40, 0, 0.20, 1);
  --cx-ease-media: cubic-bezier(0.45, 0, 0.15, 1);

  --cx-media: 850ms;
  --cx-head: 620ms;
  --cx-text: 580ms;
  --cx-step: 90ms;      /* between the stages of a text block */
  --cx-item: 70ms;      /* between contact details, between fields */
  --cx-red: 170ms;
  --cx-blue: 320ms;
}

@keyframes cx-rise-10 { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cx-rise-8  { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes cx-rise-6  { from { opacity: 0; transform: translateY(6px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes cx-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes cx-draw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cx-settle  { from { transform: scale(1.02); } to { transform: scale(1); } }
@keyframes cx-settle-15 { from { transform: scale(1.015); } to { transform: scale(1); } }

/* inset() is PHYSICAL (top right bottom left) and is never
   flipped by direction. Each picture's direction was measured
   in the browser, not read off a class name. */
@keyframes cx-open-from-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes cx-open-upward     { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* =========================================================
   1 — "מי אנחנו"
   Measured: the text column sits at x150-774 and the picture at
   x806-1203, so the picture's OUTER edge is its right one and
   it opens from there inward, toward the text.
   ========================================================= */

.contact-about.is-armed:not(.is-in) .contact-about__media {
  clip-path: inset(0 0 0 100%);
}

.contact-about.is-armed:not(.is-in) .contact-about__image {
  transform: scale(1.02);
}

.contact-about.is-armed:not(.is-in) .contact-about__eyebrow,
.contact-about.is-armed:not(.is-in) .contact-about__heading,
.contact-about.is-armed:not(.is-in) .contact-about__paragraph,
.contact-about.is-armed:not(.is-in) .contact-about__more {
  opacity: 0;
}

.contact-about.is-armed:not(.is-in) .contact-about__heading {
  transform: translateY(10px);
}

/* .contact-about__media already has overflow:hidden, which is
   what clips the 2% while the picture settles inside it. */
.contact-about.is-armed.is-in .contact-about__media {
  animation: cx-open-from-right var(--cx-media) var(--cx-ease-media) backwards;
}

.contact-about.is-armed.is-in .contact-about__image {
  animation: cx-settle var(--cx-media) var(--cx-ease-media) backwards;
}

.contact-about.is-armed.is-in .contact-about__eyebrow {
  animation: cx-fade var(--cx-text) var(--cx-ease) 120ms backwards;
}

.contact-about.is-armed.is-in .contact-about__heading {
  animation: cx-rise-10 var(--cx-head) var(--cx-ease) 210ms backwards;
}

.contact-about.is-armed.is-in .contact-about__paragraph {
  animation: cx-fade var(--cx-text) var(--cx-ease) 300ms backwards;
}

/* The link fades only. Its hairline ::after and its icon keep
   their own hover transitions (interactions.css) untouched. */
.contact-about.is-armed.is-in .contact-about__more {
  animation: cx-fade var(--cx-text) var(--cx-ease) 390ms backwards;
}

/* =========================================================
   2 + 3 — THE FORM, ITS PHOTOGRAPH AND THE CONTACT DETAILS
   One section, so the two halves start almost together and the
   composition reads as joined.
   ========================================================= */

.contact-form.is-armed:not(.is-in) .contact-form__image {
  clip-path: inset(100% 0 0 0);
}

.contact-form.is-armed:not(.is-in) .contact-form__contact-list > li,
.contact-form.is-armed:not(.is-in) .contact-form__signature,
.contact-form.is-armed:not(.is-in) .contact-form__heading,
.contact-form.is-armed:not(.is-in) .contact-form__lead,
.contact-form.is-armed:not(.is-in) .contact-form__field,
.contact-form.is-armed:not(.is-in) .contact-form__submit {
  opacity: 0;
}

.contact-form.is-armed:not(.is-in) .contact-form__heading {
  transform: translateY(10px);
}

.contact-form.is-armed:not(.is-in) .contact-form__field {
  transform: translateY(6px);
}

.contact-form.is-armed:not(.is-in) .contact-form__divider-segment {
  transform: scaleX(0);
}

/* The tall picture opens upward. */
.contact-form.is-armed.is-in .contact-form__image {
  animation: cx-open-upward var(--cx-media) var(--cx-ease-media) backwards;
}

/* email → telephone → address → opening hours. Each <li> is ONE
   unit, so a two-line address never splits. */
.contact-form.is-armed.is-in .contact-form__contact-list > li {
  animation: cx-fade var(--cx-text) var(--cx-ease) var(--cx-at, 0ms) backwards;
}

.contact-form.is-armed .contact-form__contact-list > li:nth-child(1) { --cx-at: 180ms; }
.contact-form.is-armed .contact-form__contact-list > li:nth-child(2) { --cx-at: 250ms; }
.contact-form.is-armed .contact-form__contact-list > li:nth-child(3) { --cx-at: 320ms; }
.contact-form.is-armed .contact-form__contact-list > li:nth-child(4) { --cx-at: 390ms; }

/* The SILANDE signature last, and very quietly. */
.contact-form.is-armed.is-in .contact-form__signature {
  animation: cx-fade 700ms var(--cx-ease) 560ms backwards;
}

/* --- the form side ---------------------------------------- */

.contact-form.is-armed.is-in .contact-form__heading {
  animation: cx-rise-10 var(--cx-head) var(--cx-ease) 120ms backwards;
}

/* RED LEADS. The markup is red-first and in this RTL row the
   first child lands physically right, so red is the segment at
   the line's right end: it draws first and blue grows leftward
   out of it. transform-origin is PHYSICAL. */
.contact-form.is-armed .contact-form__divider-segment {
  transform-origin: right center;
}

.contact-form.is-armed.is-in .contact-form__divider-segment--red {
  animation: cx-draw var(--cx-red) var(--cx-ease) 220ms backwards;
}

.contact-form.is-armed.is-in .contact-form__divider-segment--blue {
  animation: cx-draw var(--cx-blue) var(--cx-ease) 380ms backwards;
}

.contact-form.is-armed.is-in .contact-form__lead {
  animation: cx-fade var(--cx-text) var(--cx-ease) 300ms backwards;
}

/* Each field is one unit -- its label, its input and the rule
   under it arrive together, never separately. Top to bottom,
   and inside the paired row right to left with the reading. */
.contact-form.is-armed.is-in .contact-form__field {
  animation: cx-rise-6 var(--cx-text) var(--cx-ease)
             calc(390ms + var(--cx-field, 0ms)) backwards;
}

.contact-form.is-armed .contact-form__row .contact-form__field:nth-child(1) { --cx-field: 0ms; }
.contact-form.is-armed .contact-form__row .contact-form__field:nth-child(2) { --cx-field: var(--cx-item); }
.contact-form.is-armed .contact-form__fieldset > label.contact-form__field:nth-of-type(1) { --cx-field: calc(var(--cx-item) * 2); }
.contact-form.is-armed .contact-form__fieldset > label.contact-form__field:nth-of-type(2) { --cx-field: calc(var(--cx-item) * 3); }
.contact-form.is-armed .contact-form__fieldset > label.contact-form__field:nth-of-type(3) { --cx-field: calc(var(--cx-item) * 4); }

/* The button last, a fade and nothing else: no scale, no
   bounce. Its arrow keeps its own hover. */
.contact-form.is-armed.is-in .contact-form__submit {
  animation: cx-fade var(--cx-text) var(--cx-ease) 740ms backwards;
}

/* =========================================================
   4 — THE LEGAL NOTE
   ========================================================= */

.contact-legal.is-armed:not(.is-in) .contact-legal__heading,
.contact-legal.is-armed:not(.is-in) .contact-legal__text {
  opacity: 0;
  transform: translateY(8px);
}

.contact-legal.is-armed.is-in .contact-legal__heading {
  animation: cx-rise-8 var(--cx-text) var(--cx-ease) backwards;
}

.contact-legal.is-armed.is-in .contact-legal__text {
  animation: cx-rise-8 var(--cx-text) var(--cx-ease) var(--cx-step) backwards;
}

/* =========================================================
   5 — THE CLOSING PHOTOGRAPH
   A clean horizontal mask and a 1.5% settle, and nothing else:
   it is the page's visual full stop.

   .contact-closing-frame is a wrapper added around the image so
   the clip sits on a box with overflow:hidden while the scale
   happens inside it. It is laid out to be invisible -- a block
   the image's own width -- so nothing about the rendering
   changes.
   ========================================================= */

.contact-closing-frame {
  display: block;
  overflow: hidden;
}

/* The clip rides on the IMAGE, not on the frame, and this is
   not a style choice. The frame is the element the observer
   watches, and IntersectionObserver measures an element's
   VISIBLE area -- a clip-path on the watched element itself
   reports a ratio of 0 no matter where it sits on screen, so it
   could never trigger its own reveal. Measured in the browser:
   with the clip on the frame the probe returned
   `intersecting=true ratio=0.000` with 400px of it on screen.
   A clip on a CHILD does not affect the parent's box, so moving
   it one level down fixes it outright.

   Clip and transform therefore share the image. The 1.5% scale
   carries the clip edge 0.75% past each side while it settles,
   and the frame's overflow:hidden contains that -- nothing ever
   shows outside the picture's own box. */
.contact-closing-frame.is-armed:not(.is-in) .contact-closing-photo {
  clip-path: inset(0 0 0 100%);
  transform: scale(1.015);
}

@keyframes cx-close-open {
  from { clip-path: inset(0 0 0 100%); transform: scale(1.015); }
  to   { clip-path: inset(0 0 0 0);    transform: scale(1); }
}

.contact-closing-frame.is-armed.is-in .contact-closing-photo {
  animation: cx-close-open var(--cx-media) var(--cx-ease-media) backwards;
}

/* =========================================================
   REDUCED MOTION — everything present, nothing moves
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .contact-about.is-armed:not(.is-in) .contact-about__eyebrow,
  .contact-about.is-armed:not(.is-in) .contact-about__heading,
  .contact-about.is-armed:not(.is-in) .contact-about__paragraph,
  .contact-about.is-armed:not(.is-in) .contact-about__more,
  .contact-form.is-armed:not(.is-in) .contact-form__contact-list > li,
  .contact-form.is-armed:not(.is-in) .contact-form__signature,
  .contact-form.is-armed:not(.is-in) .contact-form__heading,
  .contact-form.is-armed:not(.is-in) .contact-form__lead,
  .contact-form.is-armed:not(.is-in) .contact-form__field,
  .contact-form.is-armed:not(.is-in) .contact-form__submit,
  .contact-legal.is-armed:not(.is-in) .contact-legal__heading,
  .contact-legal.is-armed:not(.is-in) .contact-legal__text {
    opacity: 1;
    transform: none;
  }

  .contact-about.is-armed:not(.is-in) .contact-about__image,
  .contact-form.is-armed:not(.is-in) .contact-form__divider-segment,
  .contact-closing-frame.is-armed:not(.is-in) .contact-closing-photo {
    transform: none;
  }

  .contact-about.is-armed:not(.is-in) .contact-about__media,
  .contact-form.is-armed:not(.is-in) .contact-form__image,
  .contact-closing-frame.is-armed:not(.is-in) .contact-closing-photo {
    clip-path: none;
  }

  .contact-about.is-armed.is-in .contact-about__media,
  .contact-about.is-armed.is-in .contact-about__image,
  .contact-about.is-armed.is-in .contact-about__eyebrow,
  .contact-about.is-armed.is-in .contact-about__heading,
  .contact-about.is-armed.is-in .contact-about__paragraph,
  .contact-about.is-armed.is-in .contact-about__more,
  .contact-form.is-armed.is-in .contact-form__image,
  .contact-form.is-armed.is-in .contact-form__contact-list > li,
  .contact-form.is-armed.is-in .contact-form__signature,
  .contact-form.is-armed.is-in .contact-form__heading,
  .contact-form.is-armed.is-in .contact-form__divider-segment,
  .contact-form.is-armed.is-in .contact-form__lead,
  .contact-form.is-armed.is-in .contact-form__field,
  .contact-form.is-armed.is-in .contact-form__submit,
  .contact-legal.is-armed.is-in .contact-legal__heading,
  .contact-legal.is-armed.is-in .contact-legal__text,
  .contact-closing-frame.is-armed.is-in .contact-closing-photo {
    animation: none;
  }
}