/* ==========================================================================
   Buttons — .btn base, .btn--dark, .btn--light, .btn--contact
   ========================================================================== */

/* ── Base ──────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  height: 46px;
  padding: 12px 24px 12px 8px;
  border-radius: 100px;
  font-family: var(--font);
  font-size: var(--body-xs);
  font-weight: 400;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
}

.btn__label {
  line-height: 1;
  transition: transform 0.3s ease-out;
}

/* ── Circle container ──────────────────────────────────────────────────────── */
.btn--dark,
.btn--light { gap: 0; position: relative; }

.btn__circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s ease-out;
}

/* ── Dot (default visible) ─────────────────────────────────────────────────── */
.btn__dot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-out;
}
/* (No svg descendant sizing — dragster_svg() puts the class on the <svg>
   itself; the dot renders at its native 8px, per Figma.) */

/* ── Arrow (default hidden) ────────────────────────────────────────────────── */
.btn__arrow-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ── One component, two modes ────────────────────────────────────────────────
   A button is ONE component. The mode (--dark starts dark, --light starts
   white) only sets the RESTING colours, via three custom properties. Every
   interaction state — hover, press, keyboard focus — is IDENTICAL in both
   modes: blue surface, solid white circle, dark arrow, label shift.
   Contexts (light header, open drawer, …) flip a button's mode by overriding
   the three variables — never by restyling the internals. */
.btn--dark  { --btn-bg: var(--btn-dark); --btn-fg: #fff; --btn-icon: #fff; }
.btn--light { --btn-bg: #fff;            --btn-fg: #000; --btn-icon: #000; }

.btn--dark,
.btn--light { background-color: var(--btn-bg); color: var(--btn-fg); }

.btn--dark  .btn__dot-icon,
.btn--light .btn__dot-icon,
.btn--dark  .btn__arrow-icon,
.btn--light .btn__arrow-icon { color: var(--btn-icon); }

/* ── Interactions — the same in both modes ─────────────────────────────────── */
.btn--dark:hover,  .btn--dark:active,  .btn--dark:focus-visible,
.btn--light:hover, .btn--light:active, .btn--light:focus-visible {
  background-color: var(--dragster-blue);
  color: #fff;
}

.btn--dark:hover  .btn__dot-icon,  .btn--dark:active  .btn__dot-icon,
.btn--light:hover .btn__dot-icon,  .btn--light:active .btn__dot-icon { opacity: 0; }

.btn--dark:hover  .btn__arrow-icon,  .btn--dark:active  .btn__arrow-icon,
.btn--light:hover .btn__arrow-icon,  .btn--light:active .btn__arrow-icon {
  opacity: 1;
  transform: scale(1);
  color: #1C1B1F;
}

.btn--dark:hover  .btn__label,  .btn--dark:active  .btn__label,
.btn--light:hover .btn__label,  .btn--light:active .btn__label { transform: translateX(8px); }

/* ── Contact button ────────────────────────────────────────────────────────── */
.btn--contact {
  position: relative;
  justify-content: center;
  padding: 12px 24px;
  background-color: var(--btn-light);
  color: var(--btn-dark);
  /* Delay-free going back: see the :hover rule below. */
  transition: background-color 0s;
}
.btn--contact .btn__label {
  position: relative;
  z-index: 1;
  color: var(--btn-dark);
  transition: none;
}
.btn__fill {
  position: absolute;
  /* -1px takes this panel's OWN rounding out of play. The parent clips with
     the same pill, so at inset: 0 the one curve was antialiased twice over;
     growing by 1px on opposite sides leaves the cap centre put and only the
     radius grows, so the clip is now the single rounded edge. That is worth
     having while the panel is mid-slide across the left cap - but it is all
     it is. It does NOT remove the pale rim; the rim comes from the ground
     under the panel and is handled by the :hover rule further down (measured
     2026-10-05, after this alone was tried and the rim stayed). */
  inset: -1px;
  background: var(--dragster-blue);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* -100% parks the panel exactly one button-width to the left, which puts
     its rounded right cap precisely on x=0. Button widths are usually
     fractional, so the rounding between that cap and the parent's
     overflow: hidden left a blue hairline showing at rest (Kajsa
     2026-10-05). The extra 2px is an absolute margin, so it holds at any
     width; the slide is 2px longer, which is not perceptible. */
  transform: translateX(calc(-100% - 2px));
  transition: transform 0.35s ease;
  z-index: 2;
}
/* dragster_svg() puts the class on the <svg> itself — no descendant selector */
.btn__mail-icon { width: 18px; height: 18px; color: #fff; }
.btn--contact:hover .btn__fill { transform: translateX(0); }

/* An opaque child can never hide the ground it is painted on. The button paints
   its white pill with ONE antialiased edge, then the panel paints blue clipped
   to that same edge, so every partially covered edge pixel keeps an a(1-a)
   share of white underneath - 25 % at half coverage. Over a dark photo that
   reads as a pale outline around the blue, on the straight edges too, since
   DPR 2 puts them on half pixels. Growing the panel cannot reach it: the white
   is UNDER the blue, not beside it.
   So the ground stops being white once the panel is home. Duration 0 with a
   0.35s delay fires at exactly the moment the slide ends, where the swap is
   invisible; on the way out the base rule has no delay, so the ground is white
   again before the panel starts moving. Verified 2026-10-05 against a ground
   of the same blue, where the rim is the only thing that can show: gone. */
.btn--contact:hover {
  background-color: var(--dragster-blue);
  transition: background-color 0s 0.35s;
}

/* The hover/press circle is ALWAYS solid white — in every header state
   (dark, light, glass, drawer open) and on touch presses. Contexts flip only
   the --btn-* variables, so nothing outranks this rule. */
.btn--dark:hover .btn__circle,
.btn--dark:active .btn__circle,
.btn--dark:focus-visible .btn__circle,
.btn--light:hover .btn__circle,
.btn--light:active .btn__circle,
.btn--light:focus-visible .btn__circle {
  background: #fff;
}