/* cbc-campus-fx.css (v559) - the shared Campus "delight" layer: rich, colourful, motion-rich UI for the
 * student-facing Campus/Arena surfaces. Pair with cbc-campus-fx.js. Everything degrades gracefully and
 * every animation is disabled under prefers-reduced-motion. Mobile-safe (no horizontal overflow at 375px).
 * Standing rule: Campus student surfaces must never look like a plain admin form. */

/* ---- reveal on scroll (JS adds .is-in) ---- */
.fx-reveal{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.fx-reveal.is-in{opacity:1;transform:none}
.fx-stagger>*{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.fx-stagger.is-in>*{opacity:1;transform:none}

/* ---- hover delight on cards/buttons ---- */
.fx-lift{transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease}
.fx-lift:hover{transform:translateY(-4px)}
.fx-pop{transition:transform .14s cubic-bezier(.2,.7,.2,1)}
.fx-pop:hover{transform:scale(1.04)}
.fx-pop:active{transform:scale(.97)}

/* ---- rich buttons: gradient sheen + press ---- */
.fx-btn{position:relative;overflow:hidden;border:0;cursor:pointer;font-weight:800;letter-spacing:.01em;
  color:#fff;border-radius:14px;padding:13px 22px;background:linear-gradient(120deg,var(--fx-b1,#6c4df6),var(--fx-b2,#3b82f6));
  box-shadow:0 10px 24px -12px var(--fx-b1,#6c4df6);transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
.fx-btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 16px 30px -14px var(--fx-b1,#6c4df6)}
.fx-btn:active{transform:translateY(0) scale(.98)}
.fx-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg)}
.fx-btn:hover::after{animation:fxSheen .8s ease}
@keyframes fxSheen{from{left:-60%}to{left:130%}}

/* ---- animated gradient background utility (heroes) ---- */
.fx-gradient{background-size:220% 220%;animation:fxDrift 14s ease infinite}
@keyframes fxDrift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ---- floating emoji / blob (friendly empty states + hero accents) ---- */
.fx-float{animation:fxFloat 4.5s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---- count-up + progress fill helpers ---- */
.fx-count{font-variant-numeric:tabular-nums}
.fx-bar{position:relative;overflow:hidden}
.fx-bar>.fx-fill{transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.fx-bar.is-in>.fx-fill{transform:scaleX(var(--fx-p,1))}

/* ---- colourful chip/badge shine ---- */
.fx-badge{position:relative;overflow:hidden}
.fx-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-100%)}
.fx-badge:hover::after{animation:fxBadge 1s ease}
@keyframes fxBadge{to{transform:translateX(100%)}}

/* ---- confetti canvas is created by cbc-confetti.js; keep it above content, non-interactive ---- */
.cbc-confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9999}

@media (prefers-reduced-motion:reduce){
  .fx-reveal,.fx-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
  .fx-lift,.fx-pop,.fx-btn{transition:none!important}
  .fx-btn::after,.fx-badge::after{display:none}
  .fx-gradient,.fx-float{animation:none!important}
  .fx-bar>.fx-fill{transition:none!important;transform:scaleX(var(--fx-p,1))}
}