/* Shell · persistent dock, splash and wipe overlay */

/* ---------- Floating dock (spec §9.2; behaviour in js/core/dock.js) ---------- */

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock-offset) + env(safe-area-inset-bottom));
  z-index: 800;
  translate: -50% 0;
}

/* pre-hidden until dock.enter() (the boot failsafe removes html.motion) */
html.motion .dock {
  visibility: hidden;
  opacity: 0;
}

.dock__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--dock-h);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  background: rgba(14, 14, 18, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.dock__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border: 1.5px solid #EDEBE6;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;                 /* placed and shown by dock.js */
}

.dock__link,
.dock__cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
  color: #EDEBE6;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: scale .1s var(--ease-out), background-color .4s var(--ease-out);
}

.dock__link {
  padding: 0 22px;
  border-radius: 999px;       /* focus ring matches the indicator pill */
}

.dock__cta {
  gap: 10px;
  padding: 0 18px 0 6px;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
}

/* until the avatar exists (step 11a) the CTA label needs its own left padding */
.dock__cta:not(:has(.dock__avatar)) { padding-left: 18px; }

.dock__cta:hover { background: var(--blue-ink); }
.dock__cta[aria-current="page"] { box-shadow: inset 0 0 0 1.5px #fff; }

.dock__avatar {
  display: block;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  transition: scale .4s var(--ease-out);
}

.dock__cta:hover .dock__avatar { scale: 1.08; }

.dock__link:active,
.dock__cta:active { scale: .97; }

.dock__link:focus-visible,
.dock__cta:focus-visible {
  outline: 2px solid #EDEBE6;
  outline-offset: 2px;
}

/* Text roll (D8): the label and its ::after copy slide up together inside a 1-line mask. */
.dock__label {
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  line-height: 1.4em;
}

.dock__text {
  display: block;
  position: relative;
  transition: translate .4s var(--ease-out);
}

.dock__text::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 100%;
  left: 0;
}

.dock__link:hover .dock__text,
.dock__link:focus-visible .dock__text,
.dock__cta:hover .dock__text,
.dock__cta:focus-visible .dock__text { translate: 0 -100%; }

.dock__text--short { display: none; }

@media (max-width: 760px) {
  .dock { width: calc(100vw - 24px); }
  .dock__inner { justify-content: space-between; }

  .dock__link,
  .dock__cta { font-size: 12px; }

  /* 12px from ~396px up; narrower phones shrink the link padding so the avatar CTA still fits */
  .dock__link { padding: 0 clamp(6px, calc((100vw - 324px) / 6), 12px); }
  .dock__cta { padding: 0 12px 0 6px; gap: 8px; }
  .dock__cta:not(:has(.dock__avatar)) { padding-left: 12px; }
  .dock__avatar { width: 28px; height: 28px; }
}

/* Measured: the 4px minimum gap overflows by 2px at 360, and "Let's Talk" overflows at 320. */
@media (max-width: 380px) {
  .dock__inner { gap: 2px; }
}

@media (max-width: 359px) {
  .dock__cta .dock__text:not(.dock__text--short) { display: none; }
  .dock__text--short { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .dock__link,
  .dock__cta,
  .dock__text,
  .dock__avatar { transition: none; }

  .dock__link:hover .dock__text,
  .dock__link:focus-visible .dock__text,
  .dock__cta:hover .dock__text,
  .dock__cta:focus-visible .dock__text { translate: none; }

  .dock__cta:hover .dock__avatar { scale: none; }
}

/* ---------- Splash (js/core/splash.js; first-paint CSS is inline in <head>) ---------- */

.splash__svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Custom scrollbar (phase 1.1 §5; behaviour in js/core/scrollbar.js) ----------
   Only while html.has-custom-scrollbar (fine pointer). Touch devices keep the native bar. */

html.has-custom-scrollbar { scrollbar-width: none; }
html.has-custom-scrollbar::-webkit-scrollbar { display: none; }

.scrollbar { display: none; }

html.has-custom-scrollbar .scrollbar {
  position: fixed;
  top: 8px;
  right: 3px;
  bottom: 8px;
  z-index: 850;
  display: block;
  width: 12px;
  background: transparent;
  opacity: 0;
  transition: opacity .2s;
  touch-action: none;
}

html.has-custom-scrollbar .scrollbar.is-visible,
html.has-custom-scrollbar .scrollbar.is-dragging { opacity: 1; }

/* 2px centred line on track hover */
.scrollbar::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  translate: -50% 0;
  background: rgba(11, 11, 15, .08);
  opacity: 0;
}

.scrollbar:hover::before { opacity: 1; }

.scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  min-height: 40px;
  border-radius: 999px;
  background: rgba(11, 11, 15, .42);
  transform: translateX(-50%);   /* scrollbar.js adds translateY(); X keeps it centred */
  transition: width .2s var(--ease-out), background .2s;
}

.scrollbar:hover .scrollbar__thumb,
.scrollbar.is-dragging .scrollbar__thumb {
  width: 8px;
  background: var(--blue);
}

/* Hidden while the splash or a page transition runs, and on pages that do not scroll */
html[data-transitioning] .scrollbar,
html:has(> body > .splash) .scrollbar,
html.has-custom-scrollbar .scrollbar.is-empty {
  opacity: 0 !important;
  pointer-events: none;
  transition: none;   /* gone at once, not fading out over the wipe */
}

html.is-scrollbar-dragging,
html.is-scrollbar-dragging * { user-select: none; }

/* ---------- Brush wipe (js/core/wipe.js) ---------- */

.wipe {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  visibility: hidden;
}

.wipe.is-visible { visibility: visible; }
.wipe.is-running { pointer-events: auto; }   /* blocks clicks from cover start to reveal end */

.wipe__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}