/* =========================================================
   HERO-ENTRANCE.CSS
   One shared page entrance for every inner page's hero:
   category, product, contact, downloads, projects and
   technical support. The home page's own hero is deliberately
   NOT included -- no selector here matches it.

   ANIMATION ONLY. Every property touched is opacity or
   transform, neither of which affects the box an element
   occupies. No layout, spacing, typography, image, colour or
   content is changed, and no existing hover or interaction is
   touched.

   ---------------------------------------------------------
   WHY THIS FILE HAS NO SCRIPT, AND NO FLASH

   The entrance is CSS animations, not classes a deferred
   script has to add, for one reason: a script that runs after
   first paint would let the hero appear at full strength for a
   frame and then snap to hidden before animating. These
   animations are already in effect on the very first frame the
   browser paints, so there is nothing to flash.

   They hang off .sil-nav, which the existing page-transition's
   own inline <head> script puts on <html> before <body> is
   even parsed. That hook is READ here and nothing more: the
   page transition -- its line, its colour order, its overlay,
   its timings, its script -- is not touched in any way. If
   JavaScript is off, .sil-nav is never added, no rule here
   matches, and every hero is simply there from the start.

   HOW IT MEETS THE PAGE TRANSITION
   The arriving page already fades its <body> in over 450ms
   (sil-page-in) and lifts its <main> 8px (sil-main-in). This
   sequence therefore starts at --hx-start (200ms), by which
   point that fade is well under way: the hero builds out of
   the arrival rather than competing with it or waiting for a
   gap. Nothing about those two animations is changed; this one
   simply begins inside them.

   `backwards`, never `both`: backwards holds the from-state
   through the delay and then RELEASES, so nothing stays locked
   and every hover on these elements behaves afterwards exactly
   as it does now.
   ========================================================= */

:root {
  /* The same two curves as the home page's entrances
     (about-entrance.css / home-entrance.css), restated rather
     than referenced so the files stay independent of each
     other's load order. Monotonic, landing exactly on 1 --
     no bounce, no overshoot. */
  --hx-ease: cubic-bezier(0.40, 0, 0.20, 1);
  --hx-ease-media: cubic-bezier(0.45, 0, 0.15, 1);

  /* Where the whole sequence begins, measured from first
     paint -- inside the page transition's own 450ms arrival
     fade, not after it. */
  --hx-start: 200ms;

  --hx-eyebrow: 440ms;
  --hx-red: 180ms;         /* the brand line: red leads ... */
  --hx-blue: 320ms;        /* ... blue follows out of it */
  --hx-head: 700ms;
  --hx-text: 620ms;
  --hx-cta: 560ms;
  --hx-media: 1200ms;

  /* Stage starts, all relative to --hx-start. The stages
     deliberately OVERLAP -- no stage waits for the one before
     it to finish -- so the hero builds as one continuous move
     and the last of the text lands about 1.1s in. */
  --hx-at-rule: 120ms;
  --hx-at-blue: 280ms;
  --hx-at-head: 240ms;
  --hx-at-sub: 340ms;
  --hx-at-para: 430ms;
  --hx-at-cta: 560ms;
}

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

/* ---------------------------------------------------------
   1 — THE EYEBROW  (SILANDE / SILANDE ISRAEL)
   --------------------------------------------------------- */
.sil-nav .cat-hero__eyebrow,
.sil-nav .contact-hero__eyebrow,
.sil-nav .dl-hero__eyebrow,
.sil-nav .pj-hero__eyebrow,
.sil-nav .tech-hero__eyebrow,
.sil-nav .pr-hero__eyebrow {
  animation: hx-rise-6 var(--hx-eyebrow) var(--hx-ease) var(--hx-start) backwards;
}

/* ---------------------------------------------------------
   2 — THE BLUE/RED BRAND LINE
   RED LEADS. Every one of these rules is written red-first in
   the markup, and in this RTL page the first child 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. Same order as the page
   transition's own SILANDE line; never blue first.

   transform-origin is PHYSICAL and is never flipped by
   direction, which is exactly what is wanted on both segments.
   --------------------------------------------------------- */
.sil-nav .cat-hero__rule .cat-rule__segment,
.sil-nav .contact-hero__divider .contact-hero__divider-segment,
.sil-nav .dl-hero__rule .dl-rule__segment,
.sil-nav .pj-hero__rule .pj-rule__segment,
.sil-nav .tech-hero__rule .tech-rule__segment,
.sil-nav .pr-hero__rule .pr-rule__segment {
  transform-origin: right center;
}

.sil-nav .cat-hero__rule .cat-rule__segment--red,
.sil-nav .contact-hero__divider .contact-hero__divider-segment--red,
.sil-nav .dl-hero__rule .dl-rule__segment--red,
.sil-nav .pj-hero__rule .pj-rule__segment--red,
.sil-nav .tech-hero__rule .tech-rule__segment--red,
.sil-nav .pr-hero__rule .pr-rule__segment--red {
  animation: hx-draw var(--hx-red) var(--hx-ease)
             calc(var(--hx-start) + var(--hx-at-rule)) backwards;
}

.sil-nav .cat-hero__rule .cat-rule__segment--blue,
.sil-nav .contact-hero__divider .contact-hero__divider-segment--blue,
.sil-nav .dl-hero__rule .dl-rule__segment--blue,
.sil-nav .pj-hero__rule .pj-rule__segment--blue,
.sil-nav .tech-hero__rule .tech-rule__segment--blue,
.sil-nav .pr-hero__rule .pr-rule__segment--blue {
  animation: hx-draw var(--hx-blue) var(--hx-ease)
             calc(var(--hx-start) + var(--hx-at-blue)) backwards;
}

/* ---------------------------------------------------------
   3 — THE PAGE'S OWN HEADLINE
   --------------------------------------------------------- */
.sil-nav .cat-hero__heading,
.sil-nav .contact-hero__heading,
.sil-nav .dl-hero__title,
.sil-nav .pj-hero__title,
.sil-nav .tech-hero__heading,
.sil-nav .pr-hero__code {
  animation: hx-rise-16 var(--hx-head) var(--hx-ease)
             calc(var(--hx-start) + var(--hx-at-head)) backwards;
}

/* ---------------------------------------------------------
   4 — SUBHEADING, THEN BODY COPY
   Two slots, 90ms apart. A hero that has no subheading (contact,
   downloads) simply has nothing matching the first slot -- its
   paragraph runs alone, and no substitute effect is invented.
   --------------------------------------------------------- */
.sil-nav .cat-hero__subtitle,
.sil-nav .pj-hero__subtitle,
.sil-nav .tech-hero__subheading,
.sil-nav .pr-hero__title {
  animation: hx-rise-8 var(--hx-text) var(--hx-ease)
             calc(var(--hx-start) + var(--hx-at-sub)) backwards;
}

.sil-nav .cat-hero__paragraph,
.sil-nav .contact-hero__paragraph,
.sil-nav .dl-hero__lede,
.sil-nav .pj-hero__lede,
.sil-nav .tech-hero__paragraph,
.sil-nav .pr-hero__lede {
  animation: hx-rise-8 var(--hx-text) var(--hx-ease)
             calc(var(--hx-start) + var(--hx-at-para)) backwards;
}

/* ---------------------------------------------------------
   5 — THE CTA
   Last, and a plain fade: no travel, nothing dramatic. Its own
   hover (the chevron's 3px drop, interactions.css) is on the
   icon inside and is not touched here; `backwards` releases
   this animation as soon as it ends, so the hover behaves
   exactly as it does now.
   --------------------------------------------------------- */
.sil-nav .contact-hero__content .hero-cta,
.sil-nav .dl-hero__content .hero-cta,
.sil-nav .pj-hero__content .hero-cta,
.sil-nav .tech-hero__content .hero-cta,
.sil-nav .pr-hero__link {
  animation: hx-fade var(--hx-cta) var(--hx-ease)
             calc(var(--hx-start) + var(--hx-at-cta)) backwards;
}

/* ---------------------------------------------------------
   6 — THE PHOTOGRAPH
   A 1.5% settle and a fade, slowly, under everything else --
   depth, not movement. No slide, no pan.

   It rides on the __media WRAPPER, never on the image itself.
   On a product page .pr-hero__slide carries the carousel's own
   600ms opacity crossfade and is swapped by a script; putting
   an entrance on it would have fought that. The wrapper has no
   transition of its own, so the two never meet.
   --------------------------------------------------------- */
.sil-nav .cat-hero__media,
.sil-nav .contact-hero__media,
.sil-nav .dl-hero__media,
.sil-nav .pj-hero__media,
.sil-nav .tech-hero__media,
.sil-nav .pr-hero__media {
  animation: hx-settle var(--hx-media) var(--hx-ease-media) var(--hx-start) backwards;
}

/* ---------------------------------------------------------
   REDUCED MOTION — everything present, nothing moves
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sil-nav .cat-hero__eyebrow,
  .sil-nav .contact-hero__eyebrow,
  .sil-nav .dl-hero__eyebrow,
  .sil-nav .pj-hero__eyebrow,
  .sil-nav .tech-hero__eyebrow,
  .sil-nav .pr-hero__eyebrow,
  .sil-nav .cat-hero__rule .cat-rule__segment,
  .sil-nav .contact-hero__divider .contact-hero__divider-segment,
  .sil-nav .dl-hero__rule .dl-rule__segment,
  .sil-nav .pj-hero__rule .pj-rule__segment,
  .sil-nav .tech-hero__rule .tech-rule__segment,
  .sil-nav .pr-hero__rule .pr-rule__segment,
  .sil-nav .cat-hero__heading,
  .sil-nav .contact-hero__heading,
  .sil-nav .dl-hero__title,
  .sil-nav .pj-hero__title,
  .sil-nav .tech-hero__heading,
  .sil-nav .pr-hero__code,
  .sil-nav .cat-hero__subtitle,
  .sil-nav .pj-hero__subtitle,
  .sil-nav .tech-hero__subheading,
  .sil-nav .pr-hero__title,
  .sil-nav .cat-hero__paragraph,
  .sil-nav .contact-hero__paragraph,
  .sil-nav .dl-hero__lede,
  .sil-nav .pj-hero__lede,
  .sil-nav .tech-hero__paragraph,
  .sil-nav .pr-hero__lede,
  .sil-nav .contact-hero__content .hero-cta,
  .sil-nav .dl-hero__content .hero-cta,
  .sil-nav .pj-hero__content .hero-cta,
  .sil-nav .tech-hero__content .hero-cta,
  .sil-nav .pr-hero__link,
  .sil-nav .cat-hero__media,
  .sil-nav .contact-hero__media,
  .sil-nav .dl-hero__media,
  .sil-nav .pj-hero__media,
  .sil-nav .tech-hero__media,
  .sil-nav .pr-hero__media {
    animation: none;
  }
}