/* The three problems under "Your technology scales": each a row with a before/With OTTO picture and its
   explanation. Rows alternate sides on desktop, as main's split sections do; on phones the picture sits
   above its text. The slider: the With OTTO picture is revealed over the Before picture along an amber
   line held by OTTO's bubble, from the left, or from the right in a before-first row. Drag anywhere on
   the picture; tap the bubble, or choose Before or With OTTO, to see one picture whole. */

/* Squared paper from ot-otto-site's main: hairlines on a 3.25rem pitch and a tile of seventeen by six
   cells, a few filled. Here it covers the whole problem section, fading in at its top and out before the
   AI Handover section, with no hover effect. */
.chasm {
  --grid-line: rgb(255 255 255 / 0.05);
  --grid-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='884' height='312'%3E%3Cg fill='%23fff' fill-opacity='0.028'%3E%3Crect x='53' y='1' width='51' height='51'/%3E%3Crect x='313' y='1' width='51' height='51'/%3E%3Crect x='417' y='53' width='51' height='51'/%3E%3Crect x='729' y='1' width='51' height='51'/%3E%3Crect x='209' y='53' width='51' height='51'/%3E%3Crect x='521' y='53' width='51' height='51'/%3E%3Crect x='833' y='53' width='51' height='51'/%3E%3Crect x='1' y='105' width='51' height='51'/%3E%3Crect x='625' y='105' width='51' height='51'/%3E%3Crect x='105' y='157' width='51' height='51'/%3E%3Crect x='781' y='157' width='51' height='51'/%3E%3Crect x='261' y='209' width='51' height='51'/%3E%3Crect x='573' y='209' width='51' height='51'/%3E%3Crect x='365' y='157' width='51' height='51'/%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  isolation: isolate;
}

.chasm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px) 50% 0 / 3.25rem 3.25rem,
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px) 50% 0 / 3.25rem 3.25rem,
    var(--grid-fill) 50% 0 / 55.25rem 19.5rem;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 5rem, #000 calc(100% - 7rem), transparent);
  mask: linear-gradient(to bottom, transparent, #000 5rem, #000 calc(100% - 7rem), transparent);
  pointer-events: none;
}

/* The pictures' graphite ground lets the paper show through, so they sit on it rather than in boxes. */
.chasm .comparison-stage {
  mix-blend-mode: lighten;
}

.problem-head {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.problem-head .lede {
  max-width: 52ch;
  text-wrap: balance;
}

.problems {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
}

.problem-row {
  display: grid;
  gap: 1.5rem;
  align-items: center;
}

.problem-copy {
  display: grid;
  align-content: start;
  gap: 0.9rem;
}

.band .problem-copy h3 {
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.problem-copy p {
  max-width: 46ch;
}

.problem-cost {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

@media (min-width: 64rem) {
  .problem-row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .problem-row.is-flip {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .problem-row.is-flip .comparison {
    order: 2;
  }
}

/* The slider */

/* Registered, so the line, the grip and the reveal travel together when sent across. */
@property --reveal {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .comparison-stage.is-gliding {
    transition: --reveal 0.5s var(--ease);
  }
}

.comparison {
  min-width: 0;
  margin: 0;
}

.comparison-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg);
  touch-action: pan-y;
  user-select: none;
}

.comparison-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.comparison-after {
  clip-path: inset(0 calc(100% - var(--reveal)) 0 0);
}

/* Before on the left: With OTTO is what lies right of the line. */
[data-order="before-first"] .comparison-after {
  clip-path: inset(0 0 0 var(--reveal));
}

/* Above the line and the grip, so the buttons stay whole and clickable wherever the line goes. */
.comparison-labels {
  position: absolute;
  z-index: 4;
  inset: 0.75rem 0.75rem auto;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  pointer-events: none;
}

/* Before and With OTTO are buttons that stay put whatever the line does: each sends the line all the way
   across to show its picture whole, and reads as pressed while it does. */
.comparison-pick {
  appearance: none;
  min-height: 2.25rem;
  padding: 0.35rem 0.75rem;
  border: 0;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  font: 500 var(--fs-small)/1.4 var(--sans);
  cursor: pointer;
  pointer-events: auto;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.comparison-pick.is-otto {
  color: var(--amber);
}

.comparison-pick:hover {
  background: var(--border);
  color: var(--ink);
}

.comparison-pick.is-otto:hover {
  background: var(--amber-tint);
  color: var(--amber);
}

.comparison-pick[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

.comparison-pick.is-otto[aria-pressed="true"] {
  background: var(--amber);
  color: var(--on-amber);
}

.comparison-pick:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  .comparison-pick {
    min-height: 2.75rem;
  }
}

.comparison-divider {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 2px;
  transform: translateX(-1px);
  background: var(--amber);
  pointer-events: none;
}

/* OTTO's bubble is the grip: amber, the logo between two chevrons. */
.comparison-handle {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: clamp(38px, var(--reveal), calc(100% - 38px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: 72px;
  height: 56px;
  border-radius: var(--r-bubble);
  background: var(--amber);
  color: var(--on-amber);
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: pan-y;
}

/* OTTO sits on the picture's bottom edge, so the focus ring is drawn inside the bubble, where it can't be clipped. */
.comparison-handle:focus-visible {
  outline: 2px solid var(--on-amber);
  outline-offset: -5px;
}

.compare-otto {
  width: 28px;
  height: 31px;
  fill: currentColor;
}

.compare-chevron {
  width: 14px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The hint sits right under OTTO at the foot of the line and follows it sideways (comparison.js mirrors the
   line's place into --hint). Where a pointer can hover it shows only while OTTO itself is hovered, not while it is merely selected,
   and goes the moment that ends; its room is kept so nothing moves. On touch it always shows. */
.comparison figcaption {
  position: relative;
  left: clamp(5rem, var(--hint, 50%), calc(100% - 5rem));
  width: max-content;
  max-width: 100%;
  margin-top: 0.5rem;
  color: var(--muted);
  font: 400 var(--fs-small)/1.5 var(--sans);
  transform: translateX(-50%);
}

@media (hover: hover) {
  .comparison figcaption {
    visibility: hidden;
  }

  .comparison-stage:has(.comparison-handle:hover) + figcaption {
    visibility: visible;
  }
}

@media (forced-colors: active) {
  .comparison-handle {
    border: 2px solid ButtonText;
    background: ButtonFace;
    color: ButtonText;
  }

  .comparison-divider {
    background: CanvasText;
  }

  .chasm::before {
    display: none;
  }

  .chasm .comparison-stage {
    mix-blend-mode: normal;
  }

  .comparison-pick {
    border: 1px solid ButtonText;
  }

  .comparison-pick[aria-pressed="true"] {
    outline: 2px solid Highlight;
  }
}