/* BlankCanvas Software — hero and dock (loaded after base.css) */

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  padding-block: clamp(40px, 8vh, 104px) clamp(8px, 2vh, 24px);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero .display {
  max-width: 12em;
  margin-top: 22px;
}

/* Extra room so Om's cursor label never sits on top of this paragraph. */
.hero__lede {
  max-width: 33em;
  margin-top: 48px;
}

.hero .actions {
  margin-top: 36px;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 18%, transparent);
}

/* "blank canvas", selected as if on a design canvas, with Om's cursor on the handle. */
.selection {
  position: relative;
  display: inline-block;
  margin-right: 0.11em; /* keeps the full stop clear of the box and its handle */
}

.selection__box,
.selection__cursor {
  position: absolute;
  inset: 0.1em -0.05em 0.02em -0.06em;
  pointer-events: none;
}

.selection__box {
  border: 1.5px solid var(--accent);
}

.selection__box i {
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  background: var(--bg);
}

.selection__box i:nth-child(1) { top: -5px; left: -5px; }
.selection__box i:nth-child(2) { top: -5px; right: -5px; }
.selection__box i:nth-child(3) { bottom: -5px; left: -5px; }
.selection__box i:nth-child(4) { bottom: -5px; right: -5px; }

.cursor {
  position: absolute;
  top: calc(100% - 2px);
  left: calc(100% - 2px);
  display: flex;
  align-items: flex-start;
  width: max-content; /* an edge-anchored box would otherwise shrink to ~0px wide */
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
}

.cursor svg {
  flex: none;
  max-width: none;
  width: 22px;
  height: 22px;
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.25));
}

/* The label is drawn from data-label, so it never becomes part of the H1's text for crawlers. */
.cursor__tag::before {
  content: attr(data-label);
}

.cursor__tag {
  margin: 16px 0 0 -2px;
  padding: 5px 9px 6px;
  border-radius: 4px 999px 999px 999px;
  background: var(--accent);
  color: #fff;
  font: 600 0.8125rem/1 var(--font-text);
  box-shadow: 0 2px 6px rgb(255 90 31 / 0.35);
}

/* ---------- Dock ---------- */

.dock-stage {
  --tile: clamp(52px, 12.5vw, 76px);
  --dock-gap: clamp(10px, 2.6vw, 18px);
  --dock-pad: clamp(10px, 2.2vw, 14px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(56px, 9vh, 96px);
}

.dock-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(560px, 100%);
  height: 160px;
  translate: -50% -70%;
  background:
    radial-gradient(closest-side at 18% 50%, rgb(200 244 58 / 0.6), transparent),
    radial-gradient(closest-side at 38% 55%, rgb(29 79 216 / 0.45), transparent),
    radial-gradient(closest-side at 62% 45%, rgb(53 211 154 / 0.5), transparent),
    radial-gradient(closest-side at 84% 55%, rgb(124 108 242 / 0.45), transparent);
  filter: blur(30px);
  opacity: 0.6;
  pointer-events: none;
}

/* Floating material: content behind it stays visible but softened. */
.dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--dock-gap);
  padding: var(--dock-pad);
  border-radius: calc(var(--tile) * 0.225 + var(--dock-pad));
  background: var(--dock-material);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 var(--dock-edge), 0 0 0 1px var(--hairline), var(--shadow-lift);
}

.tile {
  position: relative;
  flex: none;
  width: var(--tile);
  height: var(--tile);
  border-radius: 22.5%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* Drag affordances only once site.js has made the tile draggable (not with reduced motion). */
.tile[data-draggable] {
  cursor: grab;
  touch-action: none;
}

.tile[data-held] {
  z-index: 2;
  cursor: grabbing;
}

.tile img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.14), 0 8px 18px -8px rgb(0 0 0 / 0.35);
  transition: box-shadow 0.3s var(--ease-out);
}

.tile[data-held] img {
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.12), 0 22px 36px -12px rgb(0 0 0 / 0.45);
}

.tile--round {
  border-radius: 50%;
}

.tile--blank {
  border: 1.5px dashed var(--hairline-strong);
  background: var(--blank-fill);
  transition: border-color 0.25s, box-shadow 0.3s var(--ease-out);
}

.tile--blank::before,
.tile--blank::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26%;
  height: 1.5px;
  border-radius: 1px;
  background: var(--hairline-strong);
  translate: -50% -50%;
  transition: background-color 0.25s;
}

.tile--blank::after {
  rotate: 90deg;
}

@media (hover: hover) {
  .tile--blank:hover {
    border-color: var(--accent);
  }

  .tile--blank:hover::before,
  .tile--blank:hover::after {
    background: var(--accent);
  }
}

.tile--blank[data-held] {
  border-color: var(--accent);
  box-shadow: 0 22px 36px -14px rgb(0 0 0 / 0.3);
}

.dock-caption {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
  /* Narrow screens: keep the arrow tip on the handle but hang the label to its left, under the
     selection, so it stays on screen whatever the language and line length. */
  .cursor {
    right: -14px;
    left: auto;
    flex-direction: column;
    align-items: flex-end;
  }

  .cursor svg {
    width: 18px;
    height: 18px;
  }

  .cursor__tag {
    margin: -2px 10px 0 0;
    padding: 4px 8px 5px;
    border-radius: 999px 4px 999px 999px;
    font-size: 0.75rem;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Om drags a marquee around "blank canvas": the box grows with the cursor. */
  .selection__box {
    animation: marquee 0.9s var(--ease-out) 0.7s both;
  }

  .selection__cursor {
    animation: cursor-travel 0.9s var(--ease-out) 0.7s both;
  }

  @keyframes marquee {
    from {
      clip-path: inset(-8px 100% 100% -8px);
    }
    to {
      clip-path: inset(-8px);
    }
  }

  @keyframes cursor-travel {
    from {
      transform: translate(-100%, -100%);
    }
  }
}

/* ---------- Accessibility preferences ---------- */

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .dock {
    background: var(--surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}