/* $PEG, the stable pig on Arc
   dials: variance 7 / motion 5 / density 2
   the picture is the page: one photoreal pig on a glowing line, copy in the empty left.
   the pig is a piggy bank: hold it, it shakes, coins pour out and pile on the line.
   depth around it: giant drifting PEG watermark, light rays, ambient bokeh coins, live pool stats.
   one accent (paper white on blue), one radius (18px), one theme. */

:root {
  --blue: #0b2fb0;
  --blue-deep: #051a6e;
  --blue-ink: #04123f;
  --paper: #f4f7ff;
  --paper-dim: #b9cbff;
  --pink: #f7a9b8;
  --green: #7dffb0;
  --line: rgba(244, 247, 255, .26);
  --r: 18px;
  --display: 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  /* where the pig and the line sit inside the hero image, as fractions of the rendered image box */
  --pig-x: .585; --pig-y: .30; --pig-w: .215; --pig-h: .50;
  --line-y: .688;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--blue); color: var(--paper);
  font: 16px/1.5 var(--display);
  display: grid; grid-template-rows: auto 1fr auto auto;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }

/* ---------- glyph: the ( $ ) ring in pure CSS ---------- */
.glyph { position: relative; display: inline-grid; place-items: center; width: 1em; height: 1em; font-size: 40px; color: var(--paper); flex: none; }
.glyph i { position: absolute; inset: 0; border-radius: 50%; border: .11em solid var(--paper); border-color: var(--paper) transparent var(--paper) transparent; }
.glyph i:first-child { transform: rotate(28deg); }
.glyph i:nth-child(2) { transform: rotate(-152deg); }
.glyph b { font: 900 .5em/1 var(--display); letter-spacing: -.02em; }
.glyph--lg { font-size: clamp(56px, 8vw, 118px); }

/* ---------- bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; gap: 22px; padding: 14px 22px;
  background: linear-gradient(rgba(4,18,63,.55), rgba(4,18,63,0));
}
.bar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 900 22px var(--display); letter-spacing: .02em; }
.bar__brand img { border-radius: 50%; border: 2px solid var(--paper); }
.bar__nav { display: flex; gap: 20px; margin-left: 8px; font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.bar__nav a { text-decoration: none; color: var(--paper-dim); }
.bar__nav a:hover { color: var(--paper); }
.bar > .btn { margin-left: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px;
  background: var(--paper); color: var(--blue-ink);
  font: 700 15px var(--display); text-decoration: none; white-space: nowrap;
  border: 2px solid var(--paper); cursor: pointer;
  box-shadow: 0 10px 30px rgba(4,18,63,.45);
  transition: transform .14s ease, box-shadow .14s ease, background .14s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(4,18,63,.55); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: rgba(4,18,63,.25); color: var(--paper); box-shadow: none; backdrop-filter: blur(6px); }
.btn--ghost:hover { background: rgba(244,247,255,.12); }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--big { padding: 17px 30px; font-size: 16px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: clip; display: grid; align-items: center; }

.scene { position: absolute; inset: 0; z-index: 0; }
.scene__img {
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%;
  transition: filter .35s ease, transform .35s ease;
  will-change: transform;
}
/* light rays sweeping from the top, very slow */
.rays {
  position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: conic-gradient(from 180deg at 62% -10%, transparent 0deg, rgba(244,247,255,.16) 6deg, transparent 12deg, transparent 20deg, rgba(244,247,255,.10) 26deg, transparent 32deg, transparent 44deg, rgba(244,247,255,.14) 50deg, transparent 58deg, transparent 360deg);
  animation: rays 40s linear infinite;
}
@keyframes rays { to { transform: rotate(14deg) } }
.scene__wash {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,47,176,.96) 0%, rgba(11,47,176,.82) 26%, rgba(11,47,176,.25) 48%, rgba(11,47,176,0) 62%),
    linear-gradient(180deg, rgba(4,18,63,.35), transparent 30%, transparent 75%, rgba(4,18,63,.5));
}

.hero.is-shaking .scene__img { animation: shake .11s linear infinite; }
@keyframes shake { 0%{transform:translate(-4px,2px) rotate(-.5deg) scale(1.03)} 50%{transform:translate(4px,-2px) rotate(.5deg) scale(1.03)} 100%{transform:translate(-3px,3px) rotate(-.3deg) scale(1.03)} }

/* giant watermark behind the pig, two copies so it can loop */
.mark {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  display: flex; align-items: center; gap: .3em;
  font: 900 clamp(280px, 42vw, 620px)/1 var(--display); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 2px rgba(244,247,255,.13);
  white-space: nowrap; animation: mark 60s linear infinite;
}
@keyframes mark { to { transform: translateX(-50%) } }

.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fx--back { z-index: 0; }
.fx--front { z-index: 4; }

.hot {
  position: absolute; z-index: 3; border: 0; background: transparent; cursor: grab;
  border-radius: 40% 40% 45% 45%; padding: 0;
  left: var(--hot-l, 60%); top: var(--hot-t, 30%); width: var(--hot-w, 22%); height: var(--hot-h, 50%);
}
.hot:active { cursor: grabbing; }
.hot:focus-visible { outline: 3px dashed var(--paper); outline-offset: 6px; }

.bank {
  position: absolute; z-index: 5; transform: translate(-50%, 0);
  left: var(--bank-l, 70%); top: var(--bank-t, 72%);
  display: grid; justify-items: center; gap: 1px;
  padding: 10px 22px; border-radius: 999px;
  background: rgba(4,18,63,.55); border: 1px solid var(--line); backdrop-filter: blur(10px);
  text-align: center; white-space: nowrap; pointer-events: none;
  transition: transform .2s, border-color .2s;
}
.bank__label { font: 600 11px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--paper-dim); }
.bank__num { font: 900 clamp(28px, 3.2vw, 42px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--paper); }
.bank__num small { font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }
.bank__hint { font: 500 11px var(--mono); color: var(--paper-dim); letter-spacing: .06em; }
.bank.is-shaking { border-color: var(--paper); transform: translate(-50%, 0) scale(1.04); }
.bank.is-shaking .bank__label { color: var(--green); }

.copy { position: relative; z-index: 2; max-width: 640px; padding: 110px 6vw 70px; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  padding: 6px 14px 6px 8px; border: 1px solid var(--line); border-radius: 999px;
  font: 600 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper);
  background: rgba(4,18,63,.3); backdrop-filter: blur(6px);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(125,255,176,.25); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(125,255,176,0) } }
.title { display: flex; align-items: center; gap: .18em; margin: 0; line-height: .9; }
.title__word { font: 900 clamp(84px, 13vw, 190px)/.9 var(--display); letter-spacing: -.035em; color: var(--paper); text-shadow: 0 20px 60px rgba(4,18,63,.5); }
.tagline { margin: 14px 0 12px; display: flex; gap: .55em; font: 700 clamp(15px, 1.6vw, 20px) var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--paper-dim); }
.tagline__pig { color: var(--pink); }
.sub { margin: 0 0 24px; max-width: 44ch; color: var(--paper-dim); font-size: clamp(16px, 1.3vw, 18px); }

.ca {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  max-width: 560px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  background: rgba(4,18,63,.42); backdrop-filter: blur(8px);
}
.ca__label { padding: 13px 16px; font: 700 12px var(--mono); letter-spacing: .14em; background: rgba(244,247,255,.12); }
.ca__value { padding: 13px 14px; font: 13px/1.3 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ca__btn { border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--paper); padding: 13px 18px; font: 700 13px var(--display); cursor: pointer; }
.ca__done { display: none; }
.ca.is-copied .ca__idle { display: none; }
.ca.is-copied .ca__done { display: inline; }
.ca.is-copied { animation: copied .6s; }
@keyframes copied { 0% { box-shadow: 0 0 0 0 rgba(244,247,255,.9) } 100% { box-shadow: 0 0 0 22px rgba(244,247,255,0) } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 18px; }
.stats {
  display: grid; grid-template-columns: repeat(4, auto); gap: 0; margin: 0 0 18px;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; width: max-content; max-width: 100%;
  background: rgba(4,18,63,.42); backdrop-filter: blur(8px);
}
.stats[hidden] { display: none; }
.stats > div { display: grid; gap: 1px; padding: 10px 18px; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats dt { font: 600 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-dim); }
.stats dd { margin: 0; font: 700 15px var(--display); font-variant-numeric: tabular-nums; color: var(--paper); }
.stats dd.up { color: var(--green); }
.stats dd.down { color: var(--pink); }
.socials { display: flex; flex-wrap: wrap; gap: 18px; font: 600 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.socials a { color: var(--paper-dim); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.socials a:hover { color: var(--paper); border-color: var(--paper); }

/* ---------- tape + footer ---------- */
.tape { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--blue-deep); }
.tape__track { display: flex; width: max-content; animation: tape 38s linear infinite; }
.tape__track span { padding: 10px 26px; font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--paper-dim); border-right: 1px solid var(--line); }
.tape__track span b { color: var(--paper); font-weight: 600; }
@keyframes tape { to { transform: translateX(-50%) } }
.foot { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; padding: 14px 16px; font: 500 12px var(--mono); color: var(--paper-dim); letter-spacing: .04em; background: var(--blue-deep); }
.foot span:first-child { color: var(--paper); font-weight: 600; }
.foot code { font: inherit; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .mark { font-size: 240px; }
  .stats { grid-template-columns: repeat(2, 1fr); width: 100%; }
  .stats > div:nth-child(2) { border-right: 0; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  :root { --pig-x: .30; --pig-y: .28; --pig-w: .40; --pig-h: .50; --line-y: .688; }
  .hero { grid-template-rows: 58vh auto; align-items: end; min-height: 0; }
  .scene { height: 62vh; }
  .scene__img { object-position: 50% 50%; }
  .scene__wash { background: linear-gradient(180deg, rgba(4,18,63,.35), transparent 30%, transparent 55%, var(--blue) 100%); }
  .copy { grid-row: 2; padding: 0 5vw 40px; max-width: none; }
  .title__word { font-size: clamp(84px, 24vw, 140px); }
  .bar__nav { display: none; }
  .ca { grid-template-columns: auto 1fr; }
  .ca__btn { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .tape__track, .dot, .rays, .mark { animation: none; }
  .hero.is-shaking .scene__img { animation: none; }
}