/* =========================================================
   ABOUT-ENTRANCE.CSS
   Home page only — the one-time scroll entrance for the
   "ארבעה עשורים של טכנולוגיה פורצת דרך" section.

   ANIMATION ONLY. Nothing here changes layout, size, spacing,
   typography, color, text or the video: every property touched
   is opacity, transform or clip-path, none of which affect the
   box the element occupies. The section looks exactly as before
   once the entrance has finished.

   SAFETY — the same rule the rest of the site follows: the
   content is hidden ONLY after js/about-reveal.js has run and
   added .is-armed. If that script is missing, blocked or fails,
   neither class is ever added, none of these rules match, and
   the section is simply there from the first paint. A broken
   script can never leave the page blank.

   TRANSITIONS LIVE ON THE REVEALING RULE, NEVER ON THE ARMING
   ONE. Arming happens in script after the page has already
   painted; a transition on the armed state would animate the
   content from visible DOWN to hidden first -- a visible flinch
   before the entrance. Arming is instant; only the reveal moves.
   ========================================================= */

:root {
  /* Soft, no bounce and no overshoot -- both curves rise
     monotonically and land exactly on 1.
     Deliberately NOT the site's --ix-ease / --ix-ease-photo,
     which are strong ease-outs: measured in the browser, those
     put the fade at 0.83 and the reveal at 71% within the first
     150ms, so the move was visually over in a third of its own
     duration and read as a snap rather than an entrance. These
     two spend their full 600ms / 850ms actually moving. */
  --abt-ease: cubic-bezier(0.40, 0, 0.20, 1);
  --abt-ease-media: cubic-bezier(0.45, 0, 0.15, 1);

  --abt-text: 600ms;   /* each text stage */
  --abt-step: 100ms;   /* stagger between stages */
  --abt-media: 850ms;  /* the video's reveal */
  --abt-lead: 120ms;   /* video starts just after the text, not with it */
}

/* ---------------------------------------------------------
   ARMED — set by js/about-reveal.js, no transitions here
   --------------------------------------------------------- */

.about.is-armed .about__eyebrow-group,
.about.is-armed .about__heading,
.about.is-armed .about__paragraph {
  opacity: 0;
}

.about.is-armed .about__heading {
  transform: translateY(12px);
}

/* Half the heading's travel: the paragraphs settle rather than
   arrive, so the eye follows the heading and not the body copy. */
.about.is-armed .about__paragraph {
  transform: translateY(6px);
}

/* The frame, not the video, carries the clip — so the video can
   scale inside it while the clip edge stays exactly on the
   frame's own box. inset() is PHYSICAL (top right bottom left)
   and is never flipped by direction, which is what is wanted:
   a left inset of 100% leaves a zero-width sliver at the frame's
   physical RIGHT edge, and shrinking it to 0 opens the picture
   leftward from there. The frame itself never moves -- clip-path
   has no effect on layout. */
.about.is-armed .about__media {
  clip-path: inset(0 0 0 100%);
}

.about.is-armed .about__video {
  transform: scale(1.02);
}

/* ---------------------------------------------------------
   REVEALED — one pass, in three text stages 100ms apart
   --------------------------------------------------------- */

/* Stage 1 — the eyebrow and its blue/red rule. The rule's own
   draw (see about.css) is triggered by the same script at this
   same moment, so the line draws as the group fades up. */
.about.is-armed.is-revealed .about__eyebrow-group {
  opacity: 1;
  transition: opacity var(--abt-text) var(--abt-ease);
}

/* Stage 2 — the heading. */
.about.is-armed.is-revealed .about__heading {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--abt-text) var(--abt-ease) var(--abt-step),
              transform var(--abt-text) var(--abt-ease) var(--abt-step);
}

/* Stage 3 — all three paragraphs on ONE delay, deliberately:
   they read as a single block arriving, not as three separate
   lines animating in sequence. */
.about.is-armed.is-revealed .about__paragraph {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--abt-text) var(--abt-ease) calc(var(--abt-step) * 2),
              transform var(--abt-text) var(--abt-ease) calc(var(--abt-step) * 2);
}

/* The video — opens right to left, 120ms behind the text so the
   two read as one orchestrated move rather than one event. */
.about.is-armed.is-revealed .about__media {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--abt-media) var(--abt-ease-media) var(--abt-lead);
}

/* Settles out of a 2% overscale as it is uncovered. The 1% of
   overhang this puts on each side during the move is clipped by
   the frame above, so nothing ever spills past the video's own
   box and the frame's position is untouched. */
.about.is-armed.is-revealed .about__video {
  transform: scale(1);
  transition: transform var(--abt-media) var(--abt-ease-media) var(--abt-lead);
}

/* ---------------------------------------------------------
   REDUCED MOTION — everything present, nothing moves
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .about.is-armed .about__eyebrow-group,
  .about.is-armed .about__heading,
  .about.is-armed .about__paragraph {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about.is-armed .about__media {
    clip-path: none;
    transition: none;
  }

  .about.is-armed .about__video {
    transform: none;
    transition: none;
  }
}