/* ============================================================================
   INVELO CINEMATIC ENGINE — section2.css        Sprint 02 · Rev 01 · Rev 02 anchoring · v0.2.2
   ----------------------------------------------------------------------------
   Section 2: content reveal + client-logo scroll. Loaded after cinematic.css;
   the approved Hero/Header sheet is not edited.

   WHAT THIS SHEET OWNS (PM Revision 01 §14):
     placement      grid columns / rows on the content canvas, column assignment
     mechanism      scroll shell height, sticky stage, header exclusion line,
                    logo-row clipping, logo-track size + transform, z-order
     colour + type  black / white / gradient / muted / divider / CTA / logo treatment,
                    font roles, sizes, weights, line-heights (kit tokens + --invelo-s2)
     opacity        the reveal pre-state and the static/editor overrides

   WHAT IT DOES NOT OWN: margin, padding, gap. There is not one editorial
   spacing value in this file — no defaults, no hidden variables. Elementor's
   Margin / Padding / Gap controls are empty on every Section 2 element and
   whatever the editor enters (or Elementor's site defaults) is what renders.

   LAYOUT STATES (attribute set by section2.js):
     [data-s2="armed"]   desktop: shell = 100svh + --invelo-s2-scroll, stage
                         sticky, content canvas absolute below the header line
     [data-s2="stack"]   compact: natural Elementor stack, no pin
     (none)              editor · reduced motion · no JS: natural flow, all visible
   ========================================================================== */

:root {
  /* the scroll the locked desktop stage owns (hold, reveal, hold, logo scrub, release) */
  --invelo-s2-scroll: 280svh;
  /* Section 2 type scale = the hero's Figma pixel (floored on short windows, §5) */
  --invelo-s2: var(--invelo-s, 1px);
  --invelo-s2-rule: var(--invelo-soft-border, rgba(255, 255, 255, 0.14));
  /* live logo travel, written by Section2Controller on the shell */
  --invelo-logo-top-x: 0%;
  --invelo-logo-bottom-x: 0%;
  /* header exclusion line: measured (header.getBoundingClientRect().bottom) by
     the engine and written here in px; the fallback is the header band's own
     CSS height so the line exists before the first measurement */
  --invelo-header-safe-top: calc(88 * var(--invelo-su, 1px));
}


/* == 1. Shell + stage (mechanism) ========================================== */
.e-con.invelo-section2-shell,
.invelo-section2-shell {
  position: relative;
  --position: relative;
  padding: 0;                 /* MECHANISM: the shell is the scroll distance; padding here would offset the sticky range */
  background: var(--invelo-black, #000);
  color: var(--invelo-white, #fff);
}
.e-con.invelo-section2-stage,
.invelo-section2-stage {
  position: relative;
  --position: relative;
  padding: 0;                 /* MECHANISM: the stage is the locked viewport; the content canvas positions itself inside it */
  min-height: 100svh;
  overflow: clip;
  --overflow: clip;
}
/* the header exclusion line in the natural-flow states: a structural spacer
   (not padding, not editable spacing) so the first heading starts below the
   fixed header when the section enters */
.invelo-section2-stage::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: var(--invelo-header-safe-top);
}

/* --- desktop, driven: locked stage + content canvas below the header line --- */
.invelo-section2-shell[data-s2="armed"] { height: calc(100svh + var(--invelo-s2-scroll)); }
.invelo-section2-shell[data-s2="armed"] .invelo-section2-stage {
  position: sticky;
  --position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}
.invelo-section2-shell[data-s2="armed"] .invelo-section2-stage::before { display: none; }
/* Rev 02 anchoring: when section2.js switches the stage to its single
   ScrollTrigger pin, sticky is turned OFF here first — one mechanism only. */
.invelo-section2-shell[data-s2="armed"][data-invelo-anchor="pin"] .invelo-section2-stage {
  position: relative;
  --position: relative;
  top: auto;
}
.invelo-section2-shell[data-s2="armed"] .invelo-section2-content {
  position: absolute;
  --position: absolute;
  top: var(--invelo-header-safe-top);      /* the canvas begins BELOW the header */
  bottom: 0;
  left: 0;
  right: 0;
  align-content: safe center;              /* centred in the safe area; never up behind the header */
}


/* == 2. Content canvas: placement (CSS grid) =============================== */
/* The kit container (1440 span, x = 144 at 1728) as a two-column grid:
   left 693 | right 645 from the reference, the gap is the leftover space
   (justify-content), not a gap value. Widgets are direct grid items. */
.e-con.invelo-section2-content,
.invelo-section2-content {
  display: grid;
  --display: grid;
  grid-template-columns: calc(693 * var(--invelo-s2)) calc(645 * var(--invelo-s2));
  grid-template-rows: auto auto auto auto auto;
  justify-content: space-between;
  align-items: start;
  z-index: 1;
}
.invelo-section2-content > .invelo-section2-intro-title { grid-column: 1 / -1; grid-row: 1; }
.invelo-section2-content > .invelo-logo-row--top         { grid-column: 1 / -1; grid-row: 2; }
.invelo-section2-content > .invelo-logo-row--bottom      { grid-column: 1 / -1; grid-row: 3; }
.invelo-section2-content > .invelo-section2-heading      { grid-column: 1;      grid-row: 4; }
.invelo-section2-content > .invelo-section2-aircraft     { grid-column: 1;      grid-row: 5; }
.invelo-section2-content > .invelo-section2-right        { grid-column: 2;      grid-row: 4 / span 2; }
/* a grid item that is a widget: full cell width */
.invelo-section2-content > .elementor-widget { --container-widget-width: 100%; width: 100%; max-width: 100%; }
/* nested containers inside the canvas keep their natural (column) flow */
.e-con.invelo-section2-right { --display: flex; --flex-direction: column; min-width: 0; }


/* == 3. Reveal pre-state (opacity only — nothing ever moves) =============== */
.invelo-section2-shell[data-s2="armed"] .invelo-section2-intro-title,
.invelo-section2-shell[data-s2="armed"] .invelo-logo-row,
.invelo-section2-shell[data-s2="armed"] .invelo-section2-line,
.invelo-section2-shell[data-s2="armed"] .invelo-section2-aircraft,
.invelo-section2-shell[data-s2="armed"] .invelo-section2-goal,
.invelo-section2-shell[data-s2="armed"] .invelo-section2-divider,
.invelo-section2-shell[data-s2="armed"] .invelo-section2-body,
.invelo-section2-shell[data-s2="armed"] .invelo-section2-question,
.invelo-section2-shell[data-s2="armed"] .invelo-section2-cta,
.invelo-section2-shell[data-s2="stack"] .invelo-section2-intro-title,
.invelo-section2-shell[data-s2="stack"] .invelo-logo-row,
.invelo-section2-shell[data-s2="stack"] .invelo-section2-heading,
.invelo-section2-shell[data-s2="stack"] .invelo-section2-aircraft,
.invelo-section2-shell[data-s2="stack"] .invelo-section2-right > .elementor-widget { opacity: 0; }


/* == 4. Typography + colour (kit roles; no spacing) ======================== */
.invelo-section2-shell .invelo-section2-intro-title .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(30 * var(--invelo-s2));
  line-height: 1.28;
  letter-spacing: 0;
  text-align: center;
  color: var(--invelo-white, #fff);
}
.invelo-section2-brand {
  color: #F4762A;
  background-image: var(--invelo-brand-gradient);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .invelo-section2-brand { -webkit-background-clip: text; background-clip: text; color: transparent; }
}
@media (forced-colors: active) {
  .invelo-section2-brand { background-image: none; -webkit-background-clip: border-box; background-clip: border-box; color: CanvasText; }
}

.invelo-section2-shell .invelo-section2-heading .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(84 * var(--invelo-s2));
  line-height: 1.05;
  letter-spacing: 0;
  text-align: left;
  color: var(--invelo-white, #fff);
}
.invelo-section2-line { display: block; }
.invelo-section2-line.invelo-section2-brand { width: fit-content; }

/* aircraft: a replaceable Image widget; the box crops, never the source */
.invelo-section2-shell .invelo-section2-aircraft { line-height: 0; text-align: left; }
.invelo-section2-shell .invelo-section2-aircraft img,
.invelo-section2-shell .invelo-section2-aircraft a {
  display: block;
  width: 100%;
  aspect-ratio: 693 / 285;
  height: auto;
  object-fit: cover;
  border-radius: calc(20 * var(--invelo-s2));
  background: #120806;
}

.invelo-section2-shell .invelo-section2-goal .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-weight: 400;
  font-size: calc(28 * var(--invelo-s2));
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  color: var(--invelo-white, #fff);
}
/* Divider widget: the rule itself (colour from the kit token; the widget's own
   Gap control stays Elementor's) */
.invelo-section2-shell .invelo-section2-divider .elementor-divider-separator {
  display: block;
  width: var(--divider-width, 100%);
  border-top: var(--divider-border-width, 1px) solid var(--divider-color, var(--invelo-s2-rule));
}

.invelo-section2-shell .invelo-section2-body {
  font-family: var(--invelo-font-body);
  font-size: calc(18 * var(--invelo-s2));
  line-height: 1.62;
  color: var(--invelo-text-muted, rgba(255, 255, 255, 0.72));
}
.invelo-section2-shell .invelo-section2-body p { font: inherit; color: inherit; }

.invelo-section2-shell .invelo-section2-question .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-weight: 600;
  font-size: calc(22 * var(--invelo-s2));
  line-height: 1.42;
  text-align: left;
  color: var(--invelo-white, #fff);
}

/* CTA: the hero CTA construction at the comp's size (kit pill + gradient + dark ink) */
.invelo-section2-shell .invelo-section2-cta { line-height: 0; }
.invelo-section2-shell .invelo-section2-cta .elementor-button-wrapper { display: block; text-align: left; }
.invelo-section2-shell .invelo-section2-cta .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(336 * var(--invelo-s2));
  height: calc(66 * var(--invelo-s2));
  min-height: 0;
  padding: 0 0 0 calc(24 * var(--invelo-s2));   /* label inset inside the pill — component geometry, not layout spacing */
  border-radius: var(--invelo-radius-pill, 999px);
  background-image: var(--invelo-brand-gradient);
  color: var(--invelo-cta-ink, #111111);
  font-family: var(--invelo-font-body);
  font-size: calc(17 * var(--invelo-s2));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 0 calc(46 * var(--invelo-s2)) rgba(244, 118, 32, calc(0.42 * var(--invelo-s2-cta-glow, 1)));
  transition: transform .2s ease;
}
.invelo-section2-shell .invelo-section2-cta .elementor-button:hover { transform: translateY(calc(-2 * var(--invelo-s2))); color: var(--invelo-cta-ink, #111111); }
.invelo-section2-shell .invelo-section2-cta .elementor-button-content-wrapper { display: block; }
.invelo-section2-shell .invelo-section2-cta .elementor-button::after {
  content: "";
  position: absolute;
  right: calc(4 * var(--invelo-s2));
  top: calc(4 * var(--invelo-s2));
  width: calc(58 * var(--invelo-s2));
  height: calc(58 * var(--invelo-s2));
  border-radius: 50%;
  background: #FFFFFF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 22'><path d='M0.5 11H28M18 1.6 28.6 11 18 20.4' fill='none' stroke='%23000' stroke-width='2'/></svg>") center / calc(26 * var(--invelo-s2)) calc(19 * var(--invelo-s2)) no-repeat;
  pointer-events: none;
}
.invelo-section2-shell :where(a, button):focus-visible {
  outline: max(2px, calc(2 * var(--invelo-s2))) solid var(--invelo-focus-color, #FFFFFF);
  outline-offset: max(3px, calc(3 * var(--invelo-s2)));
}


/* == 5. Client logo rows (mechanism + treatment) =========================== */
/* row = clipping viewport; track = the element the engine translates. The
   track is wider than its row and hangs off both sides (structural offset via
   `left`, not a margin), so ±7 % desktop / ±14 % compact never exposes an
   empty edge and no logo is repeated in the readable middle. */
.e-con.invelo-logo-row,
.invelo-logo-row { overflow: hidden; --overflow: hidden; --display: block; }
.e-con.invelo-logo-track,
.invelo-logo-track {
  position: relative;
  --position: relative;
  --display: flex;
  --flex-direction: row;
  --align-items: center;
  --justify-content: center;
  width: 118%;
  --width: 118%;
  max-width: none;
  left: -9%;
  flex-wrap: nowrap;
  will-change: transform;
}
.e-con.invelo-logo-track--bottom { --justify-content: space-between; }
.invelo-logo-track--top    { transform: translateX(var(--invelo-logo-top-x, 0%)); }
.invelo-logo-track--bottom { transform: translateX(var(--invelo-logo-bottom-x, 0%)); }
.invelo-logo-track .elementor-widget.invelo-logo {
  --container-widget-width: auto;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  line-height: 0;
  text-align: center;
}
.invelo-logo-track .invelo-logo img {
  display: block;
  height: calc(40 * var(--invelo-s2));
  width: auto;
  max-width: none;
  filter: grayscale(1) brightness(1.9);     /* the comp's treatment — CSS only */
  opacity: 0.62;
}
.invelo-logo-track .invelo-logo--placeholder img { filter: none; opacity: 1; }

.invelo-sr-only,
.invelo-sr-only .elementor-heading-title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}


/* == 6. Short desktop (type floor) ========================================= */
@media (min-width: 1025px) and (min-aspect-ratio: 11/10) and (min-height: 561px) and (max-height: 820px),
       (min-width: 1025px) and (max-width: 1180px) and (min-aspect-ratio: 11/10) and (min-height: 561px) {
  :root { --invelo-s2: min(var(--invelo-u, var(--invelo-s, 1px)), calc((100svh - 120px) / 740)); }
  .invelo-section2-shell .invelo-section2-heading .elementor-heading-title { font-size: calc(66 * var(--invelo-s2)); }
  .invelo-section2-shell .invelo-section2-aircraft img { aspect-ratio: 693 / 240; }
  .invelo-section2-shell .invelo-section2-body { font-size: calc(16 * var(--invelo-s2)); }
  .invelo-section2-shell .invelo-section2-question .elementor-heading-title { font-size: calc(20 * var(--invelo-s2)); }
}


/* == 7. Compact (≤1024 = Elementor tablet breakpoint, portrait, ≤560 tall) =
   Natural Elementor stack in one grid column, in DOM order: intro, logo rows,
   headline, aircraft, right column. Type steps down; spacing stays the
   editor's (Elementor's responsive Margin/Padding/Gap controls).
   ------------------------------------------------------------------------- */
@media not all and (min-width: 1025px) and (min-aspect-ratio: 11/10),
       (max-height: 560px) {
  :root { --invelo-s2: 1px; }

  .invelo-section2-shell[data-s2="armed"] { height: auto; }
  .invelo-section2-shell[data-s2="armed"] .invelo-section2-stage { position: relative; --position: relative; height: auto; min-height: 100svh; }
  .invelo-section2-shell[data-s2="armed"] .invelo-section2-content { position: relative; --position: relative; top: auto; bottom: auto; }
  .invelo-section2-shell[data-s2="armed"] .invelo-section2-stage::before { display: block; }
  .e-con.invelo-section2-stage, .invelo-section2-stage { overflow: visible; --overflow: visible; }

  .e-con.invelo-section2-content,
  .invelo-section2-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .invelo-section2-content > .invelo-section2-intro-title,
  .invelo-section2-content > .invelo-logo-row--top,
  .invelo-section2-content > .invelo-logo-row--bottom,
  .invelo-section2-content > .invelo-section2-heading,
  .invelo-section2-content > .invelo-section2-aircraft,
  .invelo-section2-content > .invelo-section2-right { grid-column: 1; grid-row: auto; }

  .invelo-section2-shell .invelo-section2-intro-title .elementor-heading-title { font-size: clamp(20px, 5.6vw, 30px); line-height: 1.3; }
  .e-con.invelo-logo-track, .invelo-logo-track { width: 190%; --width: 190%; left: -45%; }
  .invelo-logo-track .invelo-logo img { height: clamp(24px, 6.4vw, 34px); }
  .invelo-section2-shell .invelo-section2-heading .elementor-heading-title { font-size: clamp(38px, 11vw, 64px); line-height: 1.04; }
  .invelo-section2-shell .invelo-section2-aircraft img { border-radius: 16px; }
  .invelo-section2-shell .invelo-section2-goal .elementor-heading-title { font-size: clamp(19px, 5.2vw, 26px); }
  .invelo-section2-shell .invelo-section2-body { font-size: clamp(15px, 4.1vw, 18px); line-height: 1.6; }
  .invelo-section2-shell .invelo-section2-question .elementor-heading-title { font-size: clamp(18px, 5vw, 22px); }
  .invelo-section2-shell .invelo-section2-cta .elementor-button {
    width: min(100%, 336px);
    height: clamp(56px, 15vw, 66px);
    padding-left: clamp(18px, 5vw, 24px);
    font-size: clamp(15px, 4.1vw, 17px);
    box-shadow: 0 0 34px rgba(244, 118, 32, calc(0.42 * var(--invelo-s2-cta-glow, 1)));
  }
  .invelo-section2-shell .invelo-section2-cta .elementor-button::after {
    right: clamp(4px, 1.2vw, 5px);
    top: 50%;
    translate: 0 -50%;
    width: clamp(48px, 13vw, 58px);
    height: clamp(48px, 13vw, 58px);
    background-size: 20px 15px;
  }
}


/* == 8. Editor · reduced motion · no JS ==================================== */
/* all three are "not armed": natural flow, everything visible (§1, §3). The
   overrides below also neutralise inline state GSAP may have left if the
   mode changes mid-session. */
html.invelo-cine-editor .invelo-section2-shell,
body.elementor-editor-active .invelo-section2-shell,
html[data-invelo-cine-motion="reduced"] .invelo-section2-shell { height: auto; }
html.invelo-cine-editor .invelo-section2-stage,
body.elementor-editor-active .invelo-section2-stage,
html[data-invelo-cine-motion="reduced"] .invelo-section2-stage { position: relative; --position: relative; height: auto; }
html.invelo-cine-editor .invelo-section2-content,
body.elementor-editor-active .invelo-section2-content,
html[data-invelo-cine-motion="reduced"] .invelo-section2-content { position: relative; --position: relative; top: auto; bottom: auto; }
html.invelo-cine-editor .invelo-section2-shell .elementor-widget,
html.invelo-cine-editor .invelo-section2-shell .invelo-logo-row,
html.invelo-cine-editor .invelo-section2-shell .invelo-section2-line,
html.invelo-cine-editor .invelo-logo-track,
body.elementor-editor-active .invelo-section2-shell .elementor-widget,
body.elementor-editor-active .invelo-section2-shell .invelo-logo-row,
body.elementor-editor-active .invelo-section2-shell .invelo-section2-line,
body.elementor-editor-active .invelo-logo-track,
html[data-invelo-cine-motion="reduced"] .invelo-section2-shell .elementor-widget,
html[data-invelo-cine-motion="reduced"] .invelo-section2-shell .invelo-logo-row,
html[data-invelo-cine-motion="reduced"] .invelo-section2-shell .invelo-section2-line,
html[data-invelo-cine-motion="reduced"] .invelo-logo-track {
  opacity: 1 !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .invelo-section2-shell { height: auto !important; }
  .invelo-section2-stage { position: relative !important; height: auto !important; }
  .invelo-section2-content { position: relative !important; top: auto !important; }
  .invelo-logo-track { transform: none !important; }
  .invelo-section2-cta .elementor-button { transition: none; }
}
/* the editor's header is in flow, so the exclusion spacer is not needed there */
body.elementor-editor-active .invelo-section2-stage::before { display: none; }


/* == 8b. QA demo pages end at the settled state (Rev 02 §10) ================
   The plugin adds body.invelo-cine-demo to the two private demo pages. The
   theme footer would otherwise add trailing scroll after Section 2's last
   locked moment and push the composition up behind the header. Demo pages
   only — production pages keep their footer. */
body.invelo-cine-demo .site-footer,
body.invelo-cine-demo footer.site-footer,
body.invelo-cine-demo > footer,
body.invelo-cine-demo .elementor-location-footer { display: none; }
body.invelo-cine-demo { margin: 0; }


/* == 9. Print ============================================================== */
@media print {
  .invelo-section2-shell { height: auto; background: #fff; color: #000; }
  .invelo-section2-stage { position: static; min-height: 0; overflow: visible; }
  .invelo-section2-content { position: static; }
  .invelo-section2-shell .elementor-heading-title, .invelo-section2-body { color: #000 !important; }
  .invelo-logo-track { transform: none; }
}