/* ---- One rule for every pair below ----
   A label's colour has to be as absolute as the plate it sits on.

   --color-text and --color-bg are scheme-relative: inside .scheme-dark they
   swap. That is right for a fill that is meant to invert with the section
   around it, and wrong for one that is not. A yellow plate is yellow in
   every scheme, so its label cannot be --color-text — in a dark section that
   resolves to the light ink and the words vanish into the accent.

   So: a fill named from a primitive takes a label named from a primitive.
   --color-on-accent is the ink for the accent plate and is never overridden
   by a scheme; --color-on-dark is the one that does flip, which is what the
   default pair below wants. */
.btn {
 --button-bg: var(--color-text);
 --button-text: var(--color-on-dark);
 --button-bg-hover: var(--color-accent);
 --button-text-hover: var(--color-on-accent);

  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 1em 2em;
  font-family: inherit;
  font-size: var(--text-body); /* 1rem — fixed, does not ride section font-size */
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-decoration: none;
  /* Stated, not simply left out. A <button> carries a 2px outset border from
     the user agent, and the declaration this replaces was what overrode it —
     dropping the line altogether handed the chrome back. */
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--button-bg);
  color: var(--button-text);
  transition: background-color var(--duration-fast) var(--easing),
    color var(--duration-fast) var(--easing);

    &:hover {
       background: var(--button-bg-hover);
      color: var(--button-text-hover);
    }


    /* Buttton color variants */
    &.btn-primary {
    --button-bg: var(--color-accent);
    --button-text: var(--color-on-accent);
    --button-bg-hover: color-mix(in srgb, var(--button-bg) 78%, white); /* 22% white */
    --button-text-hover: var(--color-on-accent);
    }

    /* Quiet: no fill of its own, the label rides the surrounding text
       colour, and nothing is drawn around it. */
    &.btn-secondary {
    --button-bg: transparent;
    --button-text: currentColor;
    }
    &.btn-secondary.is-accent {
        color: var(--color-accent);
    }

    /* Button size variants */
    &.btn-sm{
        padding: 0.5em 0.75em;
    }
}




.btn-animated-link {
    --button-bg: var(--color-text);
    --button-text: var(--color-on-dark);
    --button-bg-hover: var(--color-accent);
    --button-text-hover: var(--color-on-accent);

    --text-duplicate-distance: 1.5em;
    --button-bg-wipe: var(--color-accent);
    --button-text-wipe: var(--color-on-accent);

  display: inline-flex;
  align-items: center;
  text-decoration: none;
  /* Stated for the same reason as on .btn: several of these are <button>
     elements, and the user agent draws them a 2px outset border unless
     something says otherwise. */
  border: 0;
  /* Plain --radius-sm now. It used to be a pixel more, which was the width of
     the hairline this element carried: the outer corner had to sit outside
     the inner plate's for the two to look concentric. With nothing drawn
     around it there is no gap left to cover. */
  border-radius: var(--radius-sm);

    .btn-animated-content {
        position: relative;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 1em 2em;
        overflow: hidden;
        border: none;
        border-radius: var(--radius-sm);
        background: var(--button-bg);
        color: var(--button-text);
    }

    .btn-animated-content__mask {
        z-index: 1;
        position: relative;
        flex: none;
        display: flex;
        align-items: center;
        overflow: hidden;
    }


    .btn-animated-content__text {
        font-weight: var(--weight-button);
        letter-spacing: -0.01em;
        text-shadow: 0 var(--text-duplicate-distance) var(--button-text-hover);
    }


    .btn-animated-content__bg {
        z-index: 0;
        position: absolute;
        bottom: 0;
        left: -10%;
        width: 120%;
        height: 100%;
        background: var(--button-bg-hover);
        transform: translate(0, 175%);
    }

    .btn-animated-icon {
        z-index: 1;
        position: relative;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.1em;
        height: 1.1em;
    }

    /* The icon square previews the hover state at rest: ink chip, accent
   glyph — so it reuses the wipe pair instead of its own variables. */
.btn-animated-icon__bg {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 0.15em;
  background: var(--button-text-wipe);
}

.btn-animated-icon__wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--button-bg-wipe);
}

.btn-animated-icon__list {
  flex: none;
  display: flex;
  align-items: center;
  height: 100%;
}

.btn-animated-icon__arrow {
  flex: none;
  width: 1em;
  height: 100%;
  padding: 0.2em;
}


    /* Size variations */
      &.is-sm .btn-animated-content {
    padding: 0.5em 0.75em;
    }

    /* Color variatns */

    /* The wipe cannot be the accent here: the plate already is it, so the
       base pair slides an invisible sheet over an identical one and the
       hover does nothing at all. Lifted with white instead, the same move
       .btn-primary makes further up. */
    &.is-primary{
        --button-bg: var(--color-accent);
        --button-text: var(--color-on-accent);
        --button-bg-hover: color-mix(in srgb, var(--color-accent) 78%, white);
        --button-text-hover: var(--color-on-accent);
    }
    /* Light in every scheme, which is the whole point of the name. It ran on
       --color-bg, so inside .scheme-dark the plate turned dark while the
       label stayed on the base pair — dark on dark, invisible. */
    &.is-white{
        --button-bg: var(--light);
        --button-text: var(--dark);
    }
    /* The plain dark fill. Named from the primitives, so a button that has
       to be black stays black — the scheme-relative pair it used to carry
       turned it into a white button inside .scheme-dark. */
    &.is-black{
        --button-bg: var(--dark);
        --button-text: var(--light);
    }
    /* For dark buttons sitting on an accent plate. The wipe is the same ink
       as the resting state, so the plate never moves visually and the whole
       hover is carried by the label rolling over to the accent colour. */
    &.is-ink{
        --button-bg: var(--dark);
        --button-text: var(--light);
        --button-bg-hover: var(--dark);
        --button-text-hover: var(--color-accent);
    }
    &.is-secondary{
        --button-bg: color-mix(in srgb, currentcolor 15%, transparent);
        --button-text: currentColor;
    }
    &.is-secondary.is-accent{ 
        color: var(--color-accent);
    }
}







[data-button-anim-target] {
  transition: transform var(--duration-slow) var(--easing);
}

@media (hover: hover) and (pointer: fine) {
  .btn-animated-link:hover .btn-animated-content__text {
    transform: translate(0, calc(-1 * var(--text-duplicate-distance)));
  }
  .btn-animated-link:hover .btn-animated-icon__bg {
    transform: rotate(90deg);
  }
  .btn-animated-link:hover .btn-animated-icon__arrow {
    transform: translate(200%, 0);
  }
  .btn-animated-link:hover .btn-animated-content__bg {
    transform: translate(0, 0) rotate(0deg);
  }
}


.btn-animated-link{

}