/* ---- CLICK: scale-only press + bounce + bevel invert ---- */
/*@keyframes ipPressBounceTopDown {
  0% {
      transform: scale(1.035);
  }

  35% {
      transform: scale(0.92);
  }
*/
/* juicy press */
/*    70% {
      transform: scale(1.06);
  }
*/
/* overshoot */
/*    100% {
      transform: scale(1.035);
  }
*/
/* back to hover */
/*}*/



/* clicked from rest (no hover) */
/* @keyframes ipPressBounceRestTopDown {
  0% {
      transform: scale(1);
  }

  35% {
      transform: scale(0.92);
  }

  70% {
      transform: scale(1.05);
  }

  100% {
      transform: scale(1);
  }
} */

.server-ip::marker {
  content: none;
}


@keyframes arcaneBorder {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes arcanePulse {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.08);
  }
}

/* Click animation driven by JS class (no translate, scale only) */
@keyframes ipPressJuicyTopDown {
  0% {
    transform: scale(1.035);
  }

  35% {
    transform: scale(0.92);
  }

  /* press */
  70% {
    transform: scale(1.06);
  }

  /* bounce */
  100% {
    transform: scale(1.035);
  }

  /* back to hover scale */
}

/* When pressed (class added by JS), force the animation to complete */

/* Optional: invert bevel during press (still no translate) */
/* .server-ip.is-pressing{
  animation: ipPressJuicyTopDown 420ms cubic-bezier(.2,1.35,.35,1) both;
  box-shadow:
    0 12px 28px rgba(0,0,0,.55),
    0 0 14px rgba(80,150,255,.18),
    inset 0 -2px 0 rgba(255,255,255,.12),
    inset 0 5px 10px rgba(0,0,0,.70);
} */


/* ---------- PRESS (instant) ---------- */

@keyframes hyrpg-press-in {
  0% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(0.90);
  }
}

/* ---------- RELEASE (juicy bounce) ---------- */

@keyframes hyrpg-release {
  0% {
    transform: scale(0.90);
  }

  55% {
    transform: scale(1.06);
  }

  75% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1.035);
  }
}


/* classes pilotées par JS */
.server-ip.is-down {
  animation: hyrpg-press-in 90ms cubic-bezier(.2, .9, .3, 1) forwards;
}

.server-ip.is-up {
  animation: hyrpg-release 420ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}

.server-box{
  margin-top: 50px;
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/*Fin bouton IP Server*/

.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  font-size: 14px;
}

.hero-buttons .btn {
  min-width: 190px;
}

.hero-buttons .btn {
  overflow: hidden;
  isolation: isolate;
}

.hero-btn-particles {
  position: absolute;
  left: -2px;
  top: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(1.2) brightness(1.14);
  transition: opacity 150ms ease;
}

.hero-buttons .btn.is-particle-active .hero-btn-particles {
  opacity: 1;
}

.header-navbar .btn-login {
  overflow: hidden;
  isolation: isolate;
}

.header-login-particles {
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  mix-blend-mode: multiply;
  filter: saturate(.9) contrast(1.28) brightness(.88);
}

@media (max-width: 640px) {
  .hero-buttons {
    max-width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================
   HYRPG — Button templates (drop-in)
   Usage:
     <button class="btn btn--arcane">...</button>
     <a class="btn btn--onyx btn--lg" href="#">...</a>

   Notes:
   - Each variant includes hover/active/focus.
   - No text styling constraints (you can add your own).
   ========================================================= */

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.btn-login {
    background: #1663f2;
    color: white;
}

.btn-login:hover {
    background: var(--primary-dark);
    transform: translateY(0px) !important;
}


.btn-discord {
    background: var(--discord);
    color: white;
}

.btn-discord:hover {
    background: #2f40eb;
    transform: translateY(-2px);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .72rem 1.15rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .92);

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, background .14s ease;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .35);
}


.btn::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 2px;
  height: 36%;
  border-radius: calc(12px - 6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  opacity: .85;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(12px - 1px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55);
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 5px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(0, 0, 0, .38);
}

.btn:active {
  transform: translateY(1px);
  filter: brightness(.98);
  box-shadow:
    0 9px 22px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -2px 6px rgba(0, 0, 0, .58),
    inset 0 0 0 1px rgba(0, 0, 0, .42);
}

.btn:focus-visible {
  outline: none;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .45),
    0 0 0 3px rgba(130, 90, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* Sizes */
.btn--sm {
  padding: .56rem .95rem;
  border-radius: 10px;
}

.btn--lg {
  padding: .86rem 1.45rem;
  border-radius: 14px;
}

/* =========================================================
   1) ARCANE (Purple → Indigo) : primary HyRPG vibe
   ========================================================= */
.btn--arcane {
  background: linear-gradient(180deg, #5d3aa6 0%, #4b2f93 45%, #362064 100%);
  border-color: rgba(196, 170, 255, .18);
}

.btn--arcane:hover {
  background: linear-gradient(180deg, #7c3aed 0%, #5a2aab 45%, #4b238f 100%);
  filter: brightness(1.08);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    0 0 24px rgba(130, 90, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 5px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(0, 0, 0, .38);
}

.btn--arcane:focus-visible {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .45),
    0 0 0 3px rgba(180, 140, 255, .30),
    0 0 26px rgba(130, 90, 255, .20),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* =========================================================
   2) ONYX (Neutral dark glossy) : like your 2nd reference “stats”
   ========================================================= */
.how-to-join .steps .step {
  /* background: #1b1f2b; */
  position: relative;
  border-color: rgba(255, 255, 255, .09);
  pointer-events: none;
  background: rgb(0, 0, 0);
}

.how-to-join .steps .step::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: 2px;
  height: 70%;
  border-radius: calc(12px - 6px);
  background: linear-gradient(180deg, #0000 0%, #1318286b 50%, #1e0a33 100%);
  pointer-events: none;
  opacity: .5;
  animation: heightglow 15s;
}

@keyframes heightglow {

  0%,
  100% {
    height: 70%;
    opacity: .5;
  }
  25%, 75%{
    height: 120%;
    opacity: .2;
  }
  50% {
    height: 170%;
    opacity: .7;
  }
}

.how-to-join .steps .step:hover {
  filter: brightness(1.05);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 5px rgba(0, 0, 0, .56),
    inset 0 0 0 1px rgba(0, 0, 0, .44);
}

/* =========================================================
   3) FROST (Blue → Steel) : HyTale-ish cool / clean
   ========================================================= */
.btn--frost {
  background: linear-gradient(180deg, #2f4fbe 0%, #243c93 50%, #18245a 100%);
  border-color: rgba(180, 220, 255, .20);
}

.btn--frost:hover {
  filter: brightness(1.08);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    0 0 26px rgba(90, 170, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 5px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(0, 0, 0, .38);
}

.btn--frost:focus-visible {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .45),
    0 0 0 3px rgba(120, 190, 255, .28),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* =========================================================
   4) EMERALD (Green rune) : for success / online / confirm
   ========================================================= */
.btn--emerald {
  background: linear-gradient(180deg, #1f8a62 0%, #167252 55%, #0f4f3a 100%);
  border-color: rgba(160, 255, 210, .18);
}

.btn--emerald:hover {
  filter: brightness(1.07);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    0 0 26px rgba(70, 255, 190, .16),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 5px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(0, 0, 0, .38);
}

.btn--emerald:focus-visible {
  box-shadow:
    0 12px 30px rgba(0, 0, 0, .45),
    0 0 0 3px rgba(120, 255, 200, .22),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 5px rgba(0, 0, 0, .45),
    inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* =========================================================
   5) CRIMSON (Danger / alert) : destructive action
   ========================================================= */
.btn--crimson {
  background: linear-gradient(180deg, #a52b3a 0%, #7f1f2b 55%, #52131b 100%);
  border-color: rgba(255, 170, 170, .16);
}

.btn--crimson:hover {
  filter: brightness(1.06);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    0 0 22px rgba(255, 80, 110, .16),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 5px rgba(0, 0, 0, .50),
    inset 0 0 0 1px rgba(0, 0, 0, .38);
}

/* =========================================================
   6) GHOST (Outlined / subtle) : secondary / tertiary
   ========================================================= */
.btn--ghost {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border-color: rgba(255, 255, 255, .14);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .45);
}

.btn--ghost::before {
  opacity: .55;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, 0));
}

.btn--ghost:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 0, 0, .50);
}

/* =========================================================
   7) GLASS (Frosted) : “UI panel button”, not too glowy
   ========================================================= */
.btn--glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -2px 6px rgba(0, 0, 0, .35);
}

.btn--glass:hover {
  filter: brightness(1.08);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 -2px 6px rgba(0, 0, 0, .42);
}

/* =========================================================
   8) CARVED (Stone-ish) : RP / textured feel (CSS-only)
   ========================================================= */
.btn--carved {
  background:
    radial-gradient(120% 100% at 30% 15%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(180deg, #2a2a33 0%, #1b1b23 55%, #111118 100%);
  border-color: rgba(255, 255, 255, .10);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .60),
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -3px 8px rgba(0, 0, 0, .65),
    inset 0 0 0 1px rgba(0, 0, 0, .55);
}

.btn--carved::before {
  opacity: .55;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, 0));
}

.btn--carved:hover {
  filter: brightness(1.06);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .65),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -3px 9px rgba(0, 0, 0, .70),
    inset 0 0 0 1px rgba(0, 0, 0, .58);
}