/* Engine 3D mockup: the stage is a real 3D scene (three.js) instead of CSS plates. */
.engine__stage { perspective: none; }
/* The canvas fills the whole pinned screen behind the text, so the scene is never clipped. */
#eng3d, .eng-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.engine__grid { position: relative; z-index: 1; }
.eng-caption { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); margin: 0; display: flex; gap: 28px; font-family: var(--mono); font-size: 12px; color: #5a6377; opacity: var(--cap, 0); pointer-events: none; white-space: nowrap; }
.eng-caption span { display: inline-flex; align-items: center; gap: 8px; }
.eng-caption span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

/* Layout: the text sits above, the 3D scene fills the middle of the page. */
.engine__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: stretch; justify-items: center; padding-top: clamp(16px, 3vh, 36px); }
.engine__copy { width: 100%; max-width: 1040px; height: clamp(150px, 19vh, 200px); text-align: center; }
.eng-txt { align-items: center; justify-content: flex-start; }
.engine__title { max-width: none; }
.eng-p { margin-left: auto; margin-right: auto; max-width: 46ch; }
.engine__stage { width: 100%; min-height: 0; }
/* Seven steps now (intro, Competitions, Challenges, Leaderboard, Reward, Connected, Engine). */
.engine { height: calc(100vh + 6 * 80vh); }

/* The demo button arrives with the finished chip. */
.eng-cta { align-self: center; margin-top: 20px; opacity: var(--cap, 0); pointer-events: none; transition: none; }
.eng-cta.is-on { pointer-events: auto; }

/* Still chip, shown only if the 3D cannot start. */
.eng-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; }
.eng-fallback__lid { width: min(520px, 80%); aspect-ratio: 5.2 / 3.4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 14px; background: #f1f3f6; box-shadow: inset 0 0 0 1px rgba(10, 16, 32, 0.08), inset 0 0 0 26px #f7f8fa, inset 0 0 0 27px rgba(10, 16, 32, 0.06); }
.eng-fallback__lid img { width: 46%; height: auto; opacity: 0.85; }
.eng-fallback__lid span { font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--blue); }
html.eng3d-failed .eng-fallback { display: flex; }
html.eng3d-failed #eng3d, html.eng3d-failed .eng-canvas { display: none; }
html.eng3d-failed .eng-txt { opacity: 0; }
html.eng3d-failed .eng-txt[data-c="6"] { opacity: 1; }
html.eng3d-failed .engine { --cap: 1; }
html.eng3d-failed .eng-cta { pointer-events: auto; }

/* Sound switch, bottom right of the engine card. One small neutral shadow, no glow. */
.eng-sound { position: absolute; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border: 1px solid rgba(10, 16, 32, 0.1); border-radius: 999px; background: #fff; color: #5a6377; font: 500 12px/1 var(--mono); cursor: pointer; box-shadow: 0 1px 2px rgba(10, 16, 32, 0.06); transition: color 160ms ease-out, border-color 160ms ease-out, transform 160ms ease-out; }
.eng-sound:hover { color: #0a1020; border-color: rgba(10, 16, 32, 0.22); }
.eng-sound:active { transform: scale(0.97); }
.eng-sound:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.eng-sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.eng-sound svg path:first-child { fill: currentColor; stroke: none; }
.eng-sound[aria-pressed="true"] { color: var(--blue); border-color: rgba(7, 81, 251, 0.35); }

/* Every step title carries one highlight in brand blue; descriptions stay on one line. */
.engine .eng-h em, .engine .engine__title em { font-style: normal; color: var(--blue); }
.engine .eng-p { max-width: 64ch; }
@media (min-width: 900px) { .engine .eng-p { max-width: none; white-space: nowrap; } }

/* The integrations scene: five steps (0..4). */
.engine.engine--int { height: calc(100vh + 4 * 80vh); }
/* Switch between the two ways data reaches the engine: tabs centred below the title (placed by JS).
   The blue dot on eMotion pulses: it is the live technology. */
.int-switch { position: absolute; left: 0; top: 0; z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid rgba(10, 16, 32, 0.1); box-shadow: 0 1px 2px rgba(10, 16, 32, 0.06); opacity: 0; will-change: transform, opacity; }
.int-switch button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #5a6377; font: 600 14px/1 var(--body, "Instrument Sans"), sans-serif; cursor: pointer; transition: background-color 160ms ease-out, color 160ms ease-out, transform 160ms ease-out; }
.int-switch button:hover { color: #0a1020; }
.int-switch button:active { transform: scale(0.97); }
.int-switch button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.int-switch button[aria-pressed="true"] { background: #eef3ff; color: var(--blue); }
.int-switch button i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: int-live 1.6s ease-in-out infinite; }
@keyframes int-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .int-switch button i { animation: none; } }

/* Title under the eMotion chip, placed by JS. */
.int-chip-title { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap; font: 600 14px/1 var(--mono); color: var(--blue); opacity: 0; will-change: transform, opacity; }

/* The engine with the integrations after it, as one continuous scene (deck): eleven steps. */
.engine[data-steps="10"] { height: calc(100vh + 10 * 80vh); }

/* Callouts on the plate (steps 1 to 5): a small card beside the plate, a thin line and a dot on the
   feature. engine3d.js places them every frame and toggles .is-on; the entrance is timed, not scrubbed. */
.eng-callouts { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.eng-callouts__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eng-co { position: absolute; left: 0; top: 0; box-sizing: border-box; width: 232px; padding: 14px 16px; border-radius: 10px; background: #fff; border: 1px solid rgba(10, 16, 32, 0.09); box-shadow: 0 1px 2px rgba(10, 16, 32, 0.06); opacity: 0; transition: opacity 140ms ease-in, translate 140ms ease-in; }
.eng-co[data-side="left"] { translate: -4px 0; }
.eng-co[data-side="right"] { translate: 4px 0; }
.eng-co.is-on { opacity: 1; translate: 0 0; transition: opacity 220ms cubic-bezier(0.23, 1, 0.32, 1) calc(240ms + var(--co-d, 0ms)), translate 220ms cubic-bezier(0.23, 1, 0.32, 1) calc(240ms + var(--co-d, 0ms)); }
.eng-co[data-side="left"]:not(.is-on) { translate: -8px 0; }
.eng-co[data-side="right"]:not(.is-on) { translate: 8px 0; }
.eng-co__t { margin: 0; font-family: var(--display); font-stretch: var(--display-stretch, 112%); font-weight: 600; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; color: #0a1020; }
.eng-co__p { margin: 4px 0 0; font-family: var(--body); font-size: 13px; line-height: 1.45; color: #5a6478; }
.eng-co__line { fill: none; stroke: rgba(7, 81, 251, 0.45); stroke-width: 1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: opacity 140ms ease-in; }
.eng-co__line.is-on { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 260ms cubic-bezier(0.23, 1, 0.32, 1) calc(80ms + var(--co-d, 0ms)), opacity 1ms linear calc(80ms + var(--co-d, 0ms)); }
.eng-co__dot { fill: #0751fb; stroke: #fff; stroke-width: 4; paint-order: stroke; opacity: 0; transform: scale(0.4); transition: opacity 140ms ease-in; }
.eng-co__dot.is-on { opacity: 1; transform: scale(1); transition: opacity 160ms ease-out var(--co-d, 0ms), transform 160ms ease-out var(--co-d, 0ms); }
@media (max-width: 1320px) { .eng-co { width: 208px; } }
@media (prefers-reduced-motion: reduce) {
  .eng-co, .eng-co.is-on, .eng-co__dot, .eng-co__dot.is-on { translate: none; transform: none; transition: opacity 120ms linear; }
  .eng-co__line, .eng-co__line.is-on { stroke-dashoffset: 0; transition: opacity 120ms linear; }
}

/* 04 One engine: Compete, Rank, Rewards, Connect stand in a column on the left for the whole
   section, the one for the step on screen in ink; the 3D scene is centred in the space to their right
   (engine3d.js and integrate3d.js measure the words). */
.engine__grid { grid-template-rows: 1fr; }
.engine__copy { position: absolute; left: var(--gutter); top: 0; bottom: 0; z-index: 2; width: min(36%, 470px); height: auto; max-width: none; display: flex; align-items: center; text-align: left; pointer-events: none; }
.eng-a { position: relative; pointer-events: auto; }
#engine .eng-a .eng-eyebrow.feat__idx { display: flex; justify-content: flex-start; align-items: baseline; gap: 12px; margin: 0 0 22px; font-family: var(--body); font-size: 14px; color: var(--slate); }
.eng-verbs { margin: 0; font-family: var(--display); font-stretch: var(--display-stretch, 112%); font-weight: 800; font-size: clamp(48px, 4.8vw, 74px); line-height: 1.02; letter-spacing: -0.03em; }
.eng-verbs span { display: block; width: fit-content; color: color-mix(in srgb, var(--ink) 15%, transparent); transition: color 420ms cubic-bezier(0.23, 1, 0.32, 1); }
.eng-verbs span.is-on { color: var(--ink); }
.eng-a .eng-cta { position: absolute; left: 0; top: calc(100% + 28px); margin: 0; align-self: auto; white-space: nowrap; }
.eng-caption { left: 70%; }
@media (prefers-reduced-motion: reduce) { .eng-verbs span { transition: none; } }