/* Cold Slip motion + graphics layer. Loaded on every page after site.css.
   Rules: animate transform/opacity only; every non-essential motion lives inside prefers-reduced-motion: no-preference;
   tokens below keep the whole site moving the same way. */
:root{--dur-fast:160ms;--dur:260ms;--dur-slow:620ms;--ease:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- ambient frost: two slow aurora blobs + film grain, fixed behind everything ---------- */
.fx-aurora{position:fixed;inset:-20vmax;z-index:-1;pointer-events:none;overflow:hidden}
.fx-aurora i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(70px);opacity:.22;will-change:transform}
.fx-aurora i:nth-child(1){left:10%;top:-10%;background:radial-gradient(circle,#8ED8FF 0,rgba(142,216,255,0) 65%)}
.fx-aurora i:nth-child(2){right:0;top:30%;background:radial-gradient(circle,#35F5A0 0,rgba(53,245,160,0) 65%);opacity:.12}
.fx-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#fx-snow{position:fixed;inset:0;z-index:-1;pointer-events:none}

/* ---------- logo: frost glint ---------- */
.logo img{position:relative}
.logo{position:relative}

/* ---------- live dots ---------- */
.gs.live span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--sig);margin-right:5px;vertical-align:1px}

/* ---------- ranks 1-3: medal glow ---------- */
#toplist .trow:nth-child(-n+3) .rk{text-shadow:0 0 14px rgba(53,245,160,.55)}

/* ---------- hit bars grow from the left (transform, not width) ---------- */
.trow .bar i,.bar i{transform-origin:left center}

@media (prefers-reduced-motion: no-preference){
  .fx-aurora i:nth-child(1){animation:fx-drift-a 38s var(--ease) infinite alternate}
  .fx-aurora i:nth-child(2){animation:fx-drift-b 46s var(--ease) infinite alternate}
  @keyframes fx-drift-a{to{transform:translate3d(18vmax,12vmax,0) scale(1.15)}}
  @keyframes fx-drift-b{to{transform:translate3d(-16vmax,-10vmax,0) scale(.9)}}

  /* reveal: content starts slightly low and transparent, lands in 0.5s; final state is always fully opaque */
  .fx-reveal{opacity:0;transform:translate3d(0,18px,0);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
  .fx-reveal.fx-in{opacity:1;transform:none}
  .fx-stagger>*{opacity:0;transform:translate3d(0,10px,0);transition:opacity 420ms var(--ease),transform 420ms var(--ease)}
  .fx-in.fx-stagger>*,.fx-stagger.fx-in>*{opacity:1;transform:none}

  /* bars and chart columns grow */
  .fx-in .bar i,.fx-grow .bar i{animation:fx-bar 900ms var(--ease) both}
  @keyframes fx-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  #pcmchart svg rect,.pg-chart svg rect,#chart svg rect{transform-box:fill-box;transform-origin:50% 100%;animation:fx-col 700ms var(--ease) both}
  @keyframes fx-col{from{transform:scaleY(0)}to{transform:scaleY(1)}}

  /* cards lift on hover (desktop pointers only) */
  @media (hover:hover){
    .pick,.trow,.pcard,.tk,.gs,.stat,.leg{transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease)}
    .trow:hover,.pick:hover{transform:translate3d(4px,0,0);background-color:rgba(142,216,255,.035)}
    .pcard:hover,.tk:hover{transform:translate3d(0,-3px,0)}
    .gs:hover{transform:translate3d(0,-2px,0)}
    .btn{transition:transform var(--dur-fast) var(--ease),filter var(--dur-fast) var(--ease)}
    .btn:hover{transform:translate3d(0,-1px,0);filter:brightness(1.08)}
    .btn:active{transform:scale(.97)}
  }

  /* the free ticket: holographic sweep + pointer tilt (tilt driven by fx.js via CSS vars) */
  .ticket{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform var(--dur) var(--ease);will-change:transform;position:relative;overflow:hidden}
  .ticket::after{content:"";position:absolute;inset:-40% -60%;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(142,216,255,.10) 47%,rgba(53,245,160,.14) 50%,rgba(142,216,255,.10) 53%,transparent 60%);transform:translate3d(-60%,0,0);animation:fx-sheen 5.5s var(--ease) 1.2s infinite}
  @keyframes fx-sheen{0%{transform:translate3d(-60%,0,0)}35%,100%{transform:translate3d(60%,0,0)}}

  /* free chip + live dot pulse */
  .chipf{animation:fx-pop 520ms var(--ease-spring) both}
  @keyframes fx-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
  .gs.live span::before{animation:fx-pulse 1.6s ease-in-out infinite}
  @keyframes fx-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.6)}}
  #toplist .trow:first-child .rk{animation:fx-glow 2.8s ease-in-out infinite}
  @keyframes fx-glow{50%{opacity:.6}}

  /* player modal springs in */
  .pcm.open .bx{animation:fx-sheet 420ms var(--ease-spring) both}
  @keyframes fx-sheet{from{transform:translate3d(0,40px,0) scale(.98);opacity:0}to{transform:none;opacity:1}}

  /* logo glint every few seconds */
  .logo::after{content:"";position:absolute;left:0;top:0;width:32px;height:32px;border-radius:8px;pointer-events:none;background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.55) 50%,transparent 58%) no-repeat;background-size:300% 100%;background-position:150% 0;animation:fx-glint 6s ease-in-out 2s infinite}
  @keyframes fx-glint{0%,82%{background-position:150% 0}100%{background-position:-50% 0}} /* the shine stays inside the 32px icon; at rest it sits off the icon, invisible */
}

/* reduced motion: everything lands in place, no drifting, no tilt */
@media (prefers-reduced-motion: reduce){
  .fx-aurora i{animation:none}
  #fx-snow{display:none}
  .ticket{transform:none}
}

/* confetti canvas for wins */
#fx-confetti{position:fixed;inset:0;z-index:50;pointer-events:none}

/* ---------- maximum flair layer (2026-10-22, owner's choice): still transform/opacity only, all off under reduced motion ---------- */
#fx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:60;pointer-events:none;background:linear-gradient(90deg,var(--sig),#8ED8FF);transform-origin:0 50%;transform:scaleX(0)}
@media (prefers-reduced-motion: no-preference){
  /* page entrance */
  body.fx-enter .wrap>*{animation:fx-rise .55s cubic-bezier(.2,.8,.2,1) backwards}
  body.fx-enter .wrap>*:nth-child(2){animation-delay:.05s}body.fx-enter .wrap>*:nth-child(3){animation-delay:.1s}body.fx-enter .wrap>*:nth-child(4){animation-delay:.15s}body.fx-enter .wrap>*:nth-child(n+5){animation-delay:.2s}
  @keyframes fx-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
  /* cards spring in, one after another (fx.js sets --fx-i on each child) */
  .fx-spring>*{animation:fx-spring .62s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(var(--fx-i,0) * 45ms)}
  @keyframes fx-spring{from{opacity:0;transform:translate3d(0,18px,0) scale(.96)}to{opacity:1;transform:none}}
  /* ranked cards tilt toward the pointer (fx.js drives --rx/--ry) */
  @media (hover:hover){.rc{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,var(--ty,0),0)}.rc:hover{--ty:-3px}}
  /* primary buttons: a light sweep every few seconds */
  .btn:not(.ghost){position:relative;overflow:hidden}
  .btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translate3d(-120%,0,0);animation:fx-btn 5.5s ease-in-out 2s infinite;pointer-events:none}
  @keyframes fx-btn{0%,80%{transform:translate3d(-120%,0,0)}100%{transform:translate3d(120%,0,0)}}
  /* loading placeholders shimmer */
  .empty{position:relative;overflow:hidden}
  .empty::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(142,216,255,.06),transparent);transform:translate3d(-100%,0,0);animation:fx-shim 1.6s ease-in-out infinite}
  @keyframes fx-shim{to{transform:translate3d(100%,0,0)}}
  /* hit-chance rings and big numbers pop when they land */
  .ring,.bp-ring{animation:fx-pop .7s cubic-bezier(.34,1.56,.64,1) backwards}
  /* phone tab bar: the tapped icon bounces */
  .ui-tabs a:active svg,.ui-tabs button:active svg{transform:scale(.86)}
  .ui-tabs svg{transition:transform .18s cubic-bezier(.34,1.56,.64,1)}
  .ui-tabs .on svg{animation:fx-tab .5s cubic-bezier(.34,1.56,.64,1) both}
  @keyframes fx-tab{0%{transform:scale(.7)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
  /* chips press in */
  .chip{transition:transform .15s ease-out}.chip:active{transform:scale(.94)}
  /* live game dots ripple */
  .gs.live::after{content:"";position:absolute;inset:-1px;border-radius:12px;border:1px solid var(--sig);opacity:0;animation:fx-ring 2.4s ease-out infinite;pointer-events:none}
  .gs{position:relative}
  @keyframes fx-ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
}
@media (prefers-reduced-motion: reduce){#fx-progress{display:none}}