/* ============================================================
   Nova FX · claimfx2.css — second-pass "always alive" layer
   for the Nova Points dashboard (claim.html).
   Extends the claimfx pack (.cl-*) with a .cl2-* namespace:
   injected HUD chrome, idle sweeps, hover states, click beats
   and post-connect cues. All motion = transform / opacity /
   filter / shadow steps. Idle loops rest until their host
   carries .cl2-live (in view + tab visible, JS-gated).
   prefers-reduced-motion → every effect parks in a static
   end state. No !important outside the reduced-motion block.
   ============================================================ */

/* ------------------------------------------------------------ 
   0 · plumbing — the one registered custom property (the
   conic border-beam angle; everything else is a plain var)
   ------------------------------------------------------------ */
@property --cl2a{syntax:'<angle>';initial-value:0deg;inherits:false}

/* ------------------------------------------------------------
   1 · hero eyebrow live-chip — pulsing green dot ::before +
   fade-rise entrance (.cl2-in), dot gated by .cl2-live
   ------------------------------------------------------------ */
.eyebrow.cl2-live-chip::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--grn);box-shadow:0 0 8px rgba(53,208,138,.7);
  animation:cl2-dot 2.2s ease-in-out infinite;animation-play-state:paused}
.eyebrow.cl2-live-chip.cl2-live::before{animation-play-state:running}
@keyframes cl2-dot{
  0%,100%{opacity:.45;box-shadow:0 0 8px rgba(53,208,138,.7)}
  50%{opacity:1;box-shadow:0 0 11px rgba(53,208,138,.9)}}
.eyebrow.cl2-in{animation:cl2-rise .6s cubic-bezier(.2,.7,.3,1) backwards}
@keyframes cl2-rise{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:none}}

/* ------------------------------------------------------------
   2 · drop-badge countdown — the ticking "3d 04:12:33" digits
   (JS swaps the <b> only; the "Next drop" text node is kept)
   ------------------------------------------------------------ */
.dx-badge b.cl2-cd{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------
   3 · balance count-up — tabular digits so the 0→8,214 roll
   never shifts the layout under the preview blur
   ------------------------------------------------------------ */
.cl-bal-num.cl2-tabnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------
   4 · .cl-bal sheen — glass band sweeps across the balance
   every 7s (skewX(-18deg), rests 60% of the cycle), rests
   while the card is offscreen (paused until .cl2-live)
   ------------------------------------------------------------ */
.cl-bal{position:relative;overflow:hidden}
.cl-bal::after{content:'';position:absolute;top:-12%;bottom:-12%;left:0;width:46%;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(200,220,255,0),rgba(200,225,255,.13) 42%,
    rgba(235,245,255,.2) 50%,
    rgba(200,225,255,.13) 58%,rgba(200,220,255,0));
  transform:skewX(-18deg);opacity:0;
  animation:cl2-sheen 7s ease-in-out infinite;animation-play-state:paused}
.cl-card.cl2-live .cl-bal::after{animation-play-state:running}
@keyframes cl2-sheen{
  0%{transform:skewX(-18deg) translateX(-120%);opacity:0}
  8%{opacity:.6}
  40%{transform:skewX(-18deg) translateX(258%);opacity:0}
  100%{transform:skewX(-18deg) translateX(258%);opacity:0}}

/* ------------------------------------------------------------
   5 · .cl-card HUD — JS injects (a) four corner brackets
   .cl2-hud that pop in on reveal (scale .5→1, 90ms stagger),
   (b) a .cl2-scan scanline band sweeping top→bottom on an 8s
   loop (runs only while the card is .cl2-live), and (c) the
   .cl2-boot mono status line under the card header.
   ------------------------------------------------------------ */
.cl2-hud{position:absolute;z-index:2;pointer-events:none;
  width:var(--cl2-hu,14px);height:var(--cl2-hu,14px);
  border:0 solid var(--line2)}
.cl2-hud.cl2-in{animation:cl2-hudpop .42s cubic-bezier(.2,.8,.3,1.35) backwards;
  animation-delay:calc(var(--cl2-i,0)*90ms)}
.cl2-hud-tl{top:var(--cl2-ho,10px);left:var(--cl2-ho,10px);
  border-top-width:2px;border-left-width:2px}
.cl2-hud-tr{top:var(--cl2-ho,10px);right:var(--cl2-ho,10px);
  border-top-width:2px;border-right-width:2px}
.cl2-hud-bl{bottom:var(--cl2-ho,10px);left:var(--cl2-ho,10px);
  border-bottom-width:2px;border-left-width:2px}
.cl2-hud-br{bottom:var(--cl2-ho,10px);right:var(--cl2-ho,10px);
  border-bottom-width:2px;border-right-width:2px}
@keyframes cl2-hudpop{
  0%{transform:scale(.5);opacity:0}
  60%{opacity:1}
  100%{transform:scale(1);opacity:1}}
.cl2-scan{position:absolute;left:0;right:0;top:0;height:7%;z-index:2;
  pointer-events:none;opacity:0;
  background:linear-gradient(180deg,
    rgba(56,189,248,0),rgba(56,189,248,.02) 50%,
    rgba(56,189,248,.07) 88%,rgba(56,189,248,.16) 98%,rgba(56,189,248,0));
  animation:cl2-scan 8s linear infinite;animation-play-state:paused}
.cl2-scan::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(125,200,255,0),rgba(125,200,255,.6) 16%,
    rgba(160,220,255,.75) 50%,
    rgba(125,200,255,.6) 84%,rgba(125,200,255,0));
  box-shadow:0 0 12px 2px rgba(56,189,248,.38)}
.cl-card.cl2-live .cl2-scan{animation-play-state:running}
@keyframes cl2-scan{
  0%{transform:translateY(0);opacity:0}
  5%{opacity:.7}
  90%{opacity:.7}
  100%{transform:translateY(1430%);opacity:0}}
.cl2-boot{margin:11px 0 0;min-height:12px;line-height:1.45;
  font-family:ui-monospace,'Cascadia Mono','SF Mono',Consolas,monospace;
  font-size:9.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;overflow:hidden}

/* ------------------------------------------------------------
   6 · .cl-prow rows — hover ink bar + icon power-up + nudge
   (pointer-guarded), click = .cl2-pop chip beat + spark dot
   ------------------------------------------------------------ */
.cl-prow{position:relative}
.cl2-spark{position:absolute;right:-3px;top:50%;width:4px;height:4px;margin-top:-2px;
  border-radius:50%;pointer-events:none;
  background:var(--c,#38bdf8);box-shadow:0 0 8px var(--c,#38bdf8);
  animation:cl2-spark .42s ease-out forwards}
@keyframes cl2-spark{
  0%{transform:scale(0);opacity:1}
  55%{transform:scale(1.5);opacity:.9}
  100%{transform:scale(.3);opacity:0}}
.cl-prow.cl2-pop .cl-ppts{animation:cl2-pop .42s cubic-bezier(.3,.59,.3,1)}
@keyframes cl2-pop{
  0%{transform:scale(1)}
  38%{transform:scale(1.22)}
  100%{transform:scale(1)}}
@media (hover:hover) and (pointer:fine){
  .cl-prow{transition:transform .26s ease}
  .cl-prow:hover{transform:translateX(3px)}
  .cl-prow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
    border-radius:3px;
    background:linear-gradient(180deg,
      var(--c,#38bdf8),color-mix(in srgb,var(--c,#38bdf8) 30%,transparent));
    box-shadow:0 0 10px color-mix(in srgb,var(--c,#38bdf8) 45%,transparent);
    transform:scaleY(0);transform-origin:50% 50%;
    transition:transform .38s cubic-bezier(.2,.7,.3,1)}
  .cl-prow:hover::before{transform:scaleY(1)}
  .cl-pd{transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease}
  .cl-prow:hover .cl-pd{
    border-color:var(--c,#38bdf8);
    box-shadow:0 0 14px color-mix(in srgb,var(--c,#38bdf8) 40%,transparent)}
}

/* ------------------------------------------------------------
   7 · .cl-connect strip — marching dash rail on the top edge
   + attention ring on the button (ring rides the button's own
   shadow, pauses on hover; both rest until .cl2-live)
   ------------------------------------------------------------ */
.cl-connect{position:relative}
.cl-connect::before{content:'';position:absolute;top:-1px;left:14px;right:14px;height:1px;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,
    rgba(120,175,255,.55) 0,rgba(120,175,255,.55) 6px,
    rgba(120,175,255,0) 6px,rgba(120,175,255,0) 14px);
  animation:cl2-dash 1.4s linear infinite;animation-play-state:paused}
.cl-connect.cl2-live::before{animation-play-state:running}
@keyframes cl2-dash{to{background-position:14px 0}}
.cl-connect.cl2-live .btn{animation:cl2-ring 3.2s ease-out infinite}
@keyframes cl2-ring{
  0%{box-shadow:0 10px 30px rgba(47,107,255,.35),
      inset 0 1px 0 rgba(255,255,255,.2),
      0 0 0 0 rgba(56,189,248,.45)}
  70%{box-shadow:0 10px 30px rgba(47,107,255,.35),
      inset 0 1px 0 rgba(255,255,255,.2),
      0 0 0 13px rgba(56,189,248,0)}
  100%{box-shadow:0 10px 30px rgba(47,107,255,.35),
      inset 0 1px 0 rgba(255,255,255,.2),
      0 0 0 0 rgba(56,189,248,0)}}
@media (hover:hover) and (pointer:fine){
  .cl-connect .btn:hover{animation-play-state:paused}
}

/* ------------------------------------------------------------
   8 · .cl-num flip-tick — while the countdown digits roll
   (claimfx re-adds .cl-flip), the parent cell gets a 340ms
   border + digit-glow flash (.cl2-tick), then it is removed
   ------------------------------------------------------------ */
.cl-cell{transition:border-color .34s ease,box-shadow .34s ease}
.cl-cell .cl-num{transition:filter .34s ease}
.cl-cell.cl2-tick{border-color:rgba(56,189,248,.55);
  box-shadow:0 0 12px rgba(56,189,248,.28),inset 0 0 8px rgba(56,189,248,.14)}
.cl-cell.cl2-tick .cl-num{filter:drop-shadow(0 0 6px rgba(56,189,248,.6))}

/* ------------------------------------------------------------
   9 · earning-chain chips — hover: dot races (1.1s) + +pts
   pill pops (the lift itself is the page's .mic hover);
   click: .cl2-take 700ms — dot fills solid, pill glows, chip
   border flashes
   ------------------------------------------------------------ */
.cl-chips .chc-d{transition:background .25s ease,box-shadow .25s ease,transform .25s ease}
.cl-chips .chc-x{transition:transform .22s cubic-bezier(.2,.8,.3,1.4)}
@media (hover:hover) and (pointer:fine){
  .cl-chips .chc:hover .chc-x{transform:scale(1.14)}
  .cl-chips .chc:hover .chc-d{animation-duration:1.1s}
}
.chc.cl2-take{animation:cl2-bflash .7s ease-out}
.chc.cl2-take .chc-d{background:var(--cc);
  box-shadow:0 0 8px color-mix(in srgb,var(--cc) 60%,transparent);
  transform:scale(1.3);animation:none}
.chc.cl2-take .chc-x{animation:cl2-xglow .7s ease-out}
@keyframes cl2-bflash{
  0%{border-color:color-mix(in srgb,var(--cc) 80%,transparent);
     box-shadow:0 0 0 1px color-mix(in srgb,var(--cc) 40%,transparent)}
  45%{box-shadow:0 0 14px 1px color-mix(in srgb,var(--cc) 25%,transparent)}
  100%{border-color:rgba(148,178,255,.14);box-shadow:0 0 0 0 transparent}}
@keyframes cl2-xglow{
  0%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in srgb,var(--cc) 55%,transparent)}
  45%{transform:scale(1.12);box-shadow:0 0 16px 3px color-mix(in srgb,var(--cc) 35%,transparent)}
  100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}

/* ------------------------------------------------------------
   10 · .cl-quest rows — hover: tick brightens, the check
   draws itself (pathLength=1 set by JS, dashoffset 1→0) and
   the state chip glows. Click: .cl2-bump — tick emits a
   second ring, the progress fill bumps +5 (JS, max 100) and
   the meta block settles with a tiny shake
   ------------------------------------------------------------ */
.cl-quest.cl2-bump .cl-tick{border-color:#38bdf8}
.cl-quest.cl2-bump .cl-tick::before{content:'';position:absolute;inset:-2px;
  border-radius:50%;border:1px solid rgba(56,189,248,.8);
  box-shadow:0 0 10px rgba(56,189,248,.35);
  animation:cl2-ringout .55s cubic-bezier(.16,.5,.36,1) forwards}
@keyframes cl2-ringout{
  0%{transform:scale(1);opacity:.85}
  100%{transform:scale(2.2);opacity:0}}
.cl-quest.cl2-bump .cl-qm{animation:cl2-shake .34s ease-in-out}
@keyframes cl2-shake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-2.4px)}
  44%{transform:translateX(2px)}
  66%{transform:translateX(-1.4px)}
  88%{transform:translateX(.8px)}}
@media (hover:hover) and (pointer:fine){
  .cl-tick{transition:border-color .25s ease,box-shadow .25s ease}
  .cl-quest:hover .cl-tick{border-color:#38bdf8;box-shadow:0 0 12px rgba(56,189,248,.28)}
  .cl-quest .cl-tick svg polyline{
    stroke-dasharray:1;stroke-dashoffset:1;
    transition:stroke-dashoffset .4s cubic-bezier(.4,0,.3,1)}
  .cl-quest:hover .cl-tick svg polyline{stroke-dashoffset:0}
  .cl-chip{transition:box-shadow .25s ease}
  .cl-quest:hover .cl-chip{box-shadow:0 0 13px rgba(53,208,138,.4)}
  .cl-quest:hover .cl-chip.v-pro{box-shadow:0 0 13px rgba(96,150,255,.45)}
  .cl-quest:hover .cl-chip.v-loop{box-shadow:0 0 13px rgba(140,124,255,.45)}
}

/* ------------------------------------------------------------
   11 · .cl-ref referral — conic border beam rides the 1px
   gradient frame (padding-box mask), 9s lap, page-visible
   gated. .cl-link click = .cl2-shine 1.2s: the mocked code
   un-blurs and re-blurs, the link icon wiggle-copies, the
   caption flashes brighter
   ------------------------------------------------------------ */
.cl-ref::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  pointer-events:none;
  background:conic-gradient(from var(--cl2a,0deg),
    rgba(56,189,248,0) 0deg,
    rgba(56,189,248,.8) 8%,
    rgba(47,107,255,.38) 20%,
    rgba(47,107,255,0) 34%,
    rgba(0,0,0,0) 60%,
    rgba(124,140,255,.34) 76%,
    rgba(124,140,255,0) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:cl2-beam 9s linear infinite;animation-play-state:paused}
.cl-ref.cl2-live::before{animation-play-state:running}
@keyframes cl2-beam{to{--cl2a:360deg}}
.cl-link.cl2-shine .cl-blur{animation:cl2-unblur 1.2s ease-in-out}
@keyframes cl2-unblur{
  0%{filter:blur(5px)}
  42%{filter:blur(0)}
  58%{filter:blur(0)}
  100%{filter:blur(5px)}}
.cl-link.cl2-shine svg{animation:cl2-wiggle .45s ease-in-out}
@keyframes cl2-wiggle{
  0%{transform:translateX(0)}
  25%{transform:translateX(2px)}
  50%{transform:translateX(-2px)}
  75%{transform:translateX(1px)}
  100%{transform:translateX(0)}}
.cl-link.cl2-shine + .cl-link-cap{animation:cl2-capflash .9s ease-out}
@keyframes cl2-capflash{
  0%{color:#b5dcff;text-shadow:0 0 10px rgba(56,189,248,.45)}
  100%{color:#5f77a8;text-shadow:0 0 0 rgba(56,189,248,0)}}

/* ------------------------------------------------------------
   12 · .stepx steps — hover: the number orb spins one full
   turn (rotate property) and the card border lifts (pointer
   guarded). JS injects .cl2-line gradient connectors between
   adjacent cards — scaleX 0→1, staggered on reveal; visible
   on the wide (>=861px) layout only
   ------------------------------------------------------------ */
/* the connector is an <i>, so every rule is qualified with
   .stepx to outrank the page's ".stepx i" number-orb styles */
.stepx .cl2-line{display:none;position:absolute;top:42px;right:-19px;width:20px;height:2px;
  margin:0;border-radius:2px;pointer-events:none;
  transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
  box-shadow:0 0 8px rgba(56,189,248,.3);
  transition:transform .6s cubic-bezier(.2,.7,.25,1);
  transition-delay:calc(var(--cl2-li,0)*.12s + .18s)}
.steps.cl2-on .cl2-line{transform:scaleX(1)}
@media (min-width:861px){.stepx .cl2-line{display:block}}
@media (hover:hover) and (pointer:fine){
  .stepx{transition:border-color .25s ease}
  .stepx:hover{border-color:var(--line2)}
  .stepx i{transition:rotate .7s cubic-bezier(.3,.55,.3,1)}
  .stepx:hover i{rotate:360deg}
}

/* ------------------------------------------------------------
   13 · post-connect verified burst — MutationObserver on
   .cl-bal-num: once the blur is gone (a real balance was
   written) the number flash-glows, the caption draws an
   accent underline and the preview chip flips to a LIVE pill
   ------------------------------------------------------------ */
.cl-card.cl2-verified .cl-bal-num{animation:cl2-verify .5s ease-out}
@keyframes cl2-verify{
  0%{text-shadow:0 0 24px rgba(56,189,248,.8)}
  100%{text-shadow:0 0 24px rgba(56,189,248,0)}}
.cl-bal-cap{position:relative}
.cl-bal-cap::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;
  border-radius:2px;background:var(--grad);
  box-shadow:0 0 8px rgba(56,189,248,.35);
  transform:scaleX(0);transform-origin:left center}
.cl-card.cl2-verified .cl-bal-cap::after{
  animation:cl2-capdraw .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes cl2-capdraw{
  0%{transform:scaleX(0)}
  100%{transform:scaleX(1)}}
.cl-prev.cl2-prev-live{color:#35d08a;background:rgba(53,208,138,.1);
  border-color:rgba(53,208,138,.42);box-shadow:0 0 10px rgba(53,208,138,.28);
  transition:color .3s ease,background .3s ease,border-color .3s ease,box-shadow .3s ease}

/* ------------------------------------------------------------
   14 · page entrance stagger — .cl-grid children (points card
   + side column) and .cl-quest rows rise in with a 90ms
   stagger via their own IO; the helper class is dropped again
   once the entrance is done so the page's own hovers keep
   their original timing
   ------------------------------------------------------------ */
/* two classes per rule: the helpers must outrank the page's
   .rv/.rv.in reveal states until the entrance is done */
.cl-card.cl2-stag,.cl-side.cl2-stag,.cl-quest.cl2-stag{
  opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),
             transform .6s cubic-bezier(.2,.7,.3,1)}
.cl-card.cl2-stag.cl2-on,.cl-side.cl2-stag.cl2-on,.cl-quest.cl2-stag.cl2-on{
  opacity:1;transform:none}

/* ------------------------------------------------------------
   15 · .cl-retro pill — subtle glass band across the pill on
   a 9s lap, resting the rest of the cycle (.cl2-live gated)
   ------------------------------------------------------------ */
.cl-retro{position:relative;overflow:hidden}
.cl-retro::after{content:'';position:absolute;top:0;bottom:0;left:-40%;width:38%;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(160,200,255,0),rgba(160,200,255,.2) 45%,
    rgba(220,235,255,.26) 55%,rgba(160,200,255,0));
  transform:skewX(-16deg);opacity:0;
  animation:cl2-rsheen 9s ease-in-out infinite;animation-play-state:paused}
.cl-retro.cl2-live::after{animation-play-state:running}
@keyframes cl2-rsheen{
  0%{transform:skewX(-16deg) translateX(0);opacity:0}
  7%{opacity:.75}
  26%{transform:skewX(-16deg) translateX(380%);opacity:0}
  100%{transform:skewX(-16deg) translateX(380%);opacity:0}}

/* ------------------------------------------------------------
   reduced motion — every effect collapses to its end state:
   dots glow solid, sweeps and bands vanish, the beam freezes,
   entrances resolve instantly, state changes become instant
   and the click FX (already JS-guarded) stay inert
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .cl2-live-chip::before{animation:none!important;opacity:.9}
  .cl-bal::after,.cl-retro::after,.cl2-scan{display:none!important}
  .cl-connect::before{animation:none!important}
  .cl-connect .btn,.cl-connect.cl2-live .btn{animation:none!important}
  .cl-ref::before{animation:none!important}
  .eyebrow.cl2-in,.cl2-hud.cl2-in{animation:none!important}
  .cl-card.cl2-stag,.cl-side.cl2-stag,.cl-quest.cl2-stag{
    opacity:1!important;transform:none!important;transition:none!important}
  .stepx .cl2-line{transition:none!important}
  .steps.cl2-on .cl2-line{transform:scaleX(1)!important}
  .cl-prow,.cl-prow::before,.cl-pd,.cl-cell,.cl-cell .cl-num,.chc,.chc-x,.chc-d,
  .cl-quest,.cl-tick,.cl-tick svg polyline,.cl-chip,.stepx,.stepx i,
  .cl-link svg,.cl-link .cl-blur,.cl-prev.cl2-prev-live{transition:none!important}
  .cl-quest .cl-tick svg polyline{stroke-dasharray:none!important;stroke-dashoffset:0!important}
  .cl-prow.cl2-pop .cl-ppts,.cl2-spark,
  .chc.cl2-take,.chc.cl2-take .chc-x,.chc.cl2-take .chc-d,
  .cl-quest.cl2-bump .cl-tick::before,.cl-quest.cl2-bump .cl-qm,
  .cl-link.cl2-shine .cl-blur,.cl-link.cl2-shine svg,
  .cl-link.cl2-shine + .cl-link-cap,
  .cl-cell.cl2-tick,.cl-cell.cl2-tick .cl-num{animation:none!important}
  .cl-card.cl2-verified .cl-bal-num{animation:none!important}
  .cl-card.cl2-verified .cl-bal-cap::after{
    animation:none!important;transform:scaleX(1)!important}
}

/* ------------------------------------------------------------
   mobile — smaller HUD brackets, no step connectors, smaller
   boot line
   ------------------------------------------------------------ */
@media (max-width:920px){
  .cl2-hud{--cl2-hu:10px;--cl2-ho:8px}
  .stepx .cl2-line{display:none}
}
@media (max-width:560px){
  .cl2-hud{--cl2-hu:8px;--cl2-ho:7px}
  .cl2-boot{font-size:8.5px;letter-spacing:.06em;min-height:11px;margin-top:8px}
  .cl2-spark{width:3px;height:3px;margin-top:-1.5px}
}