/* ============================================================
   Nova FX · dropfx.css — rewards / airdrop ambient pack (.dx-*)
   Dark navy #050b1a · accents #38bdf8 / #2f6bff / #7c5cff
   All selectors namespaced .dx-*. Motion = transform/opacity
   only. prefers-reduced-motion → static end states.
   ============================================================ */

/* ============================================================
   1 · .dx-drop — falling "token drops" field
   JS injects .dx-dropfield into any element carrying .dx-drop.
   Each drop = .dx-fall (vertical, eased like gravity) wrapping
   .dx-sway (lateral sine + slight roll) wrapping a visual node:
   .dx-coin | .dx-coin.v-vio | .dx-gem | .dx-chip (wallet icon).
   ============================================================ */
.dx-dropfield{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.dx-fall{position:absolute;top:0;left:var(--x,50%);
 transform:translateY(-64px);
 animation:dx-fall var(--dur,7s) cubic-bezier(.45,.06,.62,.44) forwards;
 will-change:transform}
@keyframes dx-fall{to{transform:translateY(var(--dist,115vh))}}
.dx-sway{animation:dx-sway var(--sd,2.2s) ease-in-out infinite;will-change:transform}
@keyframes dx-sway{
 0%,100%{transform:translateX(calc(var(--sw,16px)*-1)) rotate(-8deg)}
 50%{transform:translateX(var(--sw,16px)) rotate(8deg)}}
/* pause mid-air while host is offscreen / tab hidden */
.dx-dropfield.dx-pause .dx-fall,
.dx-dropfield.dx-pause .dx-sway{animation-play-state:paused}

/* coin — radial-gradient token with specular glint + soft glow */
.dx-coin{width:var(--s,15px);height:var(--s,15px);border-radius:50%;
 background:radial-gradient(circle at 34% 28%,#cfeaff 0%,#38bdf8 34%,#2f6bff 72%,#1a35a0 100%);
 box-shadow:0 0 12px 2px rgba(56,189,248,.35),inset 0 -2px 5px rgba(4,10,30,.5)}
.dx-coin::after{content:'';display:block;width:34%;height:34%;margin:15% 0 0 17%;
 border-radius:50%;background:rgba(255,255,255,.6);filter:blur(.6px)}
.dx-coin.v-vio{background:radial-gradient(circle at 34% 28%,#e4dcff 0%,#7c5cff 40%,#4a2fd6 78%,#2c1a8e 100%);
 box-shadow:0 0 12px 2px rgba(124,92,255,.4),inset 0 -2px 5px rgba(10,6,40,.5)}
/* gem — small rotated diamond */
.dx-gem{width:var(--s,12px);height:var(--s,12px);border-radius:3.5px;transform:rotate(45deg);
 background:linear-gradient(135deg,#9fd8ff,#38bdf8 45%,#2f6bff);
 box-shadow:0 0 10px 1.5px rgba(56,189,248,.3)}
/* chip — glassy wallet-icon tile; JS swaps to .dx-coin if the img 404s */
.dx-chip{width:var(--s,24px);height:var(--s,24px);border-radius:8px;
 display:flex;align-items:center;justify-content:center;
 background:rgba(13,30,61,.82);border:1px solid rgba(120,170,255,.38);
 box-shadow:0 3px 14px rgba(2,8,25,.55),0 0 14px rgba(56,140,255,.16);
 backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.dx-chip img{width:68%;height:68%;object-fit:contain;border-radius:4px;display:block}
/* reduced-motion static pins: JS places a few resting coins */
.dx-dropfield .dx-pin{position:absolute}

/* ============================================================
   2 · .dx-pool — "prize pool" odometer (slot-machine digits)
   Host: <b class="dx-pool" data-value="2412384" data-prefix="$">
   JS builds per-digit reels (.dx-pool-d > .dx-pool-r > i×20)
   plus static chars (.dx-pool-s). Reels only ever roll forward.
   ============================================================ */
.dx-pool{display:flex;align-items:baseline;justify-content:center;
 font-variant-numeric:tabular-nums;line-height:1;
 background:none!important;-webkit-background-clip:border-box!important;
 background-clip:border-box!important;color:#e9f0ff}
.dx-pool-d{position:relative;display:inline-block;width:.64em;height:1em;
 overflow:hidden;flex:none;vertical-align:top}
.dx-pool-r{display:flex;flex-direction:column;will-change:transform;
 transition:transform 1.05s cubic-bezier(.18,.82,.26,1)}
.dx-pool.dx-live .dx-pool-r{transition-duration:.55s;transition-delay:0ms!important}
.dx-pool-r.dx-nosnap{transition:none!important}
.dx-pool-r i{display:block;height:1em;line-height:1em;font-style:normal;
 text-align:center;
 background:linear-gradient(135deg,#2f6bff,#38bdf8);
 -webkit-background-clip:text;background-clip:text;
 color:transparent;-webkit-text-fill-color:transparent}
.dx-pool-s{flex:none;
 background:linear-gradient(135deg,#2f6bff,#38bdf8);
 -webkit-background-clip:text;background-clip:text;
 color:transparent;-webkit-text-fill-color:transparent}
/* shield: odometer children are <span>/<i> — host rules like
   `.stat span{font-size:12px;display:block}` beat plain class
   selectors and shrink/columnize the reels. Re-assert geometry
   with two-class specificity. */
.dx-pool .dx-pool-d{position:relative;display:inline-block;width:.64em;height:1em;
 overflow:hidden;flex:none;vertical-align:top;font-size:inherit;line-height:1;
 color:inherit;margin:0;font-weight:inherit}
.dx-pool .dx-pool-r{display:flex;flex-direction:column;font-size:inherit;
 line-height:1;color:inherit;margin:0;font-weight:inherit}
.dx-pool .dx-pool-r i{font-size:inherit}
.dx-pool .dx-pool-s{display:inline-block;font-size:inherit;line-height:1;
 margin:0;font-weight:inherit;
 background:linear-gradient(135deg,#2f6bff,#38bdf8);
 -webkit-background-clip:text;background-clip:text;
 color:transparent;-webkit-text-fill-color:transparent}
/* block fallback: if display:flex is overridden (e.g. .stat b),
   children still flow inline + center via inherited text-align */

/* ============================================================
   3 · .dx-cal — animated weekly-drop timeline strip
   Host: <div class="dx-cal" data-weeks="8"> — JS builds cells.
   Rail = thin track behind dots; .dx-cal-fill grows to the
   "next drop" cell on reveal. Friday · 12:00 UTC cadence.
   ============================================================ */
.dx-cal{margin-top:40px;overflow-x:auto;scrollbar-width:none;
 -webkit-overflow-scrolling:touch}
.dx-cal::-webkit-scrollbar{display:none}
.dx-cal-walk{position:relative;display:flex;min-width:600px;padding:8px 0 4px}
.dx-cal-rail{position:absolute;top:25px;height:2px;border-radius:2px;
 background:rgba(148,178,255,.13)}
.dx-cal-fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:2px;
 background:linear-gradient(90deg,#2f6bff,#38bdf8);
 box-shadow:0 0 10px rgba(56,189,248,.45);
 transition:width 1.5s cubic-bezier(.2,.7,.25,1) .35s}
.dx-cal.in .dx-cal-fill{width:var(--fw,50%)}
.dx-cal-d{flex:1 0 86px;min-width:86px;text-align:center;position:relative;padding:0 4px}
.dx-cal-dot{position:relative;z-index:1;width:34px;height:34px;margin:0 auto;
 border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:#0b1834;border:1px solid rgba(148,178,255,.22);color:#8db8ff;
 transition:border-color .3s}
.dx-cal-d.is-done .dx-cal-dot{border-color:rgba(53,208,138,.5);color:#35d08a;
 background:rgba(53,208,138,.08)}
.dx-cal-d.is-up .dx-cal-dot{color:#42598a;border-color:rgba(148,178,255,.12)}
.dx-cal-d.is-next .dx-cal-dot{color:#fff;border-color:transparent;
 background:linear-gradient(135deg,#2f6bff,#38bdf8);
 animation:dx-pulse 2.3s ease-out infinite}
@keyframes dx-pulse{
 0%{box-shadow:0 6px 18px rgba(47,107,255,.45),0 0 0 0 rgba(56,189,248,.5)}
 70%{box-shadow:0 6px 18px rgba(47,107,255,.45),0 0 0 13px rgba(56,189,248,0)}
 100%{box-shadow:0 6px 18px rgba(47,107,255,.45),0 0 0 0 rgba(56,189,248,0)}}
/* checkmark draws itself on reveal (per-cell delay via --cd) */
.dx-cal-check path{stroke-dasharray:24;stroke-dashoffset:24;
 transition:stroke-dashoffset .55s cubic-bezier(.4,0,.3,1) var(--cd,.4s)}
.dx-cal.in .dx-cal-check path{stroke-dashoffset:0}
.dx-cal-date{margin-top:10px;font-size:12px;font-weight:600;color:#c7d6f5;white-space:nowrap}
.dx-cal-d.is-up .dx-cal-date{color:#5f77a8}
.dx-cal-num{margin-top:2px;font-size:10.5px;font-weight:600;letter-spacing:.09em;
 text-transform:uppercase;color:var(--dim)}
.dx-cal-d.is-next .dx-cal-num{color:#38bdf8}
.dx-cal-tag{display:inline-block;margin-top:7px;padding:2px 9px;border-radius:999px;
 font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 color:#38bdf8;border:1px solid rgba(56,189,248,.4);background:rgba(56,189,248,.08);
 white-space:nowrap}

/* ============================================================
   4 · .dx-badge — floating claim-style reward chips
   Inline pill by default; data-pos="tl|tr|mr|bl|br" pins it
   absolutely inside a position:relative ancestor (hero section).
   Bob = gentle ±6px drift + ±1.4° roll, phase via --bo, period
   via --bd (JS randomizes both if unset). Hidden < 940px when
   position-pinned so text is never covered on small screens.
   ============================================================ */
.dx-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;
 border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.02em;
 color:#cfe4ff;white-space:nowrap;
 background:linear-gradient(160deg,rgba(17,34,66,.88),rgba(9,19,42,.78));
 border:1px solid rgba(96,150,255,.38);
 box-shadow:0 10px 26px rgba(2,8,25,.5),inset 0 1px 0 rgba(255,255,255,.08),0 0 18px rgba(56,140,255,.1);
 backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 animation:dx-bob var(--bd,6.4s) ease-in-out infinite;
 animation-delay:var(--bo,0s);will-change:transform}
.dx-badge i{flex:none;width:7px;height:7px;border-radius:50%;
 background:#38bdf8;box-shadow:0 0 9px 2px rgba(56,189,248,.55)}
.dx-badge b{font-weight:700;color:#fff}
.dx-badge.v-vio i{background:#7c5cff;box-shadow:0 0 9px 2px rgba(124,92,255,.55)}
.dx-badge.v-grn i{background:#35d08a;box-shadow:0 0 9px 2px rgba(53,208,138,.5)}
.dx-badge[data-pos]{position:absolute;z-index:2}
.dx-badge[data-pos=tl]{top:6%;left:2.5%}
.dx-badge[data-pos=tr]{top:20%;right:0}
.dx-badge[data-pos=mr]{top:46%;right:3%}
.dx-badge[data-pos=bl]{bottom:16%;left:0}
.dx-badge[data-pos=br]{bottom:11%;right:2%}
@keyframes dx-bob{
 0%,100%{transform:translateY(-5px) rotate(-1.4deg)}
 50%{transform:translateY(6px) rotate(1.4deg)}}
@media (max-width:940px){.dx-badge[data-pos]{display:none}}

/* ============================================================
   5 · .dx-burst — one-shot confetti canvas (JS-owned)
   Fixed full-viewport layer above content, below .nav(100)/modal.
   ============================================================ */
.dx-burst{position:fixed;inset:0;width:100%;height:100%;
 pointer-events:none;z-index:120}

/* ============================================================
   Reduced motion — every animation collapses to its end state;
   JS additionally swaps to static renderers (no spawns/timers).
   ============================================================ */
@media (prefers-reduced-motion:reduce){
 .dx-fall,.dx-sway,.dx-badge,.dx-cal-d.is-next .dx-cal-dot{animation:none!important}
 .dx-cal-fill,.dx-cal-check path,.dx-pool-r{transition:none!important}
 .dx-badge[data-pos]{transform:none}
}