/* ============================================================
   HYPEHAUS — CTA SYSTEM  (all roads → join.hypehaus.org)
   Hero · mid-scroll band · 2027 · final · mobile sticky bar
   ============================================================ */

/* primary CTA — feels like entering, not subscribing */
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 12px; font-weight: 600;
  color: var(--ink); background: var(--white);
  padding: 17px 30px; border: 1px solid var(--white); border-radius: 2px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
}
.cta .arrow { transition: transform .4s var(--ease); }
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, var(--crimson), var(--plum));
  transform: translateX(-101%); transition: transform .5s var(--ease);
}
.cta > * { position: relative; z-index: 1; }
.cta:hover { color: #fff; border-color: transparent; }
.cta:hover::before { transform: translateX(0); }
.cta:hover .arrow { transform: translateX(5px); }
.cta:active { transform: scale(.98); }

.cta--ghost {
  background: transparent; color: var(--white); border-color: var(--w25);
}
.cta--ghost:hover { color: #fff; border-color: transparent; }

.cta-note {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em;
  font-size: 10px; color: var(--w32); margin-top: 16px;
}
.cta-note b { color: var(--crimson); font-weight: 500; }

/* hero CTA cluster */
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }

/* —— MID-SCROLL CTA BAND —— */
.cta-band {
  text-align: center;
  padding: clamp(90px, 16vh, 200px) var(--gutter);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 80vw; height: 80vw; max-width: 900px; max-height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(233,30,71,0.10), transparent 62%);
  pointer-events: none;
}
.cta-band .k {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.04em; line-height: 0.92;
  font-size: clamp(30px, 5.5vw, 82px); margin: 18px 0 30px; position: relative;
}
.cta-band .k em { font-style: italic; font-weight: 500; text-transform: none; color: var(--w55); }

/* —— MOBILE STICKY CTA BAR —— */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8500;
  display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(3,3,4,0.78);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-top: 1px solid var(--w08);
  transform: translateY(120%);
  transition: transform .55s var(--ease);
}
.stickybar.show { transform: translateY(0); }
.stickybar__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stickybar__txt .a { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: 14px; }
.stickybar__txt .b { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 9px; color: var(--w40); }
.stickybar .cta { padding: 13px 18px; font-size: 10px; letter-spacing: 0.16em; flex-shrink: 0; }

@media (max-width: 880px) {
  .stickybar { display: flex; }
}

/* —— 2027 no-WebGL fallback: static aurora so the year still lands —— */
#future.no-gl #future-canvas { display: none; }
#future.no-gl .pin {
  background:
    radial-gradient(60% 50% at 50% 60%, rgba(168,85,247,0.22), transparent 70%),
    radial-gradient(40% 40% at 30% 35%, rgba(233,30,71,0.14), transparent 70%),
    radial-gradient(45% 40% at 72% 40%, rgba(46,168,92,0.10), transparent 70%);
}
#future.no-gl .pin::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 55% 45%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(255,255,255,0.5), transparent);
  background-size: 100% 100%;
  opacity: .8;
}

/* hero CTA stacks on mobile nicely; nav CTA hidden on small (sticky bar covers it) */
@media (max-width: 880px) {
  .nav__cta-desktop { display: none; }
}