/* ============================================================================
   INVELO CINEMATIC ENGINE — section3.css              Sprint 03 · v0.3.0
   ----------------------------------------------------------------------------
   Section 3 "Why Invelo": the white panel that RISES OVER Section 2 like a
   stacked card, carrying its own black → orange → white top band, then locks
   and drives a scroll-driven card carousel. Loaded after section2.css; the
   approved Hero / Section 2 sheets are not edited — the Section 2 → 3 handoff
   rules live HERE (§1b) and only apply while a Section 3 follows.

   WHAT THIS SHEET OWNS
     mechanism   scroll shell height, the overlap with Section 2's shell, the
                 sticky/pinned stage, the band, carousel clipping + translate,
                 z-order, the handoff dim/scale of Section 2
     placement   content grid (left column | heading + carousel), card size
     type/colour white surface, black/orange heading, card states, arrows
   WHAT IT DOES NOT OWN   editorial margin / padding / gap — defaults come
                 through Elementor's own --gap / --padding variables (class
                 specificity), so the Advanced-tab controls replace them.

   SCROLL MODEL (section3.js, one ScrollTrigger over the shell)
     shell height = entry (100svh, overlapping Section 2's tail)
                  + 100svh (the locked stage)
                  + hold + (cards − 1) × step + tail
     rise     0 → 1  the stage travels from below the viewport to top:0
     hold            settled, readable
     carousel        continued scroll advances the cards, reverse reverses
     tail            settled again, then the section releases

   LIVE VALUES (written by section3.js, all pure functions of scroll)
     --invelo-s3-rise      0..1   on the shell
     --invelo-s3-reveal    0..1   content opacity
     --invelo-s3-index     0..N-1 float, on the shell (track position)
     --invelo-s3-w         0..1   per card, emphasis weight
     --invelo-s2-handoff   0..1   on Section 2's shell (dim + scale)
   ========================================================================== */

:root {
  --invelo-s3: var(--invelo-s, 1px);
  --invelo-s3-entry: 100svh;          /* the rise distance = one viewport */
  --invelo-s3-hold: 40svh;            /* settled before the carousel takes over */
  --invelo-s3-step: 45svh;            /* scroll per card advance */
  --invelo-s3-tail: 25svh;            /* settled after the last card */
  --invelo-s3-steps: 4;               /* cards − 1, written by section3.js from the DOM */
  --invelo-s3-band: max(calc(470 * var(--invelo-s3)), calc(var(--invelo-header-safe-top, 88px) + 160px));
  --invelo-s3-visible: 4;             /* cards shown at once (desktop) — section3.js sizes the cards from the carousel width */
  --invelo-s3-card-w: calc(286 * var(--invelo-s3));   /* fallback before the measurement */
  --invelo-s3-card-gap: calc(24 * var(--invelo-s3));
  --invelo-s3-shift-max: 0px;         /* track travel so the LAST card ends fully visible (measured) */
  --invelo-s3-t: 0;                   /* 0..1 carousel progress (index / steps) */
  --invelo-s3-radius: calc(14 * var(--invelo-s3));
  --invelo-s3-rise: 0;
  --invelo-s3-reveal: 1;
  --invelo-s3-index: 0;
  --invelo-s3-ink: #111111;
  --invelo-s3-muted: #6b6b6b;
  --invelo-s3-surface: #ffffff;
}


/* == 1. Shell + stage (mechanism) ========================================== */
.e-con.invelo-section3-shell,
.invelo-section3-shell {
  position: relative;
  --position: relative;
  z-index: 3;                        /* above Section 2's shell while it rises over it */
  --z-index: 3;
  padding: 0;                        /* MECHANISM: the shell is the scroll distance */
  background: transparent;           /* Section 2 stays visible underneath during the rise */
}
.e-con.invelo-section3-stage,
.invelo-section3-stage {
  position: relative;
  --position: relative;
  padding: 0;
  min-height: 100svh;
  overflow: clip;
  --overflow: clip;
  color: var(--invelo-s3-ink);
  /* the surface + the top band: black → warm orange → white, feathered.
     Three layers so it reads as atmosphere, not a strip: a soft radial glow
     in the orange band, the vertical blend, and the white body. */
  background-color: var(--invelo-s3-surface);
  background-image:
    radial-gradient(120% 55% at 50% 42%, rgba(255, 122, 40, 0.55) 0%, rgba(255, 122, 40, 0.18) 45%, rgba(255, 122, 40, 0) 75%),
    linear-gradient(to bottom,
      #000000 0%, #070302 9%, #2a0d05 19%, #a8321a 30%, #f04e23 40%, #ff6a2f 49%,
      #ff9868 60%, #ffc8ad 71%, #ffeadf 83%, #ffffff 94%, #ffffff 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 100% var(--invelo-s3-band), 100% var(--invelo-s3-band);
  background-position: 0 0, 0 0;
  border-radius: calc(28 * var(--invelo-s3) * (1 - var(--invelo-s3-rise))) calc(28 * var(--invelo-s3) * (1 - var(--invelo-s3-rise))) 0 0;
  /* the lift shadow exists only while the panel rises (rise < 1); once settled
     its alpha is 0, so nothing paints over the section that follows —
     the seam between Section 3 and Section 4 is plain white */
  box-shadow: 0 calc(-24 * var(--invelo-s3)) calc(60 * var(--invelo-s3)) rgba(0, 0, 0, calc(0.35 * (1 - var(--invelo-s3-rise))));
}

/* --- desktop, driven --------------------------------------------------- */
.invelo-section3-shell[data-s3="armed"] {
  height: calc(var(--invelo-s3-entry) + 100svh + var(--invelo-s3-hold) + var(--invelo-s3-steps) * var(--invelo-s3-step) + var(--invelo-s3-tail));
  /* the stacked-card overlap: the shell starts one viewport BEFORE Section 2's
     shell ends (section3.css §1b extends that shell by the same distance), so
     Section 2 is still locked while this panel travels up over it */
  margin-top: calc(-1 * var(--invelo-s3-entry));
}
.invelo-section3-shell[data-s3="armed"] .invelo-section3-stage {
  position: sticky;
  --position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
/* Rev 02 anchoring: single ScrollTrigger pin instead of sticky when the DOM cannot hold sticky */
.invelo-section3-shell[data-s3="armed"][data-invelo-anchor="pin"] .invelo-section3-stage {
  position: relative;
  --position: relative;
  top: auto;
}

/* == 1b. Section 2 → Section 3 handoff (applies only while a Section 3 follows) == */
/* Section 2's shell grows by the entry distance so its stage stays locked
   underneath the rising panel; section2.js shortens its trigger by the same
   amount, so Section 2's own timeline is unchanged (it is complete and
   holding while Section 3 arrives). */
.invelo-section2-shell[data-s2="armed"][data-invelo-next="section3"] {
  height: calc(100svh + var(--invelo-s2-scroll) + var(--invelo-s3-entry));
  z-index: 1;
  --z-index: 1;
}
/* the layer underneath recedes a little: dims towards the black shell and
   scales down from its top edge — transform + opacity only */
.invelo-section2-shell[data-s2="armed"][data-invelo-next="section3"] .invelo-section2-stage {
  transform-origin: 50% 0;
  transform: scale(calc(1 - 0.045 * var(--invelo-s2-handoff, 0)));
  opacity: calc(1 - 0.6 * var(--invelo-s2-handoff, 0));
  will-change: transform, opacity;
}


/* == 2. Content canvas ====================================================== */
.e-con.invelo-section3-content,
.invelo-section3-content {
  position: relative;
  --position: relative;
  display: grid;
  --display: grid;
  grid-template-columns: calc(499 * var(--invelo-s3)) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-items: start;
  --row-gap: calc(56 * var(--invelo-s3));    /* Elementor Gap default; the editor's Gap control replaces it */
  --column-gap: 0px;
  --gap: var(--row-gap);
  row-gap: var(--row-gap);
  column-gap: var(--column-gap);
  /* the canvas starts below the band (the band already clears the header) */
  --padding-top: calc(var(--invelo-s3-band) + 30 * var(--invelo-s3));
  --padding-bottom: calc(80 * var(--invelo-s3));
  opacity: var(--invelo-s3-reveal);
}
.invelo-section3-content > .invelo-section3-left     { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; }
.invelo-section3-content > .invelo-section3-heading  { grid-column: 2; grid-row: 1; }
.invelo-section3-content > .invelo-section3-carousel { grid-column: 2; grid-row: 2; }
.invelo-section3-content > .invelo-section3-progress { grid-column: 2; grid-row: 3; }
.invelo-section3-content > .elementor-widget { --container-widget-width: 100%; width: 100%; max-width: 100%; }

/* left column: eyebrow top, copy middle, arrows bottom (Elementor flex column, space-between) */
.e-con.invelo-section3-left,
.invelo-section3-left {
  --display: flex;
  --flex-direction: column;
  --justify-content: space-between;
  --align-items: flex-start;
  max-width: calc(340 * var(--invelo-s3));
  min-height: 100%;
  --gap: calc(32 * var(--invelo-s3));
}
.invelo-section3-left .elementor-widget { width: auto; max-width: 100%; }


/* == 3. Typography + colour ================================================= */
.invelo-section3-shell .invelo-section3-eyebrow .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(16 * var(--invelo-s3));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--invelo-s3-ink);
  margin: 0;
}
.invelo-section3-shell .invelo-section3-body,
.invelo-section3-shell .invelo-section3-body p {
  font-family: var(--invelo-font-body);
  font-size: calc(18 * var(--invelo-s3));
  line-height: 1.5;
  color: var(--invelo-s3-ink);
}
.invelo-section3-shell .invelo-section3-body p { margin: 0 0 1em; }
.invelo-section3-shell .invelo-section3-body p:last-child { margin-bottom: 0; }

.invelo-section3-shell .invelo-section3-heading .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(58 * var(--invelo-s3));
  line-height: 1.04;
  letter-spacing: 0;
  color: var(--invelo-s3-ink);
  margin: 0;
}
.invelo-section3-brand {
  color: #F4762A;
  background-image: linear-gradient(90deg, #FAA61A 0%, #F8961C 30%, #F46F20 70%, #F04E23 100%);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .invelo-section3-brand { -webkit-background-clip: text; background-clip: text; color: transparent; }
}


/* == 4. Carousel ============================================================ */
.e-con.invelo-section3-carousel,
.invelo-section3-carousel {
  position: relative;
  --position: relative;
  overflow: hidden;                                        /* clips the track; not an ancestor of any stage */
  --overflow: hidden;
  /* PM (Sprint 03 review): exactly --invelo-s3-visible cards fit the column;
     the track travels only until the last card is fully visible, then the
     page scrolls on. The viewport is the column itself (same span as the rail). */
  width: 100%;
  --width: 100%;
  max-width: 100%;
  padding: 0;
}
.e-con.invelo-section3-track,
.invelo-section3-track {
  --display: flex;
  --flex-direction: row;
  --align-items: stretch;
  --flex-wrap: nowrap;
  --gap: var(--invelo-s3-card-gap);
  gap: var(--invelo-s3-card-gap);
  width: max-content;
  --width: max-content;
  max-width: none;
  padding: 0;
  transform: translate3d(calc(-1 * var(--invelo-s3-t) * var(--invelo-s3-shift-max)), 0, 0);
  will-change: transform;
}

/* a card: light surface, the dark emphasis is a weighted overlay so the state
   is a pure function of scroll (no time-based colour transitions) */
.e-con.invelo-card,
.invelo-card {
  --invelo-s3-w: 0;
  position: relative;
  --position: relative;
  flex: 0 0 var(--invelo-s3-card-w);
  width: var(--invelo-s3-card-w);
  --width: var(--invelo-s3-card-w);
  min-height: calc(340 * var(--invelo-s3));
  --display: flex;
  --flex-direction: column;
  --justify-content: flex-start;
  --gap: 0px;
  --padding-top: calc(28 * var(--invelo-s3));
  --padding-right: calc(24 * var(--invelo-s3));
  --padding-bottom: calc(28 * var(--invelo-s3));
  --padding-left: calc(24 * var(--invelo-s3));
  border-radius: var(--invelo-s3-radius);
  background: linear-gradient(160deg, #f4f4f4 0%, #fafafa 100%);
  box-shadow: 0 calc(6 * var(--invelo-s3)) calc(22 * var(--invelo-s3)) rgba(17, 17, 17, 0.06), inset 0 0 0 1px rgba(17, 17, 17, 0.06);
  isolation: isolate;
  overflow: hidden;
}
.e-con.invelo-card::before,
.invelo-card::before {                                     /* Elementor's .e-con:before is pinned property by property (Rev 02) */
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0;
  border: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, #2e2e2e 0%, #161616 100%);
  opacity: var(--invelo-s3-w);
  mix-blend-mode: normal;
  transition: none;
  pointer-events: none;
}
.invelo-card > * { position: relative; z-index: 1; }
.invelo-card .elementor-widget { width: auto; max-width: 100%; }

.invelo-card .invelo-card-number .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(52 * var(--invelo-s3));
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  color: color-mix(in srgb, #F4762A calc(var(--invelo-s3-w) * 100%), var(--invelo-s3-ink));
}
.invelo-card .invelo-card-title { margin-top: auto; }     /* title + body sit at the bottom of the card */
.invelo-card .invelo-card-title .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(17 * var(--invelo-s3));
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  color: color-mix(in srgb, #ffffff calc(var(--invelo-s3-w) * 100%), var(--invelo-s3-ink));
}
.invelo-card .invelo-card-body,
.invelo-card .invelo-card-body p {
  font-family: var(--invelo-font-body);
  font-size: calc(15 * var(--invelo-s3));
  line-height: 1.4;
  margin: 0;
  color: color-mix(in srgb, #ffffff calc(var(--invelo-s3-w) * 100%), var(--invelo-s3-muted));
}
.invelo-card .invelo-card-body { margin-top: calc(10 * var(--invelo-s3)); }
@supports not (color: color-mix(in srgb, #000 50%, #fff)) {
  .invelo-card[data-active] .invelo-card-number .elementor-heading-title { color: #F4762A; }
  .invelo-card[data-active] .invelo-card-title .elementor-heading-title,
  .invelo-card[data-active] .invelo-card-body p { color: #fff; }
}

/* progress bar: the native Divider widget as a 2px rail with an orange segment */
.invelo-section3-shell .invelo-section3-progress { --divider-gap: 0px; }
.invelo-section3-shell .invelo-section3-progress .elementor-divider {
  position: relative;
  padding: 0;
  height: 2px;
  background: rgba(17, 17, 17, 0.12);
  border-radius: 2px;
}
.invelo-section3-shell .invelo-section3-progress .elementor-divider-separator { display: none; }
.invelo-section3-shell .invelo-section3-progress .elementor-divider::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--invelo-s3-index) / (var(--invelo-s3-steps) + 1) * 100%);
  width: calc(100% / (var(--invelo-s3-steps) + 1));
  border-radius: 2px;
  background: var(--invelo-brand-gradient, linear-gradient(90deg, #F04E23, #FAA61A));
}

/* arrows: two Elementor Button widgets, square, ink fill, line arrow drawn by CSS (text stays for screen readers) */
.e-con.invelo-section3-nav,
.invelo-section3-nav { --display: flex; --flex-direction: row; --gap: calc(6 * var(--invelo-s3)); gap: calc(6 * var(--invelo-s3)); }
.invelo-section3-nav .elementor-widget-button { width: auto; }
.invelo-section3-nav .invelo-section3-arrow .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(56 * var(--invelo-s3));
  height: calc(56 * var(--invelo-s3));
  min-height: 0;
  padding: 0;
  border-radius: calc(8 * var(--invelo-s3));
  background: var(--invelo-s3-ink);
  color: #fff;
  overflow: hidden;
}
.invelo-section3-nav .invelo-section3-arrow .elementor-button-content-wrapper { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.invelo-section3-nav .invelo-section3-arrow .elementor-button::after {
  content: "";
  width: calc(22 * var(--invelo-s3));
  height: calc(16 * var(--invelo-s3));
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h20M14 1l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h20M14 1l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.invelo-section3-nav .invelo-section3-arrow--prev .elementor-button::after { transform: scaleX(-1); }
.invelo-section3-nav .invelo-section3-arrow[aria-disabled="true"] .elementor-button,
.invelo-section3-nav .invelo-section3-arrow .elementor-button[aria-disabled="true"] { opacity: 0.35; }
.invelo-section3-nav .invelo-section3-arrow .elementor-button:focus-visible { outline: 2px solid #F04E23; outline-offset: 3px; }


/* == 5. Compact (tablet portrait, phones, very short windows) ================
   Natural flow: the panel still rises with the page (it is the next block),
   the band stays, the carousel becomes a swipe track with scroll-snap and the
   arrows scroll it. One engine trigger is not needed here. */
@media not all and (min-width: 1025px) and (min-aspect-ratio: 11/10), (max-height: 560px) {
  .invelo-section3-shell[data-s3="armed"] { height: auto; margin-top: 0; }
  .invelo-section3-shell[data-s3="armed"] .invelo-section3-stage { position: relative; --position: relative; top: auto; height: auto; min-height: 0; }
  .invelo-section2-shell[data-s2="stack"][data-invelo-next="section3"] { height: auto; }
  .invelo-section2-shell[data-invelo-next="section3"] .invelo-section2-stage { transform: none; opacity: 1; }
  :root { --invelo-s3-band: max(calc(300 * var(--invelo-s3)), calc(var(--invelo-header-safe-top, 64px) + 120px)); }
  .e-con.invelo-section3-stage, .invelo-section3-stage { border-radius: 0; box-shadow: none; }
  .e-con.invelo-section3-content, .invelo-section3-content {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    --padding-top: calc(var(--invelo-s3-band) + 16px);
    --row-gap: 28px;
  }
  .invelo-section3-content > .invelo-section3-left     { grid-column: 1; grid-row: 1; max-width: none; min-height: 0; }
  .invelo-section3-content > .invelo-section3-heading  { grid-column: 1; grid-row: 2; }
  .invelo-section3-content > .invelo-section3-carousel { grid-column: 1; grid-row: 3; }
  .invelo-section3-content > .invelo-section3-progress { grid-column: 1; grid-row: 4; }
  .invelo-section3-left .invelo-section3-nav { order: 3; }
  .invelo-section3-shell .invelo-section3-heading .elementor-heading-title { font-size: clamp(28px, 7.4vw, 46px); }
  .invelo-section3-shell .invelo-section3-body, .invelo-section3-shell .invelo-section3-body p { font-size: clamp(15px, 4vw, 17px); }
  .invelo-section3-shell .invelo-section3-eyebrow .elementor-heading-title { font-size: 12px; }
  .e-con.invelo-section3-carousel, .invelo-section3-carousel {
    width: calc(100% + var(--invelo-page-gutter, 22px));
    --width: calc(100% + var(--invelo-page-gutter, 22px));
    overflow-x: auto;
    --overflow: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .invelo-section3-carousel::-webkit-scrollbar { display: none; }
  .e-con.invelo-section3-track, .invelo-section3-track { transform: none; padding-right: var(--invelo-page-gutter, 22px); }
  .e-con.invelo-card, .invelo-card { scroll-snap-align: start; flex-basis: min(78vw, 300px); width: min(78vw, 300px); --width: min(78vw, 300px); min-height: 250px; }
  .invelo-card .invelo-card-number .elementor-heading-title { font-size: 40px; }
  .invelo-card .invelo-card-title .elementor-heading-title { font-size: 15px; }
  .invelo-card .invelo-card-body p { font-size: 14px; }
  .invelo-section3-nav .invelo-section3-arrow .elementor-button { width: 44px; height: 44px; border-radius: 8px; }
  .invelo-section3-nav .invelo-section3-arrow .elementor-button::after { width: 20px; height: 14px; }
}


/* == 6. Editor · reduced motion · no JS ===================================== */
html.invelo-cine-editor .invelo-section3-shell,
body.elementor-editor-active .invelo-section3-shell,
html[data-invelo-cine-motion="reduced"] .invelo-section3-shell,
html:not([data-invelo-cine]) .invelo-section3-shell { height: auto; margin-top: 0; }
html.invelo-cine-editor .invelo-section3-stage,
body.elementor-editor-active .invelo-section3-stage,
html[data-invelo-cine-motion="reduced"] .invelo-section3-stage,
html:not([data-invelo-cine]) .invelo-section3-stage { position: relative; --position: relative; height: auto; border-radius: 0; box-shadow: none; }
html.invelo-cine-editor .invelo-section3-content,
body.elementor-editor-active .invelo-section3-content,
html[data-invelo-cine-motion="reduced"] .invelo-section3-content,
html:not([data-invelo-cine]) .invelo-section3-content { opacity: 1; }
html.invelo-cine-editor .invelo-section3-carousel,
body.elementor-editor-active .invelo-section3-carousel,
html[data-invelo-cine-motion="reduced"] .invelo-section3-carousel,
html:not([data-invelo-cine]) .invelo-section3-carousel { overflow-x: auto; --overflow: auto; scroll-snap-type: x proximity; }
html.invelo-cine-editor .invelo-section3-track,
body.elementor-editor-active .invelo-section3-track,
html[data-invelo-cine-motion="reduced"] .invelo-section3-track,
html:not([data-invelo-cine]) .invelo-section3-track { transform: none; }
html.invelo-cine-editor .invelo-card:first-child,
body.elementor-editor-active .invelo-card:first-child,
html[data-invelo-cine-motion="reduced"] .invelo-card:first-child,
html:not([data-invelo-cine]) .invelo-card:first-child { --invelo-s3-w: 1; }
html.invelo-cine-editor .invelo-section2-stage,
body.elementor-editor-active .invelo-section2-stage,
html[data-invelo-cine-motion="reduced"] .invelo-section2-stage { transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .invelo-section3-shell { height: auto !important; margin-top: 0 !important; }
  .invelo-section3-stage { position: relative !important; height: auto !important; }
  .invelo-section3-track { transform: none !important; }
  .invelo-section2-shell[data-invelo-next="section3"] .invelo-section2-stage { transform: none !important; opacity: 1 !important; }
}

/* == 7. Print ============================================================== */
@media print {
  .invelo-section3-shell { height: auto; margin: 0; }
  .invelo-section3-stage { position: static; background: #fff; box-shadow: none; }
  .invelo-section3-track { transform: none; }
}