/*
Theme Name: Jew Coin
Theme URI: https://example.com/jew-coin
Author: Jew Coin
Description: One-page egg. The bar follows a Pump.fun coin. Settings are in the WordPress admin under Jew Coin.
Version: 1.0.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jew-coin
*/

:root {
  --studio: #f3f1ec;
  --ink: #161412;
  --muted: #8a8175;
  --gold: #e2b340;
  --track: #cfc6b8;
  --void: #050505;
  --shell-shade: #ddd6c8;
  --ca: #d9d3c8;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Outfit", "Avenir Next", system-ui, sans-serif;
}

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

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
}

.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.void,
.studio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.void {
  opacity: 0;
}

.void.is-on {
  opacity: 1;
  animation: coin-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.studio {
  background: var(--studio);
}

.studio.is-blast {
  animation: iris 780ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  clip-path: circle(150% at 50% 44%);
}

.coin {
  width: min(72vw, 280px);
  height: auto;
}

.title {
  margin: 24px 0 0;
  font-family: var(--display);
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 560;
  letter-spacing: 0.04em;
  color: var(--ca);
}

.ca {
  margin: 20px 0 0;
  max-width: 92vw;
  padding: 0 24px;
  text-align: center;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ca);
  word-break: break-all;
}

.egg-box {
  position: relative;
  width: 220px;
  height: 290px;
}

.egg-box.is-quake {
  animation: quake 80ms linear infinite;
}

.egg {
  position: absolute;
  top: 22px;
  left: 26px;
  width: 168px;
  height: 236px;
  border-radius: 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #f7f4ee 42%, #e4dcd0 78%, #cbbfae 100%);
  box-shadow:
    0 22px 40px rgba(40, 30, 20, 0.14),
    inset -16px -20px 28px rgba(120, 96, 60, 0.12),
    inset 12px 14px 18px rgba(255, 255, 255, 0.85);
}

.shard {
  position: absolute;
  top: 0;
  left: 0;
  width: 220px;
  height: 290px;
  background-size: 100% 100%;
  transform-origin: 110px 146px;
}

.meter {
  margin-top: 8px;
  width: min(78vw, 300px);
}

.track {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--shell-shade);
  background: var(--track);
}

.fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gold);
  width: 0%;
}

.pct {
  margin: 12px 0 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.mcap {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.track-ca {
  margin: 6px 0 0;
  padding: 0 16px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--muted);
  word-break: break-all;
}

.blast,
.ring {
  pointer-events: none;
  position: absolute;
}

.blast {
  inset: 0;
  background: radial-gradient(circle at 50% 44%, #fff 0%, #ffe7a3 12%, #ffb020 28%, #ff4d12 46%, rgba(0, 0, 0, 0) 66%);
  animation: blast 780ms ease-out forwards;
}

.ring {
  top: 44%;
  left: 50%;
  width: 192px;
  height: 192px;
  margin: -96px 0 0 -96px;
  border-radius: 50%;
  border: 4px solid var(--gold);
  animation: ring 720ms ease-out forwards;
}

.spark {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--gold);
  animation: ring 500ms ease-out forwards;
}

@keyframes quake {
  0%,
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  15% { transform: translate3d(-7px, 2px, 0) rotate(-2.5deg); }
  30% { transform: translate3d(8px, -1px, 0) rotate(3deg); }
  45% { transform: translate3d(-10px, 3px, 0) rotate(-3.5deg); }
  60% { transform: translate3d(9px, -2px, 0) rotate(2.5deg); }
  75% { transform: translate3d(-5px, 1px, 0) rotate(-1.5deg); }
}

@keyframes iris {
  to { clip-path: circle(0% at 50% 46%); }
}

@keyframes blast {
  0% { opacity: 0; transform: scale(0.15); }
  28% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

@keyframes ring {
  0% { opacity: 0.9; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(2.4); }
}

@keyframes coin-in {
  0% { opacity: 0; transform: scale(0.4) translateY(24px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .void.is-on,
  .studio.is-blast,
  .egg-box.is-quake,
  .blast,
  .ring,
  .spark {
    animation: none !important;
  }
}