/* Styles for /r/<code> — the invite page a referrer shares. Loaded after
   legal.css, which supplies the tokens, navbar, footer and buttons.
   Figma: "Website — Referral invite page" on the Custom Ref Codes page. One
   centred column: the badge render, headline, code pill, and on desktop a
   QR to hand the invite to a phone; on a phone, a direct download button. */

.ref-page {
  padding: 72px 80px 80px;
}

.ref-invite {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

/* ── Entrance ─────────────────────────────────────────────────────────────
   The same arrival as the landing hero: each piece rises and fades in, one
   after the other, on GSAP's default power1.out curve and the landing
   page's own timings (0.2s in, then 0.15–0.2s between pieces). */
@keyframes ref-rise {
  from { opacity: 0; transform: translateY(var(--rise, 40px)); }
  to { opacity: 1; transform: none; }
}

.ref-invite > * {
  animation: ref-rise 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.ref-badge   { --rise: 60px; animation-duration: 1s; animation-delay: 0.2s; }
.ref-title   { animation-delay: 0.4s; }
.ref-lede    { --rise: 30px; animation-delay: 0.55s; }
.ref-code    { --rise: 24px; animation-delay: 0.7s; }
.ref-download,
.ref-scan    { --rise: 20px; animation-delay: 0.9s; }

/* ── Badge video ──────────────────────────────────────────────────────────
   The render sits on its own near-black; the four edge fades melt that into
   the page so the badge reads as floating rather than boxed. Sizes are the
   design's 420 (desktop) and 360 (phone), fades 78px, i.e. 18.6% a side. */
.ref-badge {
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1;
  overflow: hidden;
}

.ref-badge-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #090909;
}

.ref-badge-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #090909 0%, transparent 18.6%, transparent 81.4%, #090909 100%),
    linear-gradient(to right, #090909 0%, transparent 18.6%, transparent 81.4%, #090909 100%);
}

/* ── Copy ─────────────────────────────────────────────────────────────── */

.ref-title {
  margin: 0 0 16px;
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #ededef;
  text-wrap: balance;
}

.ref-title-accent { color: var(--color-accent-gold); }

.ref-lede {
  max-width: 322px;
  margin: 0 0 32px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-muted);
}

/* ── Code pill ────────────────────────────────────────────────────────── */

.ref-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(360px, 100%);
  padding: 4px 4px 4px 16px;
  border-radius: 500px;
  border: 1px solid #161618;
  background: #101012;
}

.ref-code-text {
  min-width: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ref-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 8px 12px;
  border: 0;
  border-radius: 100px;
  background: var(--color-accent-gold);
  color: #090909;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: -0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--transition-fast), transform 140ms var(--ease-out-ui);
}

.ref-copy:active { transform: scale(0.97); }

.ref-copy:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .ref-copy:hover { background-color: #e9c23a; }
}

/* Icon slot: the copy glyph swaps for a check on success, each scaling
   through 0.6 so the change reads as a pop rather than a cut. */
.ref-copy-glyph {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
}

.ref-copy-icon {
  position: absolute;
  inset: 0;
  width: 16px;
  height: 16px;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.ref-copy-icon-check { opacity: 0; transform: scale(0.6); }
.ref-copy.is-copied .ref-copy-icon-copy { opacity: 0; transform: scale(0.6); }
.ref-copy.is-copied .ref-copy-icon-check { opacity: 1; transform: none; }

.ref-copy-label {
  display: inline-block;
  min-width: 70px;
  text-align: center;
}

/* ── The copy moment ────────────────────────────────────────────────────
   Three things fire together when the code lands on the clipboard: a wave
   runs from the button across the letters (each lifts, turns gold and
   glows as it passes), a sheet of light leaves the button's edge and sweeps
   the pill, and a few sparks fly off the button. All driven from main.ts
   with the Web Animations API; these are the resting styles. */
.ref-code { position: relative; overflow: hidden; }

.ref-code-char {
  display: inline-block;
  will-change: transform;
}

.ref-code-sweep {
  position: absolute;
  top: -20%;
  left: 0;
  width: 140px;
  height: 140%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(253, 211, 63, 0) 0%, rgba(253, 211, 63, 0.28) 45%, rgba(253, 211, 63, 0.55) 60%, rgba(253, 211, 63, 0) 100%);
  filter: blur(6px);
}

.ref-code-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-accent-gold);
  box-shadow: 0 0 6px rgba(253, 211, 63, 0.8);
  pointer-events: none;
  opacity: 0;
}

/* ── Phone route: direct download ─────────────────────────────────────── */

.ref-download {
  display: none;
  align-items: center;
  justify-content: center;
  width: min(360px, 100%);
  min-height: 44px;
  margin-top: 24px;
  padding: 12px 24px;
  border-radius: 9999px;
  background: var(--color-accent-gold);
  color: #161618;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: background-color var(--transition-fast), transform 140ms var(--ease-out-ui);
}

.ref-download:active { transform: scale(0.98); }

.ref-download:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 3px;
}

/* ── Desktop route: scan ──────────────────────────────────────────────── */

.ref-scan {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 60px;
  margin-bottom: 28px;
  text-align: left;
}

.ref-qr {
  position: relative;
  width: 80px;
  height: 80px;
  flex: none;
  padding: 7px;
  border-radius: 11.4px;
  background: #ededef;
}

.ref-qr > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Aurus mark centred on the code, on a small pad of the same light grey. */
.ref-qr-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  width: 23px;
  height: 23px;
  padding: 2px;
  transform: translate(-50%, -50%);
  border-radius: 5.7px;
  background: #ededef;
}

.ref-scan-copy { max-width: 250px; }

.ref-scan-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.ref-scan-sub {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text-muted);
}

/* ── Divider above the footer ─────────────────────────────────────────── */

.ref-divider {
  width: min(100% - 160px, var(--section-max-width));
  height: 1px;
  margin: 0 auto;
  background: #27272b;
}

/* ── No code in the URL ───────────────────────────────────────────────── */

.ref-page.is-generic .ref-code { display: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */

/* A phone can't scan itself: the QR gives way to the download button, and
   the page tightens to the design's 15px gutter with the badge at 360. */
@media (max-width: 640px) {
  .ref-page { padding: 0 15px 40px; }
  .ref-badge { width: min(360px, 100%); }
  .ref-badge-fade {
    background:
      linear-gradient(to bottom, #090909 0%, transparent 18.3%, transparent 81.7%, #090909 100%),
      linear-gradient(to right, #090909 0%, transparent 18.3%, transparent 81.7%, #090909 100%);
  }
  .ref-title { max-width: 300px; font-size: 36px; }
  .ref-scan { display: none; }
  .ref-download { display: flex; }
  .ref-divider { width: min(100% - 30px, var(--section-max-width)); }
}

@media (prefers-reduced-motion: reduce) {
  .ref-invite > * { animation: none; }
  .ref-copy,
  .ref-download { transition: none; }
}

/* Live invite states extend the existing designer layout. */
.ref-page [hidden] { display: none !important; }
.ref-page .ref-action { display: flex; border: 0; cursor: pointer; font-family: inherit; }
.ref-page .ref-code-text { font-size: 14px; }
.ref-help { max-width: 420px; margin: 16px 0 0; color: var(--color-text-muted); font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; }
.ref-help:empty { display: none; }
.ref-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.ref-stores .download-btn { text-decoration: none; }