/* Home: "How delegation works" (js/deleg-anim.js). The same deep sky as the pool circuit; the wallet on the
   left, the sequencers on the right, PROX flying between them along glowing paths. */
.deleg-anim {
  --dg-green: #3DE98A; --dg-blue: #6FC6FF; --dg-gold: #F5C542; --dg-ink: #EEF8F2; --dg-dim: #9DB0A8; --dg-card: rgba(10,18,26,0.82); --dg-line: rgba(140,220,190,0.22);
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; isolation: isolate; color: var(--dg-ink);
  background: radial-gradient(90% 120% at 70% 20%, #10213A 0%, #070D18 55%, #03060C 100%); border-color: rgba(120,180,220,0.2);
}
.deleg-anim:hover { transform: none; }
.deleg-anim::before, .deleg-anim::after { display: none; }
.dg-head { position: relative; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 16px 2px; pointer-events: none; }
.dg-head .home-title { color: var(--dg-ink); }
.dg-head .home-title .ico-duo { color: var(--dg-blue); }
.dg-stage { container-type: inline-size; position: relative; flex: 1 1 auto; aspect-ratio: 1000 / 500; min-height: 0; cursor: zoom-in; transform: translate(var(--dg-px, 0), var(--dg-py, 0)); transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
.dg-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dg-stars { position: absolute; inset: 0; z-index: -1; opacity: .7; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 34% 78%, #cfe 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 72% 64%, #bdf 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 46% 46%, #dff 50%, transparent 51%),
    radial-gradient(1px 1px at 20% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 84%, #cfe 50%, transparent 51%);
  animation: dg-twinkle 6s ease-in-out infinite alternate; }
@keyframes dg-twinkle { to { opacity: .35; } }
.dg-example { position: absolute; z-index: 6; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 9px; border-radius: 99px; font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .04em; color: var(--dg-dim); background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }

/* paths */
.dg-path { fill: none; stroke: url(#dgLine); stroke-width: 2; stroke-dasharray: 6 8; opacity: .25; transition: opacity 500ms ease; animation: dg-dash 1.2s linear infinite; }
.dg-path-back { stroke: var(--dg-green); stroke-opacity: .5; }
.dg-path-home { stroke: var(--dg-gold); stroke-opacity: .5; }
@keyframes dg-dash { to { stroke-dashoffset: -28; } }
[data-step="3"] #dgOut, [data-step="4"] #dgBack, [data-step="6"] #dgHome { opacity: 1; filter: url(#dgGlow); }
.dg-coin { filter: url(#dgGlow); transition: opacity 200ms ease; }
.dg-spark { transition: opacity 200ms ease; }

/* the lock of the chosen sequencer: a bar that fills while it earns */
.dg-seq-lock { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 400ms ease, opacity 400ms ease, margin 400ms ease; }
.dg-seq-lock span { display: block; margin-bottom: .3em; font-weight: 600; color: var(--dg-green); }
.dg-seq-lock i { display: block; height: .35em; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.dg-seq-lock b { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #3DE98A, #9CF7C4); box-shadow: 0 0 10px rgba(61,233,138,.7); }
[data-step="4"] .dg-seq-lock, [data-step="5"] .dg-seq-lock { max-height: 3em; opacity: 1; margin-top: .5em; }
[data-step="4"] .dg-seq-lock b { animation: dg-fill 2.6s cubic-bezier(.4,0,.2,1) forwards; }
[data-step="5"] .dg-seq-lock b { width: 100%; background: repeating-linear-gradient(90deg, #F5C542 0 8px, transparent 8px 13px); animation: dg-slide 1s linear infinite; box-shadow: none; }
[data-step="5"] .dg-seq-lock span { color: var(--dg-gold); }
[data-step="5"] .dg-seq-lock span::after { content: " → unlocking"; }
@keyframes dg-slide { to { background-position: 26px 0; } }

/* the wallet */
.dg-wallet {
  position: absolute; left: 3.5%; top: 13%; width: 29%; min-height: 62%; display: flex; flex-direction: column; gap: 2.4%; padding: 2.2% 2%;
  border-radius: max(12px, 2.90cqw); background: linear-gradient(180deg, rgba(20,34,44,.95), rgba(8,14,20,.95));
  box-shadow: 0 0 0 1px rgba(160,230,200,.18), 0 30px 60px -30px rgba(0,0,0,.9), 0 0 50px -20px rgba(61,233,138,.35);
  font-size: max(8px, 1.52cqw); transition: box-shadow 500ms ease, transform 500ms cubic-bezier(.2,.8,.2,1);
}
[data-step="1"] .dg-wallet { box-shadow: 0 0 0 1.5px rgba(61,233,138,.6), 0 30px 60px -30px rgba(0,0,0,.9), 0 0 70px -14px rgba(61,233,138,.55); transform: scale(1.03); }
.dg-w-top { display: flex; align-items: center; gap: 6px; }
.dg-w-logo { width: 1.5em; height: 1.5em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8FF5BE, #1E8A58 70%); box-shadow: 0 0 10px rgba(61,233,138,.5); }
.dg-w-top b { font-size: 1.05em; }
.dg-w-dev { margin-left: auto; padding: .15em .55em; border-radius: 99px; font-size: .78em; color: var(--dg-green); background: rgba(61,233,138,.1); }
.dg-w-label { margin-top: 4%; color: var(--dg-dim); }
.dg-w-bal { display: flex; align-items: baseline; gap: .35em; font-variant-numeric: tabular-nums; }
.dg-w-bal .dg-free { font-size: 2.1em; font-weight: 650; letter-spacing: -.03em; }
.dg-w-bal small { color: var(--dg-dim); }
.dg-w-deleg { display: flex; justify-content: space-between; padding: .55em .7em; border-radius: .7em; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); font-variant-numeric: tabular-nums; transition: background 400ms ease, box-shadow 400ms ease; }
.dg-w-deleg span { color: var(--dg-dim); }
[data-step="3"] .dg-w-deleg, [data-step="4"] .dg-w-deleg { background: rgba(111,198,255,.1); box-shadow: inset 0 0 0 1px rgba(111,198,255,.35); }
.dg-w-card { display: flex; align-items: center; gap: .5em; padding: .55em .7em; border-radius: .7em; background: rgba(255,255,255,.03); opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 400ms ease; }
.dg-w-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--dg-green); box-shadow: 0 0 8px var(--dg-green); }
.dg-w-st { margin-left: auto; color: var(--dg-green); font-size: .9em; }
[data-step="4"] .dg-w-card, [data-step="5"] .dg-w-card { opacity: 1; transform: none; }
[data-step="5"] .dg-w-st { color: var(--dg-gold); }
[data-step="5"] .dg-w-st::after { content: " · stopping"; }
.dg-w-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .4em; margin-top: auto; }
.dg-btn { display: grid; place-items: center; padding: .6em 0; border-radius: .6em; font-weight: 600; font-size: .92em; color: var(--dg-dim); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: all 300ms ease; }
[data-step="2"] .dg-b-del, [data-step="3"] .dg-b-del { color: #04130B; background: linear-gradient(180deg, #7DF5AF, #3DCB7E); box-shadow: 0 0 18px rgba(61,233,138,.5); }
[data-step="3"] .dg-b-del { animation: dg-press 600ms ease 200ms 1; }
[data-step="5"] .dg-b-stop { color: #1A1200; background: linear-gradient(180deg, #FFE28A, #F5C542); box-shadow: 0 0 18px rgba(245,197,66,.5); animation: dg-press 600ms ease 300ms 1; }
[data-step="6"] .dg-b-wd { color: #04130B; background: linear-gradient(180deg, #9CD9FF, #6FC6FF); box-shadow: 0 0 18px rgba(111,198,255,.5); animation: dg-press 600ms ease 200ms 1; }
@keyframes dg-press { 40% { transform: scale(.9); } 100% { transform: scale(1); } }

/* the amount chip */
.dg-amount { position: absolute; left: 41%; top: 16%; padding: .35em .8em; border-radius: 99px; font: 700 max(9px, 1.59cqw)/1.2 var(--font-ui); color: #1A1200; background: linear-gradient(180deg, #FFE28A, #F5C542); box-shadow: 0 0 20px rgba(245,197,66,.55); opacity: 0; transform: translateY(8px) scale(.9); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); }
[data-step="3"] .dg-amount { opacity: 1; transform: none; }

/* sequencers */
.dg-seqs { position: absolute; right: 3.5%; top: 9%; width: 27%; display: flex; flex-direction: column; gap: 5%; }
.dg-seq { padding: .6em .8em; border-radius: .9em; font-size: max(8px, 1.45cqw); background: var(--dg-card); box-shadow: 0 0 0 1px var(--dg-line); opacity: .55; transform: translateX(14px); transition: opacity 500ms ease, transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow 400ms ease; }
.dg-seq:nth-child(2) { transition-delay: 80ms; } .dg-seq:nth-child(3) { transition-delay: 160ms; }
.deleg-anim.is-live .dg-seq { opacity: .75; transform: none; }
.dg-seq-top { display: flex; align-items: center; gap: .5em; margin-bottom: .3em; }
.dg-seq-ico { width: 1.1em; height: 1.1em; border-radius: .3em; background: linear-gradient(135deg, var(--dg-blue), #3A6FD8); }
.dg-seq-top em { margin-left: auto; font-style: normal; font-size: .8em; color: var(--dg-dim); }
.dg-seq-row { display: flex; justify-content: space-between; color: var(--dg-dim); font-variant-numeric: tabular-nums; }
.dg-seq-row b { color: var(--dg-ink); font-weight: 600; }
[data-step="2"] .dg-seq.is-pick, [data-step="3"] .dg-seq.is-pick, [data-step="4"] .dg-seq.is-pick, [data-step="5"] .dg-seq.is-pick, [data-step="6"] .dg-seq.is-pick {
  opacity: 1; box-shadow: 0 0 0 1.5px var(--dg-green), 0 0 34px -6px rgba(61,233,138,.6); transform: translateX(-6px) scale(1.04);
}
.dg-pointer { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.12); left: 92%; top: 72%; opacity: 0; transition: left 900ms cubic-bezier(.2,.8,.2,1), top 900ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease; pointer-events: none; }
[data-step="2"] .dg-pointer { opacity: 1; left: 84%; top: 18%; animation: dg-click 400ms ease 1000ms 2; }
@keyframes dg-click { 50% { transform: scale(.7); } }

/* rewards coming back */
.dg-reward { position: absolute; left: 37%; top: 50%; padding: .35em .8em; border-radius: 99px; font: 600 max(9px, 1.52cqw)/1.2 var(--font-ui); color: #04130B; background: linear-gradient(180deg, #9CF7C4, #3DE98A); box-shadow: 0 0 22px rgba(61,233,138,.55); opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 500ms cubic-bezier(.2,.8,.2,1); font-variant-numeric: tabular-nums; }
.dg-reward span { font-weight: 500; opacity: .75; }
[data-step="4"] .dg-reward { opacity: 1; transform: none; }

/* footer: steps and caption */
.dg-foot { position: relative; z-index: 5; padding: 9px 16px 11px; background: linear-gradient(180deg, rgba(8,14,20,.72), #060B10); border-top: 1px solid rgba(255,255,255,.07); }
.dg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 0; padding: 0; list-style: none; }
.dg-steps li { min-width: 0; font-size: 12.5px; color: #6E7F78; }
.dg-steps li i { display: block; height: 2px; margin-bottom: 5px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.dg-steps li i::after { content: ""; display: block; height: 100%; width: 0; background: var(--dg-green); }
.dg-steps li.is-done i::after { width: 100%; }
.dg-steps li.is-on i::after { animation: dg-fill 3s linear forwards; }
@keyframes dg-fill { to { width: 100%; } }
.dg-steps li.is-on, .dg-steps li.is-done { color: var(--dg-ink); }
.dg-steps li b { color: var(--dg-green); font-weight: 650; }
.dg-steps li span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dg-caption { min-height: 2.9em; margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--dg-dim); }
.deleg-anim .circuit-expand { pointer-events: auto; margin-left: auto; }
/* full screen: six steps on one line */
.anim-full .dg-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .dg-steps li { font-size: 11.5px; }
  .dg-caption { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .dg-stars, .dg-path, .dg-btn, .dg-pointer { animation: none !important; }
  .dg-stage { transform: none; }
}

.dg-w-btns { margin-top: auto; padding-top: 6%; }
.dg-btn { white-space: nowrap; overflow: hidden; }

/* a narrow card (phones, two columns on a small screen): the buttons one under the other */
@container (max-width: 540px) {
  .dg-wallet { width: 31%; left: 3%; }
  .dg-w-dev { display: none; }
  .dg-w-btns { grid-template-columns: minmax(0, 1fr); gap: .3em; }
  .dg-btn { padding: .4em 0; }
  .dg-seqs { width: 30%; right: 2.5%; }
  .dg-seq-top em { display: none; }
}
/* the paths keep their width when the scene stretches */
.dg-path { vector-effect: non-scaling-stroke; }
@media (max-width: 720px) {
  .dg-stage { aspect-ratio: 1000 / 720; }
  .dg-wallet { top: 6%; min-height: 0; }
  .dg-seqs { top: 6%; }
}