/* =========================================================
   TECH-SERVICE-ENTRANCE.CSS
   The scroll entrance for the service blocks 01 and 02 on the
   technical-support page. Each block runs on its own, as the
   reader reaches it.

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

   ---------------------------------------------------------
   THE HOVER RULE
   These blocks already carry finished hover work in
   tech-service-hover.css. Two things protect it:

   1. EVERY entrance here is a keyframe ANIMATION, never a
      transition. A `transition` declaration replaces any
      earlier one on the same element, and .tech-service__image
      and .tech-service__number both already have one. Animation
      and transition are separate properties and never overwrite
      each other.

   2. The armed state is scoped to `:not(.is-in)`, so the moment
      a block is revealed those declarations stop matching
      entirely. Combined with fill-mode `backwards` -- which
      holds the from-state through the delay and then RELEASES
      -- every element ends the entrance with no declared
      transform or opacity of its own, exactly as it started.
      `both` would have kept holding them and frozen the hover
      for good.

   3. The revealing rules are scoped to `:not(.is-done)`, and the
      script adds that class once the sequence has finished. This
      is NOT cosmetic: .tech-rule__segment's hover is itself a
      keyframe animation (tech-rule-breathe), and an entrance
      written as `.tech-service.is-armed.is-in .tech-service__rule
      .tech-rule__segment--red` (0,5,0) outweighs the hover's
      `.tech-service:hover .tech-service__rule
      .tech-rule__segment--red` (0,4,0) -- so the finished
      entrance's animation-name kept winning and the breathe
      never ran. Measured in the browser, not assumed. Dropping
      the declaration entirely once it is spent restores the
      hover exactly, and leaves every element with no entrance
      property of its own at rest.

   What that leaves untouched, by name:
     .tech-service__image   has `transition: transform` and the
                            hover's inward drift -- NOT touched.
                            The entrance's own scale rides on
                            .tech-service__frame, a wrapper added
                            inside the photo's box so the two
                            transforms compose rather than
                            overwrite.
     .tech-service__number  has `transition: color, transform`
                            and the hover's 5px lift -- its
                            entrance is an animation, and
                            releases.
     .tech-rule__segment    the hover runs tech-rule-breathe on
                            these; that rule is more specific
                            than this file's, so a hover during
                            or after the entrance wins cleanly.
                            transform-origin is already set to
                            right center there and is reused, not
                            redeclared.
     .tech-service__cta-arrow  keeps its own hover; only its
                            parent link fades in.

   SAFETY: nothing is hidden until js/tech-service-entrance.js
   adds .is-armed. If that script is missing or fails, no rule
   here matches and both blocks are simply there.
   ========================================================= */

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

  --tx-photo: 850ms;
  --tx-number: 640ms;
  --tx-red: 170ms;
  --tx-blue: 320ms;
  --tx-head: 600ms;
  --tx-text: 600ms;
  --tx-cta: 540ms;

  /* Stage starts. They overlap on purpose -- no stage waits for
     the one before it -- so the block builds as one move and
     the last of it lands about 1.06s in.
         0ms   the photograph opens
       120ms   the number
       240ms   the rule (red), 400ms (blue)
       320ms   the heading
       410ms   the paragraph
       520ms   the link                                       */
  --tx-at-number: 120ms;
  --tx-at-red: 240ms;
  --tx-at-blue: 400ms;
  --tx-at-head: 320ms;
  --tx-at-text: 410ms;
  --tx-at-cta: 520ms;
}

@keyframes tx-rise-12 { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tx-rise-8  { from { opacity: 0; transform: translateY(8px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes tx-fade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes tx-draw    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tx-settle  { from { transform: scale(1.02); } to { transform: scale(1); } }

/* The picture opens from the edge nearest its own text and
   grows outward, so each block opens along its own composition
   rather than both the same way. Measured in the browser, not
   reasoned from the class names: on an --image-start block the
   photo renders on the physical LEFT, so its inner edge is the
   right one; on --image-end it is the other way about.
   inset() is PHYSICAL (top right bottom left) and is never
   flipped by direction. */
@keyframes tx-open-from-right { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes tx-open-from-left  { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------
   ARMED — only while the block has not been revealed
   --------------------------------------------------------- */

.tech-service.is-armed:not(.is-in) .tech-service__number,
.tech-service.is-armed:not(.is-in) .tech-service__heading,
.tech-service.is-armed:not(.is-in) .tech-service__paragraph,
.tech-service.is-armed:not(.is-in) .tech-service__cta {
  opacity: 0;
}

.tech-service.is-armed:not(.is-in) .tech-rule__segment {
  transform: scaleX(0);
}

.tech-service.is-armed:not(.is-in) .tech-service__frame {
  transform: scale(1.02);
}

.tech-service--image-start.is-armed:not(.is-in) .tech-service__photo {
  clip-path: inset(0 0 0 100%);
}

.tech-service--image-end.is-armed:not(.is-in) .tech-service__photo {
  clip-path: inset(0 100% 0 0);
}

/* ---------------------------------------------------------
   1 — THE PHOTOGRAPH
   --------------------------------------------------------- */

/* .tech-service__frame exists for one reason: to keep the
   entrance's scale off .tech-service__image, which already owns
   the hover's translate+scale drift. Two transforms on one
   element overwrite each other; on two nested elements they
   compose. It fills the photo's box exactly, so the image's own
   width/height:100% still resolve and nothing about the
   rendering changes. .tech-service__photo already has
   overflow:hidden, which is what clips the 2% while it settles. */
.tech-service__frame {
  display: block;
  width: 100%;
  height: 100%;
}

.tech-service--image-start.is-armed.is-in:not(.is-done) .tech-service__photo {
  animation: tx-open-from-right var(--tx-photo) var(--tx-ease-media) backwards;
}

.tech-service--image-end.is-armed.is-in:not(.is-done) .tech-service__photo {
  animation: tx-open-from-left var(--tx-photo) var(--tx-ease-media) backwards;
}

.tech-service.is-armed.is-in:not(.is-done) .tech-service__frame {
  animation: tx-settle var(--tx-photo) var(--tx-ease-media) backwards;
}

/* ---------------------------------------------------------
   2 — THE BIG NUMBER
   It arrives as part of the composition: no counting, no
   running digits -- the same two numerals the page has at rest,
   fading up into place.
   --------------------------------------------------------- */
.tech-service.is-armed.is-in:not(.is-done) .tech-service__number {
  animation: tx-rise-12 var(--tx-number) var(--tx-ease) var(--tx-at-number) backwards;
}

/* ---------------------------------------------------------
   3 — THE BRAND LINE
   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 already `right center` from
   tech-service-hover.css and is deliberately NOT redeclared.
   --------------------------------------------------------- */
.tech-service.is-armed.is-in:not(.is-done) .tech-service__rule .tech-rule__segment--red {
  animation: tx-draw var(--tx-red) var(--tx-ease) var(--tx-at-red) backwards;
}

.tech-service.is-armed.is-in:not(.is-done) .tech-service__rule .tech-rule__segment--blue {
  animation: tx-draw var(--tx-blue) var(--tx-ease) var(--tx-at-blue) backwards;
}

/* ---------------------------------------------------------
   4 — HEADING, THEN TEXT, THEN THE LINK
   The paragraph moves as one block: never a line at a time.
   --------------------------------------------------------- */
.tech-service.is-armed.is-in:not(.is-done) .tech-service__heading {
  animation: tx-rise-8 var(--tx-head) var(--tx-ease) var(--tx-at-head) backwards;
}

.tech-service.is-armed.is-in:not(.is-done) .tech-service__paragraph {
  animation: tx-rise-8 var(--tx-text) var(--tx-ease) var(--tx-at-text) backwards;
}

.tech-service.is-armed.is-in:not(.is-done) .tech-service__cta {
  animation: tx-fade var(--tx-cta) var(--tx-ease) var(--tx-at-cta) backwards;
}

/* ---------------------------------------------------------
   REDUCED MOTION — everything present, nothing moves
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tech-service.is-armed:not(.is-in) .tech-service__number,
  .tech-service.is-armed:not(.is-in) .tech-service__heading,
  .tech-service.is-armed:not(.is-in) .tech-service__paragraph,
  .tech-service.is-armed:not(.is-in) .tech-service__cta {
    opacity: 1;
  }

  .tech-service.is-armed:not(.is-in) .tech-rule__segment,
  .tech-service.is-armed:not(.is-in) .tech-service__frame {
    transform: none;
  }

  .tech-service--image-start.is-armed:not(.is-in) .tech-service__photo,
  .tech-service--image-end.is-armed:not(.is-in) .tech-service__photo {
    clip-path: none;
  }

  .tech-service.is-armed.is-in:not(.is-done) .tech-service__photo,
  .tech-service.is-armed.is-in:not(.is-done) .tech-service__frame,
  .tech-service.is-armed.is-in:not(.is-done) .tech-service__number,
  .tech-service.is-armed.is-in:not(.is-done) .tech-service__rule .tech-rule__segment,
  .tech-service.is-armed.is-in:not(.is-done) .tech-service__heading,
  .tech-service.is-armed.is-in:not(.is-done) .tech-service__paragraph,
  .tech-service.is-armed.is-in:not(.is-done) .tech-service__cta {
    animation: none;
  }
}


/* =========================================================
   PART 2 — "תהליך העבודה שלנו": THE SECTION HEADING

   The four STEPS of this section already have their entrance,
   built earlier and living in tech-service-hover.css: the
   number rises 8px, the title follows at +90ms, the tick draws
   at +180ms with a brand red/blue pass that settles back to its
   resting grey, the text fades at +280ms, and each step starts
   140ms after the one before it -- a wave running 01 to 04 in
   reading order. None of that is rebuilt or replaced here; it is
   already exactly the sequence asked for.

   What was missing was the section's own heading and its brand
   rule, which is what this part adds, plus two refinements to
   the steps made WITHOUT touching a single existing animation
   declaration (see each note below).

   No new script: the section already arms itself through .tp-js
   -- added to <html> by the page's own inline <head> one-liner,
   before the first paint, so nothing can flash -- and is
   released by js/tech-process-reveal.js adding .is-revealed,
   once per page load. Both are reused as they are.
   ========================================================= */

.tp-js .tech-process:not(.is-revealed) .tech-process__heading {
  opacity: 0;
  transform: translateY(12px);
}

.tp-js .tech-process:not(.is-revealed) .tech-process__rule .tech-rule__segment {
  transform: scaleX(0);
}

@keyframes tpx-head-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tpx-draw      { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tp-js .tech-process.is-revealed .tech-process__heading {
  animation: tpx-head-rise 660ms var(--tx-ease) 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 has to be set here -- the one in
   tech-service-hover.css is scoped to .tech-service__rule and
   does not reach this section's rule. */
.tp-js .tech-process .tech-process__rule .tech-rule__segment {
  transform-origin: right center;
}

.tp-js .tech-process.is-revealed .tech-process__rule .tech-rule__segment--red {
  animation: tpx-draw 170ms var(--tx-ease) 100ms backwards;
}

.tp-js .tech-process.is-revealed .tech-process__rule .tech-rule__segment--blue {
  animation: tpx-draw 320ms var(--tx-ease) 260ms backwards;
}

/* --- the two refinements to the steps ---------------------- */

/* 1. The wave now starts 180ms behind the heading, so the
      heading is visibly first and the whole composition runs
      ~1.44s rather than ~1.26s. This redefines ONLY the custom
      property the existing rules already read; not one
      animation declaration in tech-service-hover.css is
      touched, and --tp-step keeps its own 140ms beat. */
.tp-js .tech-process .tech-process__steps { --tp-lead: 180ms; }

.tp-js .tech-process .tech-process__step:nth-child(1) { --tp-base: var(--tp-lead); }
.tp-js .tech-process .tech-process__step:nth-child(2) { --tp-base: calc(var(--tp-lead) + var(--tp-step)); }
.tp-js .tech-process .tech-process__step:nth-child(3) { --tp-base: calc(var(--tp-lead) + var(--tp-step) * 2); }
.tp-js .tech-process .tech-process__step:nth-child(4) { --tp-base: calc(var(--tp-lead) + var(--tp-step) * 3); }

/* 2. The step's text gains the 5px rise it was missing. Same
      duration, same delay, same curve as the fade it replaces --
      only the keyframes differ. .tech-process__step-text carries
      no hover and no transition of its own, so there is nothing
      here to collide with. */
@keyframes tpx-text-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.tp-js .tech-process.is-revealed .tech-process__step-text {
  animation: tpx-text-rise 560ms var(--tp-ease) calc(var(--tp-base) + 280ms) backwards;
}


/* =========================================================
   PART 3 — THE CLOSING CTA ("צריכים ייעוץ טכני לפרויקט?")
   One composition: the photograph opens while the heading, the
   paragraph and the link arrive behind it, all inside ~1s.

   Nothing in this section carries a transition of its own
   except .tech-service__cta-arrow (interactions.css), which is
   the chevron INSIDE the link -- only its parent fades, so that
   hover is untouched. The armed state is scoped to
   `:not(.is-in)` and every animation is `backwards`, so once the
   entrance is spent nothing is left declared on any element.
   ========================================================= */

.tech-consult.is-armed:not(.is-in) .tech-consult__heading,
.tech-consult.is-armed:not(.is-in) .tech-consult__paragraph,
.tech-consult.is-armed:not(.is-in) .tech-consult__cta {
  opacity: 0;
}

.tech-consult.is-armed:not(.is-in) .tech-consult__image {
  transform: scale(1.02);
}

/* The photograph sits on the physical LEFT of this row
   (.tech-consult__inner is row-reverse, so the first DOM child
   lands there), and opens from that outer edge inward. inset()
   is PHYSICAL (top right bottom left): a right inset of 100%
   leaves a zero-width sliver at the frame's left edge, and
   shrinking it to 0 opens the picture rightward from there.
   clip-path has no effect on layout, so the frame never moves --
   and it is also what clips the 2% while the picture settles,
   since .tech-consult__photo has no overflow of its own. */
.tech-consult.is-armed:not(.is-in) .tech-consult__photo {
  clip-path: inset(0 100% 0 0);
}

@keyframes tcx-open     { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tcx-settle   { from { transform: scale(1.02); } to { transform: scale(1); } }
@keyframes tcx-rise-10  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tcx-rise-6   { from { opacity: 0; transform: translateY(6px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes tcx-fade     { from { opacity: 0; } to { opacity: 1; } }

.tech-consult.is-armed.is-in:not(.is-done) .tech-consult__photo {
  animation: tcx-open 850ms var(--tx-ease-media) backwards;
}

.tech-consult.is-armed.is-in:not(.is-done) .tech-consult__image {
  animation: tcx-settle 850ms var(--tx-ease-media) backwards;
}

/* The text starts 120ms behind the picture -- enough to read as
   one orchestrated move rather than one event -- then heading,
   paragraph and link 100ms apart. The link fades only: no
   travel, nothing dramatic. */
.tech-consult.is-armed.is-in:not(.is-done) .tech-consult__heading {
  animation: tcx-rise-10 620ms var(--tx-ease) 120ms backwards;
}

.tech-consult.is-armed.is-in:not(.is-done) .tech-consult__paragraph {
  animation: tcx-rise-6 580ms var(--tx-ease) 220ms backwards;
}

.tech-consult.is-armed.is-in:not(.is-done) .tech-consult__cta {
  animation: tcx-fade 540ms var(--tx-ease) 330ms backwards;
}

/* ---------------------------------------------------------
   REDUCED MOTION — parts 2 and 3
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tp-js .tech-process:not(.is-revealed) .tech-process__heading {
    opacity: 1;
    transform: none;
  }

  .tp-js .tech-process:not(.is-revealed) .tech-process__rule .tech-rule__segment {
    transform: none;
  }

  .tp-js .tech-process.is-revealed .tech-process__heading,
  .tp-js .tech-process.is-revealed .tech-process__rule .tech-rule__segment,
  .tp-js .tech-process.is-revealed .tech-process__step-text {
    animation: none;
  }

  .tech-consult.is-armed:not(.is-in) .tech-consult__heading,
  .tech-consult.is-armed:not(.is-in) .tech-consult__paragraph,
  .tech-consult.is-armed:not(.is-in) .tech-consult__cta {
    opacity: 1;
  }

  .tech-consult.is-armed:not(.is-in) .tech-consult__image {
    transform: none;
  }

  .tech-consult.is-armed:not(.is-in) .tech-consult__photo {
    clip-path: none;
  }

  .tech-consult.is-armed.is-in .tech-consult__photo,
  .tech-consult.is-armed.is-in .tech-consult__image,
  .tech-consult.is-armed.is-in .tech-consult__heading,
  .tech-consult.is-armed.is-in .tech-consult__paragraph,
  .tech-consult.is-armed.is-in .tech-consult__cta {
    animation: none;
  }
}