/* ==========================================================================
   join-v1.css  (GLOBAL GENESIS FLOAT CTA)
   - same look everywhere
   - inward + higher
   - emblem image
   - consistent typography/colors across pages
   ========================================================================== */

:root{
  /* position (desktop) */
  --join-right: clamp(140px, 11vw, 260px);
  --join-bottom: clamp(120px, 14vh, 200px);

  /* sizing */
  --join-pad-y: 18px;
  --join-pad-x: 20px;
  --join-gap: 12px;
  --join-radius: 999px;

  /* text */
  --join-k-size: 11px;
  --join-v-size: 15px;
  --join-k-track: 0.24em;
  --join-v-track: 0.18em;

  /* emblem */
  --join-emblem: 22px;

  /* colors (dark) */
  --join-k-dark: rgba(255,255,255,0.70);
  --join-v-dark: rgba(255,255,255,0.94);

  /* colors (light) */
  --join-k-light: rgba(12,18,30,0.64);
  --join-v-light: rgba(12,18,30,0.92);

  /* surfaces */
  --join-border: rgba(255,214,130,0.36);
  --join-border-hover: rgba(255,214,130,0.55);

  --join-shadow:
    0 26px 80px rgba(0,0,0,0.22),
    0 0 0 1px rgba(0,0,0,0.10) inset,
    0 0 52px rgba(255,214,130,0.18);

  --join-shadow-hover:
    0 32px 96px rgba(0,0,0,0.26),
    0 0 0 1px rgba(0,0,0,0.10) inset,
    0 0 64px rgba(255,214,130,0.22);
}

/* BASE */
.genesis-float{
  position: fixed;
  right: calc(var(--join-right) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--join-bottom) + env(safe-area-inset-bottom, 0px));
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: var(--join-gap);

  padding: var(--join-pad-y) var(--join-pad-x);
  border-radius: var(--join-radius);

  border: 1px solid var(--join-border);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.22), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(255,214,130,0.22), rgba(255,140,60,0.12));

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow: var(--join-shadow);

  /* ALWAYS ON */
  opacity: 1;
  pointer-events: auto;
  transform: translateZ(0);

  transition:
    transform 220ms cubic-bezier(.22,.61,.36,1),
    box-shadow 220ms ease,
    border-color 220ms ease,
    background 220ms ease;

  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;

  /* normalize typography so it never varies */
  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* HOVER / ACTIVE */
.genesis-float:hover{
  transform: translateY(-2px);
  border-color: var(--join-border-hover);
  box-shadow: var(--join-shadow-hover);
}
.genesis-float:active{
  transform: translateY(0px) scale(0.99);
}

/* EMBLEM */
.genesis-float__emblem{
  width: var(--join-emblem);
  height: var(--join-emblem);
  border-radius: 999px;
  flex: 0 0 auto;

  background-image: url("/assets/favicon/genesis/GenesisEmblem64.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow:
    0 0 14px rgba(255,214,130,0.28),
    0 0 34px rgba(255,180,90,0.14),
    inset 0 0 0 1px rgba(0,0,0,0.22);
}

/* TEXT */
.genesis-float__k{
  font-size: var(--join-k-size) !important;
  letter-spacing: var(--join-k-track) !important;
  text-transform: uppercase;
  line-height: 1;
  color: var(--join-k-dark) !important;
}

.genesis-float__v{
  font-size: var(--join-v-size) !important;
  letter-spacing: var(--join-v-track) !important;
  text-transform: uppercase;
  font-weight: 950;
  line-height: 1;
  color: var(--join-v-dark) !important;
}

/* Theme lock: color will be IDENTICAL everywhere as long as html[data-theme] is consistent */
html[data-theme="light"] .genesis-float__k{ color: var(--join-k-light) !important; }
html[data-theme="light"] .genesis-float__v{ color: var(--join-v-light) !important; }
html:not([data-theme="light"]) .genesis-float__k{ color: var(--join-k-dark) !important; }
html:not([data-theme="light"]) .genesis-float__v{ color: var(--join-v-dark) !important; }

/* MOBILE */
@media (max-width: 640px){
  .genesis-float{
    right: calc(18px + env(safe-area-inset-right, 0px));
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    padding: 16px 18px;
  }
  .genesis-float__emblem{ width: 20px; height: 20px; }
  .genesis-float__v{ font-size: 14px !important; }
}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  .genesis-float{ transition: none !important; }
}


/* Theme lock: accept html / :root / body */
:root[data-theme="light"] .genesis-float__k,
html[data-theme="light"] .genesis-float__k,
body[data-theme="light"] .genesis-float__k{
  color: var(--join-k-light) !important;
}
:root[data-theme="light"] .genesis-float__v,
html[data-theme="light"] .genesis-float__v,
body[data-theme="light"] .genesis-float__v{
  color: var(--join-v-light) !important;
}

/* default (dark) */
:root:not([data-theme="light"]) .genesis-float__k,
html:not([data-theme="light"]) .genesis-float__k,
body:not([data-theme="light"]) .genesis-float__k{
  color: var(--join-k-dark) !important;
}
:root:not([data-theme="light"]) .genesis-float__v,
html:not([data-theme="light"]) .genesis-float__v,
body:not([data-theme="light"]) .genesis-float__v{
  color: var(--join-v-dark) !important;
}