/* =========================================================
   HOME-ENTRANCE.CSS
   Home page only — the one-time scroll entrances for
   "פתרונות בניה" and "פרויקטים".

   ANIMATION ONLY. Every property touched here is opacity,
   transform or clip-path, none of which affect the box an
   element occupies, plus one border COLOUR that is restored
   the moment its line has drawn. No layout, spacing, size,
   colour, typography, image or text is changed.

   ---------------------------------------------------------
   THE HOVER RULE — the single most important constraint here

   Both sections already carry finished hover work in
   home-hover.css. A `transition` declaration REPLACES any
   earlier one on the same element, so declaring a transition
   on an element that already has one would silently delete
   that hover's timing. Nothing in this file is allowed to do
   that, which is why the entrance deliberately avoids the
   elements the hover owns:

     .solutions__row          has `transition: opacity`
                              (the dim) -- NOT touched. Its
                              three children carry the
                              entrance instead, on one shared
                              delay so they read as one unit.
     .solutions__row::after   is the hover's travelling line
                              -- the entrance uses ::before.
     .solutions__row-image    has `transition: transform`
                              (the 1.05 zoom) -- NOT touched.
     .projects__card          has `transition: box-shadow`
                              (the bloom). The card itself has
                              to fade and rise, so its entrance
                              is a keyframe ANIMATION, not a
                              transition: animation and
                              transition are separate
                              properties and do not overwrite
                              each other.
     .projects__image         has `transition: transform`
                              (the 1.028 zoom) -- NOT touched.
                              The entrance's own scale rides on
                              .projects__frame, a wrapper added
                              inside the photo's frame purely so
                              the two transforms compose instead
                              of fighting.
     .projects__row::before   is the hover's divider -- NOT
                              touched.

   ---------------------------------------------------------
   SAFETY: the content is hidden ONLY after js/home-entrance.js
   has run and added .is-armed to the section. If that script
   is missing or fails, none of these rules match and both
   sections are simply there from the first paint.

   Transitions live on the REVEALING rule, never on the arming
   one -- arming happens after the page has painted, and a
   transition there would animate the content out of view
   first.
   ========================================================= */

:root {
  /* The same two curves as about-entrance.css, restated rather
     than referenced so neither file depends on the other's load
     order. Soft, monotonic, landing exactly on 1 -- no bounce,
     no overshoot. */
  --ent-ease: cubic-bezier(0.40, 0, 0.20, 1);
  --ent-ease-media: cubic-bezier(0.45, 0, 0.15, 1);

  --ent-head: 640ms;      /* a section heading */
  --ent-head-step: 100ms; /* the brand line's head start behind it */
  --ent-red: 170ms;       /* the brand line: red leads ... */
  --ent-blue: 340ms;      /* ... blue follows out of it (170+330 = 500) */
  --ent-blue-wait: 160ms;

  --ent-row: 560ms;       /* one solutions row */
  --ent-row-line: 480ms;  /* that row's divider drawing */
  --ent-row-step: 85ms;   /* between two rows arriving together */

  --ent-card: 700ms;      /* one project card */
  --ent-card-media: 820ms;/* its photograph opening */
  --ent-card-step: 120ms; /* the second card of a pair */
}

/* =========================================================
   SHARED — section heading + the blue/red brand line
   ========================================================= */

.solutions.is-armed .solutions__heading,
.projects.is-armed .projects__heading {
  opacity: 0;
  transform: translateY(12px);
}

.solutions.is-armed .solutions__heading-group.is-in .solutions__heading,
.projects.is-armed .projects__heading-group.is-in .projects__heading {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--ent-head) var(--ent-ease),
              transform var(--ent-head) var(--ent-ease);
}

/* The line opens from the physical RIGHT, with the reading.
   transform-origin is PHYSICAL and is never flipped by
   direction, which is what is wanted on both segments.

   RED LEADS. In this RTL row the first DOM child (red) lands
   physically right, so red is the short segment at the line's
   right end: it draws first, and blue then grows leftward out
   of red's left edge. This is the same order as the page
   transition's SILANDE line -- never blue first. */
.solutions.is-armed .solutions__divider .hero__divider-segment,
.projects.is-armed .projects__divider .hero__divider-segment {
  transform: scaleX(0);
  transform-origin: right center;
}

.solutions.is-armed .solutions__heading-group.is-in .hero__divider-segment--red,
.projects.is-armed .projects__heading-group.is-in .hero__divider-segment--red {
  transform: scaleX(1);
  transition: transform var(--ent-red) var(--ent-ease) var(--ent-head-step);
}

.solutions.is-armed .solutions__heading-group.is-in .hero__divider-segment--blue,
.projects.is-armed .projects__heading-group.is-in .hero__divider-segment--blue {
  transform: scaleX(1);
  transition: transform var(--ent-blue) var(--ent-ease)
              calc(var(--ent-head-step) + var(--ent-blue-wait));
}

/* =========================================================
   "פתרונות בניה" — the 01-08 rows
   Each row is revealed as it reaches the viewport, on its own
   observation -- not as one long chain started by the heading.
   ========================================================= */

/* The row's three children carry the move together, on one
   shared delay, so the photo, the number, the title and the
   description arrive as a single unit rather than four
   separate animations. The row element itself is untouched,
   which is what leaves the hover's opacity dim intact. */
.solutions.is-armed .solutions__row-text,
.solutions.is-armed .solutions__row-description,
.solutions.is-armed .solutions__row-media {
  opacity: 0;
  transform: translateY(8px);
}

.solutions.is-armed .solutions__row.is-in .solutions__row-text,
.solutions.is-armed .solutions__row.is-in .solutions__row-description,
.solutions.is-armed .solutions__row.is-in .solutions__row-media {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--ent-row) var(--ent-ease) var(--ent-delay, 0ms),
              transform var(--ent-row) var(--ent-ease) var(--ent-delay, 0ms);
}

/* The row's own 1px divider cannot be scaled -- a border is not
   transformable -- so while the section is armed the border is
   held at `transparent` (its WIDTH is untouched, so nothing
   moves) and this bar draws in its place, in the same colour,
   on the same pixel. The script restores the real border the
   instant the bar lands and hides the bar in the same frame:
   both are 1px of --color-line in the same position, so the
   handover is invisible, and the row ends up exactly as it
   started -- including for interactions.css's
   `.solutions__row:has(a):hover` border colour, which would
   otherwise have been masked for good.

   NOTE the lack of a `transition` on .solutions__row itself at
   any point: the colour swaps are instant, by design. A
   transition there would have replaced the hover's own. */
.solutions.is-armed .solutions__row {
  border-block-end-color: transparent;
}

.solutions.is-armed .solutions__row::before {
  content: "";
  position: absolute;
  /* PHYSICAL left/right, not inset-inline: the direction of
     travel is set by transform-origin and must not depend on
     the row's RTL inline axis. */
  left: 0;
  right: 0;
  bottom: -1px;                /* the divider's own pixel */
  height: 1px;
  background-color: var(--color-line);
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
}

.solutions.is-armed .solutions__row.is-in::before {
  transform: scaleX(1);
  transition: transform var(--ent-row-line) var(--ent-ease) var(--ent-delay, 0ms);
}

/* The handover, set by the script once the bar has landed. */
.solutions.is-armed .solutions__row.is-lined {
  border-block-end-color: var(--color-line);
}

.solutions.is-armed .solutions__row.is-lined::before {
  opacity: 0;
}

/* =========================================================
   "פרויקטים" — the cards
   A little more visual than the rows, because the photographs
   are large: the card rises and fades while its picture opens
   from the bottom up out of a 2% overscale.
   ========================================================= */

/* A keyframe animation, NOT a transition -- see the file
   header. .projects__card already carries
   `transition: box-shadow` for the hover's shadow bloom, and
   declaring a transition here would have deleted it. */
@keyframes ent-card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.projects.is-armed .projects__card {
  opacity: 0;
  transform: translateY(14px);
}

.projects.is-armed .projects__card.is-in {
  opacity: 1;
  transform: translateY(0);
  /* `backwards`, never `both`: backwards holds the from-state
     through the delay and then RELEASES, leaving the declared
     values above in charge. `both` would keep holding the
     animated values and lock transform on the card for good. */
  animation: ent-card-rise var(--ent-card) var(--ent-ease)
             var(--ent-delay, 0ms) backwards;
}

/* The picture opens upward. inset() is PHYSICAL
   (top right bottom left): a top inset of 100% leaves a
   zero-height sliver along the frame's bottom edge, and
   shrinking it to 0 opens the picture from there. `round 1px`
   on both ends keeps the card's own 1px corner through the
   move. The frame never moves -- clip-path has no effect on
   layout. */
.projects.is-armed .projects__media {
  clip-path: inset(100% 0 0 0 round 1px);
}

.projects.is-armed .projects__card.is-in .projects__media {
  clip-path: inset(0 0 0 0 round 1px);
  transition: clip-path var(--ent-card-media) var(--ent-ease-media)
              var(--ent-delay, 0ms);
}

/* .projects__frame exists for one reason: to keep the
   entrance's scale off .projects__image, which already owns
   the hover's own scale(1.028). Two transforms on one element
   overwrite each other; on two nested elements they compose.
   It is laid out to be invisible -- it fills the frame exactly,
   so the image's own width/height:100% still resolve against a
   definite box and nothing about the rendering changes. */
.projects__frame {
  display: block;
  width: 100%;
  height: 100%;
}

.projects.is-armed .projects__frame {
  transform: scale(1.02);
}

.projects.is-armed .projects__card.is-in .projects__frame {
  transform: scale(1);
  transition: transform var(--ent-card-media) var(--ent-ease-media)
              var(--ent-delay, 0ms);
}

/* =========================================================
   REDUCED MOTION — everything present, nothing moves
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .solutions.is-armed .solutions__heading,
  .projects.is-armed .projects__heading,
  .solutions.is-armed .solutions__row-text,
  .solutions.is-armed .solutions__row-description,
  .solutions.is-armed .solutions__row-media,
  .projects.is-armed .projects__card {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .solutions.is-armed .solutions__divider .hero__divider-segment,
  .projects.is-armed .projects__divider .hero__divider-segment,
  .projects.is-armed .projects__frame {
    transform: none;
    transition: none;
  }

  .solutions.is-armed .solutions__row {
    border-block-end-color: var(--color-line);
  }

  .solutions.is-armed .solutions__row::before {
    opacity: 0;
  }

  .projects.is-armed .projects__media {
    clip-path: inset(0 0 0 0 round 1px);
    transition: none;
  }
}