/* ═══════════════════════════════════════════════════════════════
   BUTTONS — one system for every page
   ─ .btn                    base (size M by default)
   ─ .btn--primary           green fill, dark icon chip
   ─ .btn--secondary         glass, gradient border, green icon chip
   ─ .btn--s / --l / --xl    sizes; everything (text, chip, arrow,
                             padding) is derived from --h, so the icon
                             always scales with the button
   ─ .btn--icon-left         chip before the label (back buttons)
   ─ .btn--text              no chip, label only
   ─ .btn__icon              round chip holding an inline SVG
       .btn__icon--down / --up-right / --left  set the hover direction
   ═══════════════════════════════════════════════════════════════ */

.btn {
  --h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--h) * .25);
  height: var(--h);
  padding: 0 calc(var(--h) * .1) 0 calc(var(--h) * .5);
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: max(12px, calc(var(--h) * .27));
  line-height: 1;
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: color var(--dur) ease, box-shadow var(--dur) ease, background var(--dur) ease; /* no transform: GSAP animates it */
}

.btn:active { transform: scale(.97); }

.btn:focus-visible {
  outline: 2px solid var(--g);
  outline-offset: 3px;
}

/* label never wraps or gets squeezed by the chip */
.btn > span:not(.btn__icon) { position: relative; }

/* ── Icon chip ── */
.btn__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--h) * .8);
  height: calc(var(--h) * .8);
  border-radius: 50%;
  overflow: hidden;       /* the arrow flies out of the circle on hover */
  transition: box-shadow var(--dur) ease, background var(--dur) ease;
}

.btn__icon svg {
  width: calc(var(--h) * .36);
  height: calc(var(--h) * .36);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Hover: the arrow leaves the circle in its own direction and flies back
   in from the opposite side. --dx/--dy = direction of the arrow. */
.btn__icon             { --dx: 1;  --dy: 0; }
.btn__icon--down       { --dx: 0;  --dy: 1; }
.btn__icon--up-right   { --dx: 1;  --dy: -1; }
.btn__icon--left       { --dx: -1; --dy: 0; }

.btn:hover .btn__icon svg,
.btn:focus-visible .btn__icon svg,
.pg-card:hover .btn .btn__icon svg {
  animation: btn-arrow-fly .8s linear;
}

/* Two phases with their own easing: accelerate out, glide back in. */
@keyframes btn-arrow-fly {
  0% {
    transform: translate(0, 0); opacity: 1;
    animation-timing-function: cubic-bezier(.55, 0, .7, .2);
  }
  40% {
    transform: translate(calc(var(--dx) * 150%), calc(var(--dy) * 150%)); opacity: 0;
  }
  40.01% {
    transform: translate(calc(var(--dx) * -150%), calc(var(--dy) * -150%)); opacity: 0;
    animation-timing-function: cubic-bezier(.16, 1, .3, 1);
  }
  100% {
    transform: translate(0, 0); opacity: 1;
  }
}

/* chip on the left (back buttons) */
.btn--icon-left {
  justify-content: flex-start;
  padding: 0 calc(var(--h) * .5) 0 calc(var(--h) * .1);
}

/* text-only button (no chip): even padding, label centred */
.btn--text {
  justify-content: center;
  padding: 0 calc(var(--h) * .5);
}

/* ── Sizes ── */
.btn--s  { --h: 38px; }
.btn--l  { --h: 58px; }
.btn--xl { --h: 76px; }

@media (max-width: 768px) {
  .btn--l  { --h: 52px; }
  .btn--xl { --h: 60px; }
}

/* ── Primary: green fill ── */
.btn--primary {
  background: var(--g);
  color: var(--g-btn);
  border: none;
  box-shadow: 0 6px 30px var(--ga-20);
}
.btn--primary .btn__icon {
  background: var(--g-btn);
  color: var(--g);
}
.btn--primary:hover {
  box-shadow: 0 8px 40px var(--ga-35), 0 2px 12px var(--ga-15);
}

/* ── Secondary: glass with a gradient border ── */
.btn--secondary {
  color: var(--t-bright);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(var(--bg2-rgb), .85), rgba(var(--bg2-rgb), .85)) padding-box,
    linear-gradient(120deg, var(--ga-35), var(--w-05) 45%, var(--ga-15)) border-box;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn--secondary .btn__icon {
  background: rgba(61, 255, 143, .85);
  color: var(--g-btn);
}
.btn--secondary:hover,
.pg-card:hover .btn--secondary {
  color: var(--g);
  box-shadow: 0 0 28px var(--ga-20);
}
.btn--secondary:hover .btn__icon,
.pg-card:hover .btn--secondary .btn__icon {
  box-shadow: 0 0 18px var(--ga-50);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__icon { transition: none; }
  .btn .btn__icon svg { animation: none !important; }
}