/* ==========================================================================
   Cultivator link — the brand name in a product H1, as a link to its landing
   page (/cultivator/{name}).

   The design problem: the cultivator has always been rendered as underlined
   text, so an underline alone no longer signals "clickable" here — it is just
   how the brand has always looked. The affordance therefore comes from three
   layers that were NOT there before, escalating with interaction:

     rest     bone text · dimmed green underline · a chevron parked at 60% opacity
     hover    green text · underline sweeps in from the left · chevron slides out
     focus    the hover treatment plus a visible ring (keyboard parity)
     active   the deeper "pressed" green, nudged down a hair
     leaving  filled green chip — the click registered, the page is loading

   Colour carries the state change, motion only accelerates reading it: every
   transition here is decoration, so `prefers-reduced-motion` drops all of it and
   the colour/contrast steps still tell the whole story.

   Contrast on Deep Black (#0A0A0A): bone 18.9:1, Cult Green 9.4:1, and the
   filled "leaving" chip flips to dark text on green for the same reason the
   brand's `.btn-success` does.
   ========================================================================== */

.cc-cultivator-link {
  --ccl-accent: var(--cc-green, #95c11f);
  --ccl-accent-hover: var(--cc-green-hover, #a8d62f);
  --ccl-accent-active: var(--cc-green-active, #7fa61a);
  --ccl-ink: var(--cc-bone, #f2f2f2);

  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  padding: 0.05em 0.15em;
  border-radius: 0.35rem;
  color: var(--ccl-ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.22s ease, background-color 0.22s ease, transform 0.12s ease;
  /* iOS: suppress the grey flash so our own pressed state is the only feedback. */
  -webkit-tap-highlight-color: transparent;
}

/* The brand name itself, so the underline can be drawn under the TEXT rather
   than under the text-plus-chevron box. */
.cc-cultivator-link__name {
  position: relative;
  /* Dimmed at rest so the animated underline below reads as an addition. */
  box-shadow: inset 0 -0.08em 0 rgba(var(--cc-green-rgb, 149, 193, 31), 0.45);
  transition: box-shadow 0.22s ease;
}

/* The sweep: a second underline that grows from the left over the dim one. */
.cc-cultivator-link__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.08em;
  height: 0.08em;
  background-color: var(--ccl-accent-hover);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Parked at rest, slides out on interaction — the "there is somewhere to go"
   cue that an underline can no longer carry on its own. */
.cc-cultivator-link__chevron {
  font-size: 0.62em;
  opacity: 0.6;
  transform: translateX(0);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-cultivator-link:hover,
.cc-cultivator-link:focus-visible {
  color: var(--ccl-accent-hover);
}

.cc-cultivator-link:hover .cc-cultivator-link__name::after,
.cc-cultivator-link:focus-visible .cc-cultivator-link__name::after {
  transform: scaleX(1);
}

.cc-cultivator-link:hover .cc-cultivator-link__chevron,
.cc-cultivator-link:focus-visible .cc-cultivator-link__chevron {
  opacity: 1;
  transform: translateX(0.22em);
}

.cc-cultivator-link:focus-visible {
  outline: 2px solid var(--ccl-accent-hover);
  outline-offset: 3px;
}

.cc-cultivator-link:active {
  color: var(--ccl-accent-active);
  transform: translateY(1px);
}

/* Click registered, document navigating. Filled rather than tinted so it is
   unmistakably a different state and not just a deeper hover. */
.cc-cultivator-link--leaving,
.cc-cultivator-link--leaving:hover {
  background-color: var(--ccl-accent);
  color: var(--cc-black, #0a0a0a);
}

.cc-cultivator-link--leaving .cc-cultivator-link__name {
  box-shadow: none;
}

.cc-cultivator-link--leaving .cc-cultivator-link__name::after {
  background-color: var(--cc-black, #0a0a0a);
  transform: scaleX(1);
}

.cc-cultivator-link--leaving .cc-cultivator-link__chevron {
  opacity: 1;
  transform: translateX(0.22em);
}

/* Coarse pointers get no hover and a shorter dwell before the tap lands, so the
   affordance is always on and the hit area is padded to the 44px guideline. */
@media (hover: none) {
  .cc-cultivator-link {
    padding: 0.25em 0.35em;
  }

  .cc-cultivator-link .cc-cultivator-link__name::after {
    transform: scaleX(1);
  }

  .cc-cultivator-link .cc-cultivator-link__chevron {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-cultivator-link,
  .cc-cultivator-link__name,
  .cc-cultivator-link__name::after,
  .cc-cultivator-link__chevron {
    transition: none;
  }

  .cc-cultivator-link:active {
    transform: none;
  }
}