/* ========================================================================
   fx-chance.css: Chance Infinite surface motion (Ad Slots, Analytics,
   Surveys, Leaderboard, #svOverlay, #lbFs, #lbPreview). Owner: A.
   Loads right after fx.css (index.html <head>).

   - Overrides of base rules win on specificity (#chance, #lbBody, #clock ...
     in every selector), never !important outside the reduced-motion block.
   - Only transform and opacity animate, plus SVG stroke-dash draws (survey
     rings) and one-shot box-shadow rings (fxPulse). Nothing is infinite:
     the live slot bar and the Deployed survey chips carry no dot (founder
     review 09-28); their own colours say live.
   - Colours come from the existing tokens, so both themes follow. Surfaces
     that are dark in BOTH themes (countdown, discount head) and cards on
     var(--ink) (.rankbig: near-black in light, CREAM in dark) get their own
     tones here.
   - Nothing here is data: every badge, tint and chip is set by wiring.js /
     viz.js from values the page already has.
   ======================================================================== */

/* ---------- 1. section header ---------- */
/* a static, very soft green wash behind the title (fades in with the section, no ambient motion) and
   one dice roll each time the Chance product is shown */
#chance > .phead{background:radial-gradient(640px 210px at 0 0,rgba(43,167,106,.075),transparent 72%)}
:root[data-theme="dark"] #chance > .phead{background:radial-gradient(640px 210px at 0 0,rgba(55,184,118,.08),transparent 72%)}
@keyframes fxcDice{from{opacity:0;transform:rotate(-140deg) scale(.45)}55%{opacity:1}}
#chance > .phead .glyph{display:inline-block;animation:fxcDice .72s var(--fx-spring) .06s backwards}

/* ---------- 2. Ad Slots ---------- */
/* L8 countdown skeleton: four digit blocks (template fxTplClock) in the clock's own box, sized like the
   real "00d00h00m00s" so nothing jumps when it clears. tick() keeps writing underneath. */
#clock.fx-sk-block{min-width:232px;min-height:36px}
#clock > .fx-sk-cover.fx-sk-cover-tpl{flex-direction:row;align-items:center;justify-content:flex-end;gap:12px;padding:0}
#clock .fxc-ck{width:42px;height:26px;border-radius:7px;flex:none}
/* under an hour left the digits turn gold: a colour change only, never a blink */
#clock.fxc-soon{color:var(--gold)}


/* discount head is dark in both themes: skeletons there use the chrome tokens */
#discountBox .head{--fx-sk-base:rgba(251,248,240,.13);--fx-sk-sheen:rgba(255,255,255,.10)}
/* the marker glides in from the ramp's left edge once (translate composes with its translateX(-50%));
   engines without the individual translate property simply show it in place */
@keyframes fxcGlide{from{translate:var(--fxc-glide,0px) 0}}
#chance .heatramp .mk.fxc-glide{animation:fxcGlide .95s var(--fx-ease) .12s backwards}

/* a file dragged over the ad dropzone: one soft ring (the existing scale + colour change stay) */
#chance .dropzone.dragging{animation:fxPulse 600ms var(--fx-soft) 1}

/* ---------- 3. Analytics ---------- */
/* rank tier chip on the inverted rank card (gold that reads on near-black in light AND on cream in dark) */
#chance .rankbig .fxc-rankk{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
#anTier[hidden]{display:none}
#chance .rankbig .fx-chip{color:#E8B447;background:rgba(232,180,71,.12);box-shadow:inset 0 0 0 1px rgba(232,180,71,.45)}
:root[data-theme="dark"] #chance .rankbig .fx-chip{color:#6F4C0E;background:rgba(138,98,18,.12);box-shadow:inset 0 0 0 1px rgba(138,98,18,.42)}

/* L12: while analytics load the gridlines dim (busy mode) and a soft band marks the plot; the busy
   cover's sheen passes over both */
#chance .fxc-rankplot{position:relative}
#chance .fxc-rankplot.fx-sk-busy::before{content:"";position:absolute;left:7%;right:2%;top:13%;bottom:9%;
  border-radius:10px;background:var(--fx-sk-base);z-index:1;pointer-events:none}

/* rank line redraw (only when the series changed; FX.draw traces the stroke): the area fades up behind
   it, the dots pop in order, the end label lands last */
@keyframes fxcDotIn{from{opacity:0;transform:scale(0)}}
#anArea.fxc-area-in{animation:fxFade .7s var(--fx-soft) .3s backwards}
#anDots circle.fxc-dot{transform-box:fill-box;transform-origin:center;
  animation:fxcDotIn .34s var(--fx-spring) calc(180ms + var(--fxc-i,0) * 22ms) backwards}
#anEndLabel.fxc-end-in{animation:fxFade .3s ease .78s backwards}
/* delivery-boost curve: its glow area fades up while FX.draw traces the curve (first sight only) */
#boostArea.fxc-boost-area{animation:fxFade .9s var(--fx-soft) .35s backwards}

/* L13: a shimmer block the size of a lazy view while its first fetch is in flight */
#chance .fxc-vizsk{display:block;width:100%;border-radius:12px;margin:2px 0 4px}

/* Prime Time cells settle in column by column; Chart Run dots pop after the line traces */
@keyframes fxcCell{from{opacity:0;transform:scale(.5)}}
#vizPulseWrap rect.fxc-cell{transform-box:fill-box;transform-origin:center;
  animation:fxcCell .42s var(--fx-ease) var(--fxc-d,0ms) backwards}
#vizChartrunWrap circle.fxc-crdot{transform-box:fill-box;transform-origin:center;
  animation:fxcDotIn .32s var(--fx-spring) var(--fxc-d,0ms) backwards}

/* ---------- 4. Surveys ---------- */
/* history: an opened row's detail rises in and its charts draw every time it is opened (the body
   toggles display, so these replay per open and never on a poll) */
@keyframes fxcArc{from{stroke-dasharray:0 100}}
#survHistory .sh-row.open > .sh-body{animation:fxRise var(--fx-d3) var(--fx-ease)}
#survHistory .sh-row.open .sh-body svg circle[stroke-dasharray]{animation:fxcArc .9s var(--fx-ease) .12s backwards}
#survHistory .sh-row.open .sh-bar .fill{transform-origin:0 50%;animation:fxGrowX var(--fx-d4) var(--fx-ease) .18s backwards}
#survHistory .sh-row.open .sh-bar:nth-child(2) .fill{animation-delay:.23s}
#survHistory .sh-row.open .sh-bar:nth-child(3) .fill{animation-delay:.28s}
#survHistory .sh-row.open .sh-bar:nth-child(4) .fill{animation-delay:.33s}
#survHistory .sh-row.open .sh-bar:nth-child(n+5) .fill{animation-delay:.38s}
#survHistory .sh-row.open .sh-tl-bar{transform-origin:50% 100%;animation:fxGrowY var(--fx-d4) var(--fx-ease) .2s backwards}
#survHistory .sh-row.open .sh-tl-col:nth-child(2) .sh-tl-bar{animation-delay:.23s}
#survHistory .sh-row.open .sh-tl-col:nth-child(3) .sh-tl-bar{animation-delay:.26s}
#survHistory .sh-row.open .sh-tl-col:nth-child(4) .sh-tl-bar{animation-delay:.29s}
#survHistory .sh-row.open .sh-tl-col:nth-child(5) .sh-tl-bar{animation-delay:.32s}
#survHistory .sh-row.open .sh-tl-col:nth-child(6) .sh-tl-bar{animation-delay:.35s}
#survHistory .sh-row.open .sh-tl-col:nth-child(7) .sh-tl-bar{animation-delay:.38s}
#survHistory .sh-row.open .sh-tl-col:nth-child(8) .sh-tl-bar{animation-delay:.41s}
#survHistory .sh-row.open .sh-tl-col:nth-child(n+9) .sh-tl-bar{animation-delay:.44s}
/* L17 detail skeleton (replaces the "Loading..." line while one survey's results load) */
#survHistory .fxc-shsk{padding:0 0 4px}
#survHistory .fxc-shsk .sh-stat .fx-sk-num{font-size:23px;margin-top:6px}
#survHistory .fxc-shsk .fxc-shsk-ring{display:flex;align-items:center;gap:16px;margin-top:14px}
#survHistory .fxc-shsk .sh-qgrid{margin-top:22px}

/* survey editor: backdrop fades, card springs in; closing runs through FX.closeAnimated (.fx-out) */
#svOverlay.open:not(.fx-out){animation:fxBackdropIn 180ms ease both}
#svOverlay.open:not(.fx-out) > .sv-card{animation:fxModalIn 280ms var(--fx-spring) backwards}
#svOverlay.open.fx-out{animation:fxFadeOut var(--fx-d2) var(--fx-in) forwards}
#svOverlay.open.fx-out > .sv-card{animation:fxOut var(--fx-d2) var(--fx-in) forwards}

/* ---------- 5. Leaderboard ---------- */
/* the self row keeps its green tint and gains a --green-br edge */
#lbBody .lbrow.fxc-self{box-shadow:inset 3px 0 0 var(--green-br)}
/* podium: the top three rank numbers take gold / silver / bronze (read from the real rank). Gold is the
   legible text gold (--fx-gold-ink): plain --gold is about 2.6:1 on paper in the light theme. */
#lbBody .lbrow.fxc-top1 .rk{color:var(--fx-gold-ink)}
#lbBody .lbrow.fxc-top2 .rk{color:#858C92}
#lbBody .lbrow.fxc-top3 .rk{color:#A5673A}
:root[data-theme="dark"] #lbBody .lbrow.fxc-top2 .rk{color:#B3B9BF}
:root[data-theme="dark"] #lbBody .lbrow.fxc-top3 .rk{color:#CD8F60}
/* FLIP (G11): a row climbing the board slides OVER the rows it passes (lifted, on an opaque ground that
   carries the green flash) instead of showing through them; rows moving down pass underneath */
@keyframes fxcRowUpBg{from{background-color:var(--green-soft)}}
#lbBody .lbrow.fx-row-up{position:relative;z-index:2;animation:none}
#lbBody .lbrow.fx-row-up::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--paper-2);box-shadow:0 10px 24px -14px rgba(23,21,15,.45);animation:fxcRowUpBg 900ms var(--fx-soft)}
#lbBody .lbrow.fxc-self.fx-row-up::after{background-image:linear-gradient(rgba(43,167,106,.10),rgba(43,167,106,.10));
  box-shadow:inset 3px 0 0 var(--green-br),0 10px 24px -14px rgba(23,21,15,.45)}
/* L18 skeleton rows reuse the real .lbrow grid */
#lbBody .lbrow.fx-sk-clone{cursor:default}
#lbBody .lbrow.fx-sk-clone .fxc-lbthumb{width:54px;height:32px;border-radius:6px;flex:none}
#lbBody .lbrow.fx-sk-clone .fxc-lbtxt{flex:1;min-width:0}
#lbBody .lbrow.fx-sk-clone .fxc-lbtxt .fx-sk-line{height:.7em;margin:.24em 0}

/* full-screen preview: card springs in over the existing backdrop fade; closing via FX.closeAnimated */
#lbFs.open:not(.fx-out) .fswrap{animation:fxModalIn 280ms var(--fx-spring) backwards}
#lbFs.open.fx-out{animation:fxFadeOut var(--fx-d2) var(--fx-in) forwards}
#lbFs.open.fx-out > *{animation:fxOut var(--fx-d2) var(--fx-in) forwards}
/* the floating hover preview pops each time it appears (it toggles display per thumbnail) */
@keyframes fxcPrev{from{opacity:0;transform:translateY(6px) scale(.94)}}
#lbPreview{transform-origin:0 0;animation:fxcPrev 180ms var(--fx-spring)}

/* ---------- 6. phone ---------- */
@media (max-width:768px){
  /* the tab strip scrolls (overflow-y hidden clips below its padding box): keep the ink bar inside it */
  #chanceTabs > .fx-tabink{bottom:0}
  #clock.fx-sk-block{min-width:0}
  #clock > .fx-sk-cover.fx-sk-cover-tpl{justify-content:center;top:6px}
  /* pre-existing: on a phone the row grid's 1fr creative column collapsed to 0 and names ran over the
     score columns. The rows (and header row) keep a readable width and pan sideways inside .lbscroll,
     under a header that stays put; the card itself no longer scrolls, so it keeps its shadow and corners.
     The edge that still has columns past it fades out (wiring.js toggles fxc-more-r / fxc-more-l from the
     scroll position), so the table reads as one that scrolls. */
  #chance .lbwrap{overflow:hidden}
  #chance .lbscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  #chance .lbwrap .lbrow{min-width:780px}
  #chance .lbscroll.fxc-more-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
  #chance .lbscroll.fxc-more-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);
    mask-image:linear-gradient(90deg,transparent,#000 28px)}
  #chance .lbscroll.fxc-more-l.fxc-more-r{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 44px),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 44px),transparent)}
}

/* ---------- 7. reduced motion ---------- */
/* index.html's kill switch already makes every animation .001ms; this removes what would still be seen
   (a glide start frame, a drawn-in stroke) and leaves every final state in place */
@media (prefers-reduced-motion: reduce){
  #chance > .phead .glyph,#chance .heatramp .mk.fxc-glide,#chance .dropzone.dragging,
  #anArea.fxc-area-in,#anDots circle.fxc-dot,#anEndLabel.fxc-end-in,#boostArea.fxc-boost-area,
  #vizPulseWrap rect.fxc-cell,#vizChartrunWrap circle.fxc-crdot,
  #survHistory .sh-row.open > .sh-body,#survHistory .sh-row.open .sh-body svg circle[stroke-dasharray],
  #survHistory .sh-row.open .sh-bar .fill,#survHistory .sh-row.open .sh-tl-bar,
  #svOverlay.open:not(.fx-out),#svOverlay.open:not(.fx-out) > .sv-card,
  #lbFs.open:not(.fx-out) .fswrap,#lbPreview,#lbBody .lbrow.fx-row-up::after{animation:none}
}