/*
 * Design tokens from the Routific Website Figma file (variables on node 7166:92349).
 * Code components render inside Shadow DOM, so tokens are declared on :host as well as :root
 * (:root covers the local preview and Webflow's own page; :host covers the shadow tree).
 */
:host,
:host {
  /* Brand */
  --rt-indigo-100: #374cd2;
  --rt-indigo-200: #667afa;
  --rt-yellow-200: #ffad0a;
  --rt-yellow-border: #b97b01;
  --rt-turquoise: #45c4d7;
  --rt-primary-500: #326bfc;
  --rt-primary-600: #1750e3;
  --rt-hero-blue: #1f36a7;
  --rt-hero-lilac: #eceefb;

  /* Text */
  --rt-text-primary: #282828;
  --rt-text-secondary: #676d7e;
  --rt-text-tertiary: #9da1af;

  /* Route colours */
  --rt-route-violet: #7547bf;
  --rt-route-pink: #ff85a9;
  --rt-route-sky: #269ed1;
  --rt-route-lilac: #a770db;

  /* Type — Proxima Nova is expected to be loaded by the Webflow site (Adobe Fonts);
     Plus Jakarta Sans and Figtree are loaded from Google Fonts by useDocumentFonts(). */
  --rt-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --rt-font-heading: "Figtree", system-ui, sans-serif;
  --rt-font-body: "proxima-nova", "Proxima Nova", "Figtree", system-ui, sans-serif;
  --rt-font-ui: "SF Pro Text", -apple-system, "Inter", system-ui, sans-serif;

  /* Radii */
  --rt-radius-md: 8px;
  --rt-radius-lg: 16px;

  /* Vector map (Hero/showcase/MapBase.tsx): Mapbox-light look of the current Routific UI */
  --map-land: #edeff3;
  --map-street: #fcfdfe;
  --map-park: #d3e9d1;
  --map-water: #b3caf3;
  --map-industrial: #f2e4c6;
  --map-highway: #aab3c7;
  --map-highway-edge: #fcfdfe;
}

/* ---------------------------------------------------------------------------
 * "Need just our algo?" — developer band: copy + CTAs + facts left, editor window right.
 * The window is the dev.routific.com hero (map pane + code), sized in container units.
 * ------------------------------------------------------------------------- */
.rt-ea {
  --ea-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  position: relative;
  color: #fff;
  font-family: var(--rt-font-body);
  -webkit-font-smoothing: antialiased;
}

/* The navy surface: the whole section (band) or a rounded card (card) */
.rt-ea-surface {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 85% 40%, rgba(50, 107, 252, 0.28), transparent 70%),
    radial-gradient(40% 60% at 10% 90%, rgba(55, 76, 210, 0.3), transparent 70%),
    #0d1640;
}

/* faint dot grid */
.rt-ea-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  mask-image: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent);
  pointer-events: none;
}

/* ---- Card layout: continues Integrations' lavender (#f3f5ff), fading to white below ---- */
.rt-ea--card {
  padding: 0 24px 96px;
  background: linear-gradient(to bottom, #f3f5ff 0, #f3f5ff 55%, #fff 100%);
}


.rt-ea--card .rt-ea-surface {
  max-width: 1120px;
  margin: 0 auto;
  border-radius: 32px;
  box-shadow: 0 24px 48px rgba(13, 22, 64, 0.22);
}

.rt-ea--card .rt-ea-inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 48px;
  padding: 72px 56px 72px 64px;
}

@media (min-width: 992px) {
  .rt-ea--card .rt-ea-stats {
    gap: 32px;
  }
  .rt-ea--card .rt-ea-stats dd {
    white-space: nowrap;
  }
}

.rt-ea *,
.rt-ea *::before,
.rt-ea *::after {
  box-sizing: border-box;
}

.rt-ea-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 64px;
  max-width: calc(1120px + 2 * 24px);
  margin: 0 auto;
  padding: 128px 24px;
}

/* ---- Copy ---- */
.rt-ea-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
  min-width: 0;
}

.rt-ea-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rt-ea-eyebrow {
  margin: 0;
  font-family: var(--ea-mono);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8fa2ff;
}

.rt-ea-h2 {
  margin: 0;
  font-family: var(--rt-font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.4rem + 2.2vw, 3rem);
  line-height: 1.2;
}

.rt-ea-body {
  margin: 0;
  font-size: 18px;
  line-height: 28px;
  color: #c8d0ff;
}

.rt-ea-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.rt-ea-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--rt-radius-lg);
  font-family: var(--rt-font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.rt-ea-btn:hover {
  transform: translateY(-1px);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.rt-ea-btn-primary {
  border-color: var(--rt-yellow-border);
  background: var(--rt-yellow-200);
  color: #18191d;
}

.rt-ea-btn-primary:hover {
  border-color: var(--rt-yellow-border);
  background: var(--rt-yellow-200);
  box-shadow: 0 8px 20px rgba(255, 173, 10, 0.25);
}

.rt-ea-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.rt-ea-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  justify-content: start;
  gap: 40px;
  width: 100%;
  margin: 4px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.rt-ea-stats dt {
  font-family: var(--ea-mono);
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  color: #fff;
}

.rt-ea-stats dd {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 20px;
  color: #9aa8f0;
}

/* ---- Editor window (container units: --u = 1/640 of its width) ---- */
.rt-ea-window {
  container-type: inline-size;
  min-width: 0;
}

.rt-ea-chrome,
.rt-ea-panes {
  --u: calc(100cqw / 640);
}

.rt-ea-chrome {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(40 * var(--u));
  padding: 0 calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  background: #0a2447;
}

.rt-ea-dot {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: 50%;
  background: #ff5f57;
}
.rt-ea-dot:nth-child(2) { background: #febc2e; }
.rt-ea-dot:nth-child(3) { background: #28c840; margin-right: calc(14 * var(--u)); }

.rt-ea-tab {
  padding: calc(5 * var(--u)) calc(12 * var(--u));
  border-radius: calc(7 * var(--u));
  font-family: var(--ea-mono);
  font-size: calc(12 * var(--u));
  line-height: calc(16 * var(--u));
  background: #001b3c;
  color: #e6ecff;
}

.rt-ea-panes {
  display: grid;
  grid-template-columns: 40% 60%;
  height: calc(500 * var(--u));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-radius: 0 0 calc(14 * var(--u)) calc(14 * var(--u));
  background: #001b3c;
  box-shadow: 0 30px 60px rgba(3, 8, 40, 0.55);
}

.rt-ea-map {
  display: block;
  width: 100%;
  height: 100%;
}

.rt-ea-route {
  fill: none;
  stroke-width: 2.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.rt-ea-pin,
.rt-ea-driver {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.rt-ea-driver {
  transform-origin: center;
}

/* ---- Code ---- */
.rt-ea-codepane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.rt-ea-code {
  position: relative;
  margin: 0;
  padding: calc(22 * var(--u)) calc(24 * var(--u));
  overflow: hidden;
  font-family: var(--ea-mono);
  font-size: calc(12.5 * var(--u));
  line-height: calc(18 * var(--u));
  color: #d6deff;
  white-space: pre;
}

.rt-ea-line {
  display: block;
  width: max-content;
}

.rt-ea-t-c { color: #6f84b5; font-style: italic; }
.rt-ea-t-k { color: #ff47a7; }
.rt-ea-t-f { color: #50e3c2; }
.rt-ea-t-s { color: #ffbc00; }
.rt-ea-t-n { color: #8be9fd; }
.rt-ea-t-p { color: #a9b4d6; }

.rt-ea-out {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #00142e;
}

.rt-ea-out-head {
  display: flex;
  justify-content: space-between;
  padding: calc(10 * var(--u)) calc(24 * var(--u)) 0;
  font-family: var(--ea-mono);
  font-size: calc(10.5 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6f84b5;
}

.rt-ea-status {
  color: #28c840;
}

.rt-ea-json {
  padding-top: calc(8 * var(--u));
  padding-bottom: calc(16 * var(--u));
}

/* "Optimizing…" shows only while the demo plays (final state: the JSON) */
.rt-ea-optimizing {
  position: absolute;
  top: calc(8 * var(--u));
  left: calc(24 * var(--u));
  color: #ffbc00;
  opacity: 0;
}

.rt-ea-dots::after {
  content: "…";
}

/* ---- Responsive (only the 1440 layout exists in Figma) ---- */
@media (max-width: 991px) {
  .rt-ea-inner,
  .rt-ea--card .rt-ea-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding: 96px 24px;
  }
  .rt-ea--card .rt-ea-inner {
    padding: 56px 40px;
  }
  .rt-ea-window {
    width: 100%;
    max-width: 680px;
  }
}

@media (max-width: 599px) {
  .rt-ea-inner {
    padding: 72px 16px;
  }
  .rt-ea--card {
    padding: 0 16px 72px;
  }
  .rt-ea--card .rt-ea-surface {
    border-radius: 24px;
  }
  .rt-ea--card .rt-ea-inner {
    padding: 40px 20px;
  }
  .rt-ea-stats {
    gap: 20px;
  }
  .rt-ea-stats dt {
    font-size: 20px;
  }
  .rt-ea-stats dd {
    font-size: 13px;
  }
}

/* Narrow window: code only, larger units so the text stays readable */
@container (max-width: 520px) {
  .rt-ea-chrome,
  .rt-ea-panes {
    --u: calc(100cqw / 400);
  }
  .rt-ea-panes {
    grid-template-columns: 1fr;
    height: auto;
  }
  .rt-ea-map {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Motion. Every animated piece is .rt-ea-a with an inline animation-name/delay (EngineApi.tsx,
 * TIMELINE). Base styles are the final state; .is-armed (client only) hides them until they play.
 * ------------------------------------------------------------------------- */
@keyframes rt-ea-type {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes rt-ea-show {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rt-ea-drop {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
@keyframes rt-ea-pop {
  0% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: none; }
}
@keyframes rt-ea-draw {
  from { stroke-dasharray: 1 2; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
}
@keyframes rt-ea-window {
  0% { opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes rt-ea-dots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "…"; }
}

.rt-ea-a {
  animation-duration: 0.35s;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  animation-play-state: paused;
}

.rt-ea:not(.rt-ea-animate) .rt-ea-a,
.rt-ea-animate:not(.is-armed) .rt-ea-a {
  animation-name: none !important;
}

.rt-ea-animate.is-inview .rt-ea-a {
  animation-play-state: running;
}

.rt-ea-animate.is-inview .rt-ea-dots::after {
  animation: rt-ea-dots 0.8s steps(1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rt-ea *,
  .rt-ea *::before,
  .rt-ea *::after {
    animation: none !important;
    transition: none !important;
  }
}