/* charhut.co — a VHS-sleeve style landing page.
   Tweak the look here; the sphere itself is rendered by ball.js. */

:root {
  --bg: #050505;
  --bar: #aaa89b;         /* warm grey of the sleeve stripes */
  --column: min(400px, 100vw - 32px);
  /* Geometry below is measured from the original sleeve (406px-wide column);
     --u scales those pixel values to the current column width. */
  --u: calc(var(--column) / 406);
  --gap: calc(23 * var(--u));      /* gap between stripes (constant) */
  --ball: calc(315 * var(--u));    /* sphere diameter */
  --serif: "Times New Roman", Times, "Nimbus Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  background:
    radial-gradient(120% 60% at 50% 0%, #1a1a1a 0%, var(--bg) 60%),
    var(--bg);
  color: var(--bar);
  font-family: var(--sans);
  display: flex;
  justify-content: center;
  padding: 12vh 16px 10vh;
  -webkit-font-smoothing: antialiased;
}

.sleeve {
  width: var(--column);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---- title block ---- */

.title { display: flex; flex-direction: column; align-items: stretch; }

.rule { display: block; height: 3px; background: var(--bar); }

.title h1 {
  margin: 0;
  padding: 0.05em 0 0.12em;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(3.6rem, 22vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--bar);
  position: relative;
}

.title h1 sup {
  position: absolute;
  right: 0.1em;
  bottom: 0.15em;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.22em;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ---- stripes + sphere ---- */

.bars {
  position: relative;
  margin-top: calc(26 * var(--u));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Each stripe sets its own height via --h (thin at the top, thick at the bottom). */
.bars i {
  display: block;
  height: calc(var(--h) * var(--u));
  background: var(--bar);
}

.ball {
  position: absolute;
  top: calc(-17 * var(--u));
  left: 50%;
  width: var(--ball);
  aspect-ratio: 1;
  transform: translateX(calc(-50% - 6 * var(--u)));
  border-radius: 50%;
  /* Static fallback if WebGL is unavailable; ball.js removes it once live. */
  background:
    radial-gradient(circle at 32% 28%, #fff6c8 0%, #ffd23a 12%, #ff8a1e 30%,
                    #f0245a 52%, #d62d94 68%, #2c6de6 92%, #163a80 100%);
}

.ball.is-live { background: none; }

/* Hard-edged drop shadow, same size as the ball, offset down-right.
   Semi-transparent black, so it darkens the stripes and vanishes on the gaps. */
.ball-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: translate(9%, 11%);
  background: radial-gradient(circle, rgba(0,0,0,0.36) 98.5%, rgba(0,0,0,0) 100%);
  z-index: -1;
}

#ball {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* ---- badge ---- */

.badge {
  align-self: center;
  margin-top: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 16px 5px;
  border: 3px solid var(--bar);
  border-radius: 6px;
  color: var(--bar);
}

.badge-mark {
  font-weight: 900;
  font-style: italic;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: -0.06em;
}

.badge-sub {
  margin-top: 4px;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  /* ball.js checks this too and renders a single still frame */
}