/* ============================================================================
   INVELO CINEMATIC ENGINE — section7.css              Sprint 07 · v0.7.0
   ----------------------------------------------------------------------------
   Section 7 — "How Invelo works": scroll-scrubbed spacecraft video FIRST, then
   the heading and four glass process cards reveal around the held final frame.

   MECHANISM (section7.js — Section7Controller + the hero's VideoScrubber):
     .invelo-section7-shell    scroll shell: min-height 100svh + --invelo-s7-scroll
     .invelo-section7-stage    100svh sticky stage (same anchoring as the hero)
     .invelo-section7-media    the <video>, object-fit: contain, full stage
     .invelo-section7-content  the content layer over the video (CSS grid)

   LAYERS:  global header > content (2) > video (1) > black (0)

   PHASES (shell progress p, section7.js CONFIG):  video 0 → 0.68 · hold →
   0.72 · title 0.72 → 0.82 · cards 0.80 → 0.96 (staggered 01 → 04) · hold → 1.
   The controller writes ONE set of custom properties on the shell:
     --invelo-s7-title      0..1   eyebrow / heading / intro reveal
     --invelo-s7-card-01..04 0..1  per-card reveal
   Every rule below is a pure function of those values; without JS (or in the
   editor / reduced motion / video failure) they are 1 → the complete design.

   Elementor owns editorial margin / padding / gap: spacing values below are
   Elementor variable defaults (--padding-*, --margin-*, --gap) at class
   specificity, replaced by the editor controls.
   ========================================================================== */

:root {
  --invelo-s7: var(--invelo-su, 1px);
  --invelo-s7-scroll: 340svh;              /* scroll distance of the whole sequence (video ≈ 68 % of it) */
  --invelo-s7-title: 1;
  --invelo-s7-card-01: 1; --invelo-s7-card-02: 1; --invelo-s7-card-03: 1; --invelo-s7-card-04: 1;
  --invelo-s7-title-travel: 14px;          /* reveal travel: title 14 px up, cards 12 px in from their side */
  --invelo-s7-card-travel: 12px;
  --invelo-s7-ink: #FFFFFF;
  --invelo-s7-muted: rgba(255, 255, 255, 0.78);
  --invelo-s7-orange: #F46F20;
  --invelo-s7-card-radius: calc(16 * var(--invelo-s7));
  /* the design's card field (1728 frame): left column 412, right column 534; cards 350 / 330 wide */
  --invelo-s7-col-left: calc(412 * var(--invelo-s7));
  --invelo-s7-col-right: calc(534 * var(--invelo-s7));
  --invelo-s7-card-w: calc(350 * var(--invelo-s7));
  --invelo-s7-card-w-right: calc(330 * var(--invelo-s7));
}

/* == 1. Shell + stage ====================================================== */
.e-con.invelo-section7-shell,
.invelo-section7-shell {
  position: relative;
  --position: relative;
  background: #000000;
  color: var(--invelo-s7-ink);
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  z-index: 0;
  --z-index: 0;
  isolation: isolate;
}
.invelo-section7-shell[data-s7="armed"] { min-height: calc(100svh + var(--invelo-s7-scroll)); --min-height: calc(100svh + var(--invelo-s7-scroll)); }
.e-con.invelo-section7-stage,
.invelo-section7-stage {
  position: sticky;
  --position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  --min-height: 100svh;
  width: 100%;
  overflow: clip;
  --overflow: clip;
  --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  background: #000000;
}
.invelo-section7-shell[data-invelo-anchor="pin"] .invelo-section7-stage { position: relative; --position: relative; top: auto; }

/* == 2. Video layer: full stage, contained (the black frame merges with the black stage) == */
.invelo-section7-stage > .invelo-section7-media,
.invelo-section7-stage > .elementor-widget.invelo-section7-media {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  z-index: 1;
  pointer-events: none;
}
.invelo-section7-media .elementor-widget-container { position: absolute; inset: 0; height: 100%; }
.invelo-section7-stage .invelo-section7-video,
.elementor .invelo-section7-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  background: #000000;
  pointer-events: none;
  will-change: contents;
}

/* == 3. Content layer: grid — heading block top centre, cards framing the spacecraft == */
.e-con.invelo-section7-content,
.invelo-section7-content {
  position: absolute;
  --position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  --z-index: 2;
  height: 100%;
  display: grid;
  --display: grid;
  grid-template-columns: [left] var(--invelo-s7-col-left) [centre] minmax(0, 1fr) [right] var(--invelo-s7-col-right);
  grid-template-rows: [eyebrow] auto [heading] auto [intro] auto [gap1] 0.65fr [row1] auto [gap2] 1fr [row2] auto [foot] 1fr;
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --padding-top: calc(var(--invelo-header-safe-top, 88px) + 14 * var(--invelo-s7));   /* the top composition sits below the occupied header band */
  --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
  box-sizing: border-box;
  pointer-events: none;                    /* the layer is transparent to scrolling; the cards themselves take pointer events back */
}
.invelo-section7-content > .elementor-widget { --container-widget-width: 100%; width: 100%; max-width: 100%; pointer-events: auto; }
/* heading block: top centre, spanning all columns */
/* heading block: three rows, top centre (design: eyebrow → heading 36 px, heading → intro 8 px on the 1728 frame;
   plain class rules — a widget's Advanced → Margin overrides them) */
.invelo-section7-content > .invelo-section7-eyebrow  { grid-column: 1 / -1; grid-row: eyebrow; justify-self: center; text-align: center; }
.invelo-section7-content > .invelo-section7-heading  { grid-column: 1 / -1; grid-row: heading; justify-self: center; text-align: center; margin-top: calc(36 * var(--invelo-s7)); }
.invelo-section7-content > .invelo-section7-intro    { grid-column: 1 / -1; grid-row: intro;   justify-self: center; text-align: center; max-width: calc(760 * var(--invelo-s7)); margin-top: calc(8 * var(--invelo-s7)); }
/* cards */
.e-con.invelo-section7-card,
.invelo-section7-card {
  position: relative;
  --position: relative;
  width: var(--invelo-s7-card-w);
  --width: var(--invelo-s7-card-w);
  max-width: 100%;
  --padding-top: calc(22 * var(--invelo-s7)); --padding-bottom: calc(22 * var(--invelo-s7));
  --padding-left: calc(24 * var(--invelo-s7)); --padding-right: calc(24 * var(--invelo-s7));
  --gap: calc(12 * var(--invelo-s7)); --row-gap: calc(12 * var(--invelo-s7)); --column-gap: calc(12 * var(--invelo-s7));
  --flex-direction: column;
  --align-items: flex-start;
  align-self: start;                       /* grid rows size to the card's copy — a stretched card would squeeze it */
  pointer-events: auto;
  /* premium glass */
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--invelo-s7-card-radius);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.10);   /* the inset line is the restrained inner highlight */
}
/* a darker glass floor keeps the paragraph readable where the spacecraft's white hull sits behind a card */
.invelo-section7-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(8, 8, 10, 0.34);
  z-index: -1;
  pointer-events: none;
  display: block;
  opacity: 1;
  transform: none;
}
.invelo-section7-card > .elementor-widget { --container-widget-width: 100%; width: 100%; max-width: 100%; flex: 0 0 auto; min-height: 0; }   /* the card grows with its copy — never squeezes it */
.invelo-section7-content > .invelo-section7-card--01 { grid-column: left;  grid-row: row1; justify-self: start; }
.invelo-section7-content > .invelo-section7-card--02 { grid-column: left;  grid-row: row2; justify-self: start; --margin-left: calc(82 * var(--invelo-s7)); --width: var(--invelo-s7-card-w-right); width: var(--invelo-s7-card-w-right); }
.invelo-section7-content > .invelo-section7-card--03 { grid-column: right; grid-row: row1; justify-self: end;   --width: var(--invelo-s7-card-w-right); width: var(--invelo-s7-card-w-right); }
.invelo-section7-content > .invelo-section7-card--04 { grid-column: right; grid-row: row2; justify-self: end;   --margin-right: calc(197 * var(--invelo-s7)); }
@media (hover: hover) {
  .invelo-section7-card:hover { border-color: rgba(255, 255, 255, 0.30); background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.06)); }
}
.invelo-section7-card { transition: border-color 180ms ease, background 180ms ease; }
@media (prefers-reduced-transparency: reduce) {
  .invelo-section7-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 14, 16, 0.92); }
  .invelo-section7-card::before { display: none; }
}

/* == 4. Reveal (pure functions of the controller's custom properties) ======= */
.invelo-section7-content > .invelo-section7-eyebrow,
.invelo-section7-content > .invelo-section7-heading,
.invelo-section7-content > .invelo-section7-intro {
  opacity: var(--invelo-s7-title);
  transform: translateY(calc((1 - var(--invelo-s7-title)) * var(--invelo-s7-title-travel)));
  will-change: opacity, transform;
}
.invelo-section7-card { will-change: opacity, transform; }
.invelo-section7-card--01 { --invelo-s7-c: var(--invelo-s7-card-01); --invelo-s7-dir: -1; }
.invelo-section7-card--02 { --invelo-s7-c: var(--invelo-s7-card-02); --invelo-s7-dir: -1; }
.invelo-section7-card--03 { --invelo-s7-c: var(--invelo-s7-card-03); --invelo-s7-dir: 1; }
.invelo-section7-card--04 { --invelo-s7-c: var(--invelo-s7-card-04); --invelo-s7-dir: 1; }
.invelo-section7-content > .invelo-section7-card {
  opacity: var(--invelo-s7-c);
  transform: translateX(calc((1 - var(--invelo-s7-c)) * var(--invelo-s7-dir) * var(--invelo-s7-card-travel))) scale(calc(0.985 + 0.015 * var(--invelo-s7-c)));
}
/* fully hidden content must not catch the pointer */
.invelo-section7-shell[data-s7-phase="video"] .invelo-section7-card,
.invelo-section7-shell[data-s7-phase="video"] .invelo-section7-content > .elementor-widget,
.invelo-section7-shell[data-s7-phase="hold"] .invelo-section7-card,
.invelo-section7-shell[data-s7-phase="hold"] .invelo-section7-content > .elementor-widget { pointer-events: none; }

/* == 5. Typography ========================================================= */
.invelo-section7 .invelo-section7-eyebrow .elementor-heading-title,
.invelo-section7-content .invelo-section7-eyebrow .elementor-heading-title {
  font-family: var(--invelo-font-body);
  font-size: calc(14 * var(--invelo-s7));
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--invelo-s7-ink);
  margin: 0;
}
.invelo-section7-content .invelo-section7-heading .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: var(--invelo-weight-display, 800);
  font-size: calc(54 * var(--invelo-s7));
  line-height: 1.06;
  letter-spacing: 0;
  color: var(--invelo-s7-ink);
  text-align: center;
  margin: 0;
}
.invelo-section7-brand {
  color: var(--invelo-s7-orange);
  background-image: var(--invelo-hero-gradient-headline, linear-gradient(90deg, #F04E23 0%, #F46F20 45%, #FAA61A 100%));
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .invelo-section7-brand { -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.invelo-section7-content .invelo-section7-intro,
.invelo-section7-content .invelo-section7-intro p {
  font-family: var(--invelo-font-body);
  font-size: calc(15 * var(--invelo-s7));
  font-weight: 400;
  line-height: 1.5;
  color: var(--invelo-s7-muted);
  text-align: center;
  margin: 0;
}
.invelo-section7-card .invelo-section7-card-title .elementor-heading-title {
  font-family: var(--invelo-font-display);
  font-weight: 700;
  font-size: calc(19 * var(--invelo-s7));
  line-height: 1.12;
  color: var(--invelo-s7-orange);
  margin: 0;
}
.invelo-section7-card .invelo-section7-card-body,
.invelo-section7-card .invelo-section7-card-body p {
  font-family: var(--invelo-font-body);
  font-size: calc(13.5 * var(--invelo-s7));
  font-weight: 400;
  line-height: 1.45;
  color: var(--invelo-s7-muted);
  margin: 0;
}
.invelo-section7-card .invelo-section7-card-body p + p { margin-top: calc(10 * var(--invelo-s7)); }

/* == 6. Tablet / phone ===================================================== */
@media (max-width: 1024px) {
  :root { --invelo-s7-scroll: 320svh; --invelo-s7-col-left: 38%; --invelo-s7-col-right: 38%; --invelo-s7-card-w: 100%; --invelo-s7-card-w-right: 100%; }
  /* tablet: the spacecraft in a shorter box under the heading block so the cards frame it rather than cover it */
  .invelo-section7-stage .invelo-section7-video { top: 22svh; height: 62svh; }
  .invelo-section7-content > .invelo-section7-card--02 { --margin-left: 0px; }
  .invelo-section7-content > .invelo-section7-card--04 { --margin-right: 0px; }
  .invelo-section7-content > .invelo-section7-intro { max-width: 88%; }
  .invelo-section7-content .invelo-section7-heading .elementor-heading-title { font-size: clamp(32px, 5.2vw, 48px); }
  .invelo-section7-card .invelo-section7-card-body, .invelo-section7-card .invelo-section7-card-body p { font-size: 13px; }
}
@media (max-width: 767px) {
  /* phones: heading block (top), the spacecraft in a band beneath it, then the four cards in two columns — one screen, video first */
  :root { --invelo-s7-scroll: 300svh; }
  .e-con.invelo-section7-content,
  .invelo-section7-content {
    grid-template-columns: [left] minmax(0, 1fr) [right] minmax(0, 1fr);
    grid-template-rows: [eyebrow] auto [heading] auto [intro] auto [gap1] minmax(19svh, 1fr) [row1] auto [gap2] 8px [row2] auto [foot] 10px;
    --padding-left: 0px; --padding-right: 0px;
    column-gap: 8px; --column-gap: 8px;
    --padding-top: calc(var(--invelo-header-safe-top, 64px) + 6px);
  }
  .invelo-section7-stage .invelo-section7-video { top: 32svh; height: 22svh; object-position: 50% 50%; }
  .invelo-section7-content .invelo-section7-eyebrow .elementor-heading-title { font-size: 11px; }
  .invelo-section7-content > .invelo-section7-heading { margin-top: 8px; }
  .invelo-section7-content > .invelo-section7-intro   { margin-top: 6px; max-width: 32ch; }
  .invelo-section7-content .invelo-section7-heading .elementor-heading-title { font-size: clamp(24px, 6.8vw, 30px); }
  .invelo-section7-content .invelo-section7-intro, .invelo-section7-content .invelo-section7-intro p { font-size: 12px; line-height: 1.4; }
  .invelo-section7-content .invelo-section7-intro br { display: none; }
  .invelo-section7-content > .invelo-section7-card--01 { grid-column: left;  grid-row: row1; }
  .invelo-section7-content > .invelo-section7-card--02 { grid-column: left;  grid-row: row2; --margin-left: 0px; }
  .invelo-section7-content > .invelo-section7-card--03 { grid-column: right; grid-row: row1; }
  .invelo-section7-content > .invelo-section7-card--04 { grid-column: right; grid-row: row2; --margin-right: 0px; }
  .e-con.invelo-section7-card, .invelo-section7-card { --width: 100%; width: 100%; --padding-top: 10px; --padding-bottom: 10px; --padding-left: 11px; --padding-right: 11px; --gap: 5px; --row-gap: 5px; --column-gap: 5px; --invelo-s7-card-radius: 12px; }
  .invelo-section7-card .invelo-section7-card-title .elementor-heading-title { font-size: 12.5px; }
  .invelo-section7-card .invelo-section7-card-title .elementor-heading-title br { display: none; }
  .invelo-section7-card .invelo-section7-card-body, .invelo-section7-card .invelo-section7-card-body p { font-size: 10px; line-height: 1.38; }
  .invelo-section7-card .invelo-section7-card-body p + p { margin-top: 4px; }
}

/* == 7. Editor · reduced motion · video failure · no JS: the complete composition, plain flow == */
html.invelo-cine-editor .invelo-section7-shell,
body.elementor-editor-active .invelo-section7-shell,
html[data-invelo-s7-video="failed"] .invelo-section7-shell { min-height: 0; --min-height: 0px; }
html.invelo-cine-editor .invelo-section7-stage,
body.elementor-editor-active .invelo-section7-stage,
html[data-invelo-s7-video="failed"] .invelo-section7-stage { position: relative; --position: relative; top: auto; }
html.invelo-cine-editor .invelo-section7-shell,
body.elementor-editor-active .invelo-section7-shell,
html[data-invelo-s7-video="failed"] .invelo-section7-shell,
html.invelo-cine-editor .invelo-section7-content,
body.elementor-editor-active .invelo-section7-content,
html[data-invelo-s7-video="failed"] .invelo-section7-content {
  --invelo-s7-title: 1; --invelo-s7-card-01: 1; --invelo-s7-card-02: 1; --invelo-s7-card-03: 1; --invelo-s7-card-04: 1;
}
html.invelo-cine-editor .invelo-section7-content > .invelo-section7-card,
body.elementor-editor-active .invelo-section7-content > .invelo-section7-card { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .e-con.invelo-section7-shell, .invelo-section7-shell { min-height: 0; --min-height: 0px; }
  .e-con.invelo-section7-stage, .invelo-section7-stage { position: relative; --position: relative; top: auto; }
  .invelo-section7-shell, .invelo-section7-content { --invelo-s7-title: 1; --invelo-s7-card-01: 1; --invelo-s7-card-02: 1; --invelo-s7-card-03: 1; --invelo-s7-card-04: 1; }
  .invelo-section7-content > .invelo-section7-eyebrow, .invelo-section7-content > .invelo-section7-heading, .invelo-section7-content > .invelo-section7-intro, .invelo-section7-content > .invelo-section7-card { transition: none; }
}
@media print {
  .invelo-section7-shell { min-height: 0; }
  .invelo-section7-stage { position: static; height: auto; }
}