html,
body {
  margin: 0;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

.stage {
  --t: 27.4s;
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 480px;
  height: 120px;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  border-radius: 6px;
  overflow: hidden;
  background-color: #7c3aed;
  animation: open var(--t) infinite;
}

.overlay::before {
  content: "";
  position: absolute;
  inset: -40px;
  background-image: linear-gradient(
    45deg,
    #6d28d9 25%,
    transparent 25%,
    transparent 50%,
    #6d28d9 50%,
    #6d28d9 75%,
    transparent 75%
  );
  background-size: 40px 40px;
  filter: blur(6px);
  animation: stripes 1.5s linear infinite;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2));
  pointer-events: none;
}

.content {
  position: relative;
  z-index: 1;
  height: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 230px;
  height: auto;

  filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(20, 5, 50, 0.5));
  color: #fff;
  font: 800 22px/1 "Segoe UI", Arial, sans-serif;
  opacity: 0;
  animation: logo-in var(--t) infinite;
}

.cta-wrap {
  opacity: 0;
  animation: cta-in var(--t) infinite;
}

.cta {
  position: relative;
  overflow: hidden;
  width: 180px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #9568fb;
  animation: press var(--t) infinite;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: hover var(--t) infinite;
}

.cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 70px;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: translateX(-90px) skewX(-20deg);
  animation: sheen var(--t) infinite;
}

.cta-text {
  position: relative;
  z-index: 1;
  font: 800 19px/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.07em;
  color: #fff;
}

.deposit-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  clip-path: inset(0 50% 0 50%);
  animation: deposit-open var(--t) infinite;
}

.deposit-text {
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  color: #fff;
  text-shadow: 0 2px 6px rgba(20, 5, 50, 0.35);
  animation: deposit-text-out var(--t) infinite;
}

.deposit-line {
  display: block;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
}

.deposit-line + .deposit-line { margin-top: 9px; }

.deposit-line em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.7);
}

.wheel {
  position: relative;
  flex: none;
  width: 160px;
  height: 120px;

  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 65%, transparent 100%);
  animation: deposit-wheel-out var(--t) infinite;
}

.wheel-layer {
  position: absolute;
  inset: 0;
  perspective: 500px;
}

.wheel-layer.dim {
  opacity: 0.4;
  filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 44%, transparent 56%, #000 70%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 44%, transparent 56%, #000 70%);
}

.wheel-layer.lit {
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 44%, #000 56%, transparent 70%);
  mask-image: linear-gradient(180deg, transparent 30%, #000 44%, #000 56%, transparent 70%);
}

.drum {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.drum span {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  backface-visibility: hidden;
}

.code-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 0 24px;
  clip-path: inset(0 50% 0 50%);
  animation: code-open var(--t) infinite;
}

.code-label {
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-stretch: 125%;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(20, 5, 50, 0.35);
  white-space: nowrap;
  animation: code-label-out var(--t) infinite;
}

.code-value {
  max-width: 264px;
  height: 60px;
  padding: 0 22px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 6px;
  background: #9568fb;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-weight: 900;
  font-stretch: 125%;
  font-size: 30px;
  line-height: 60px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  animation: code-value-out var(--t) infinite;
}

.final-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 50% 0 50%);
  animation: final-open var(--t) infinite;
}

.final-logo {
  width: 340px;
  height: auto;

  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(20, 5, 50, 0.5));
  animation: final-logo-in var(--t) infinite;
}

.tab {
  position: absolute;
  left: 90px;
  z-index: 0;
  width: 300px;
  height: 32px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #7c3aed;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 32'%3E%3Cpath d='M0 32V30A10 10 0 0 0 10 20V8A8 8 0 0 1 18 0H282A8 8 0 0 1 290 8V20A10 10 0 0 0 300 30V32Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 32'%3E%3Cpath d='M0 32V30A10 10 0 0 0 10 20V8A8 8 0 0 1 18 0H282A8 8 0 0 1 290 8V20A10 10 0 0 0 300 30V32Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  font-family: "Archivo", "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  font-stretch: 112%;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
}

.tab::before {
  content: "";
  position: absolute;
  left: -130px;
  width: 470px;
  height: 120px;
  background-image: linear-gradient(
    45deg,
    #6d28d9 25%,
    transparent 25%,
    transparent 50%,
    #6d28d9 50%,
    #6d28d9 75%,
    transparent 75%
  );
  background-size: 40px 40px;
  filter: blur(6px);
  animation: stripes 1.5s linear infinite;
}

.tab::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tab > * {
  position: relative;
  z-index: 1;
}

.tab svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.tab-top {
  top: -30px;
  padding-bottom: 2px;
  animation: tab-top var(--t) infinite;
}

.tab-top::before { top: -10px; }
.tab-top::after  { background: rgba(255, 255, 255, 0.08); }

.tab-bottom {
  top: 118px;
  padding-top: 2px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 32'%3E%3Cpath d='M0 0V2A10 10 0 0 1 10 12V24A8 8 0 0 0 18 32H282A8 8 0 0 0 290 24V12A10 10 0 0 1 300 2V0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 32'%3E%3Cpath d='M0 0V2A10 10 0 0 1 10 12V24A8 8 0 0 0 18 32H282A8 8 0 0 0 290 24V12A10 10 0 0 1 300 2V0Z'/%3E%3C/svg%3E");
  animation: tab-bottom var(--t) infinite;
}

.tab-bottom::before { top: -38px; }
.tab-bottom::after  { background: rgba(0, 0, 0, 0.2); }

.cursor {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  transform-origin: 3px 3px;
  offset-path: path("M232 138 C290 120 378 72 430 62 C433 74 446 108 468 142");
  offset-rotate: 0deg;
  offset-distance: 0%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  animation:
    pointer-move var(--t) infinite,
    pointer-click var(--t) infinite;
}

@keyframes open {
  0%       { clip-path: inset(0 50% 0 50% round 6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  2.919%   { clip-path: inset(0 0 0 0 round 6px); }
  94.891%      { clip-path: inset(0 0 0 0 round 6px); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  100%     { clip-path: inset(0 50% 0 50% round 6px); }
}

@keyframes logo-in {
  0%, 1.46%  { opacity: 0; transform: translateX(14px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  5.109%         { opacity: 1; transform: translateX(0); }
  22.628%     { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  25.912%     { opacity: 1; transform: translateX(-270px); }
  25.986%, 100% { opacity: 0; transform: translateX(-270px); }
}

@keyframes cta-in {
  0%, 1.46%  { opacity: 0; transform: translateX(-14px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  5.109%         { opacity: 1; transform: translateX(0); }
  22.628%     { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  25.912%     { opacity: 1; transform: translateX(220px); }
  25.986%, 100% { opacity: 0; transform: translateX(220px); }
}

@keyframes deposit-open {
  0%, 24.817%  { clip-path: inset(0 50% 0 50%); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  28.103%, 100% { clip-path: inset(0 0 0 0); }
}

@keyframes deposit-text-out {
  0%, 56.569%  { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  59.124%     { opacity: 1; transform: translateX(-300px); }
  59.198%, 100% { opacity: 0; transform: translateX(-300px); }
}

@keyframes deposit-wheel-out {
  0%, 56.569%  { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  59.124%     { opacity: 1; transform: translateX(300px); }
  59.198%, 100% { opacity: 0; transform: translateX(300px); }
}

@keyframes code-open {
  0%, 58.394% { clip-path: inset(0 50% 0 50%); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  61.679%, 100%   { clip-path: inset(0 0 0 0); }
}

@keyframes code-label-out {
  0%, 76.642% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  79.197%     { opacity: 1; transform: translateX(-320px); }
  79.27%, 100% { opacity: 0; transform: translateX(-320px); }
}

@keyframes code-value-out {
  0%, 76.642% { opacity: 1; transform: translateX(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  79.197%     { opacity: 1; transform: translateX(320px); }
  79.27%, 100% { opacity: 0; transform: translateX(320px); }
}

@keyframes final-open {
  0%, 78.467% { clip-path: inset(0 50% 0 50%); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  81.751%, 100% { clip-path: inset(0 0 0 0); }
}

@keyframes final-logo-in {
  0%, 78.467% { opacity: 0; transform: scale(0.94); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  82.482%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes tab-top {
  0%, 80.839% { opacity: 0; transform: translateY(100%); }
  81.022% { opacity: 1; transform: translateY(100%); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  84.307%, 91.606% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94.526% { opacity: 1; transform: translateY(100%); }
  94.708%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes tab-bottom {
  0%, 80.839% { opacity: 0; transform: translateY(-100%); }
  81.022% { opacity: 1; transform: translateY(-100%); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  84.307%, 91.606% { opacity: 1; transform: translateY(0); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  94.526% { opacity: 1; transform: translateY(-100%); }
  94.708%, 100% { opacity: 0; transform: translateY(-100%); }
}

@keyframes sheen {
  0%, 6.205% { transform: translateX(-90px) skewX(-20deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  9.124%, 100% { transform: translateX(200px) skewX(-20deg); }
}

@keyframes pointer-move {
  0%, 9.49%  { offset-distance: 0%; animation-timing-function: cubic-bezier(0.33, 0.35, 0.2, 1); }
  14.598%, 18.249% { offset-distance: 70.5%; animation-timing-function: cubic-bezier(0.45, 0, 0.9, 0.6); }
  22.263%, 100% { offset-distance: 100%; }
}

@keyframes pointer-click {
  0%, 14.964%  { transform: scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  15.402%, 15.876% { transform: scale(0.86); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  17.152%, 100% { transform: scale(1); }
}

@keyframes hover {
  0%, 12.773%      { opacity: 0; animation-timing-function: ease-out; }
  14.233%, 14.964% { opacity: 0.14; animation-timing-function: ease-out; }
  15.402%, 15.876% { opacity: 0; animation-timing-function: ease-out; }
  17.152%, 18.978% { opacity: 0.14; animation-timing-function: ease-in-out; }
  21.168%, 100% { opacity: 0; }
}

@keyframes press {
  0%, 14.964%  { transform: scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
  15.402%, 15.876% { transform: scale(0.96); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  17.152%, 100% { transform: scale(1); }
}

@keyframes stripes {
  from { background-position: 0 0; }
  to   { background-position: 40px -40px; }
}