/* WhoHire webinar pages: shared motion layer.
   Light, friendly SaaS treatment: soft purple tints, scroll reveals, counters.
   (Ported from the TSB fx layer; embers/cubes retained for API compatibility
   but retinted and unused by default.) */

/* ---------- ambient layers ---------- */
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fx-front{position:relative;z-index:1}

/* faint purple grid for dark (slate) sections */
.fx-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(136,111,205,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(136,111,205,.08) 1px, transparent 1px);
  background-size:56px 56px;
  animation:fxGridPan 46s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%)}

@keyframes fxGridPan{from{background-position:0 0}to{background-position:56px 56px}}

/* ---------- floating wireframe cubes (retinted, off by default) ---------- */
.fx-cube{position:absolute;width:var(--s,72px);height:var(--s,72px);
  animation:fxFloat var(--fd,8s) ease-in-out infinite alternate;
  opacity:var(--o,.35);filter:drop-shadow(0 0 18px rgba(83,72,194,.25))}
.fx-cube .core{position:absolute;inset:0;transform-style:preserve-3d;
  animation:fxSpin var(--rd,22s) linear infinite}
.fx-cube .core i{position:absolute;inset:0;
  border:1.5px solid rgba(136,111,205,.5);background:rgba(83,72,194,.05)}
@keyframes fxSpin{
  from{transform:rotateX(12deg) rotateY(0deg)}
  to{transform:rotateX(372deg) rotateY(360deg)}}
@keyframes fxFloat{
  from{transform:translateY(-14px)}
  to{transform:translateY(14px)}}

/* ---------- drifting motes (formerly embers), soft cyan/purple ---------- */
.fx-ember{position:absolute;bottom:-12px;border-radius:50%;
  background:radial-gradient(circle, rgba(136,111,205,.8), rgba(136,111,205,.3) 60%, transparent);
  animation:fxEmber linear infinite;opacity:0}
@keyframes fxEmber{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.6}
  60%{opacity:.4}
  100%{transform:translateY(-820px) translateX(var(--dx,20px));opacity:0}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero entrance (runs on load, no JS needed) ---------- */
.enter{opacity:0;animation:fxEnter .8s cubic-bezier(.2,.7,.3,1) forwards}
.enter.e2{animation-delay:.15s}
.enter.e3{animation-delay:.3s}
.enter.e4{animation-delay:.45s}
.enter.e5{animation-delay:.6s}
@keyframes fxEnter{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}}

/* ---------- card hover: lift, soft purple glow, tilt (tilt applied by JS) ---------- */
.fx-tilt{transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;will-change:transform}
.fx-tilt:hover{border-color:rgba(83,72,194,.45)!important;
  box-shadow:0 14px 44px rgba(32,44,56,.12), 0 0 28px rgba(83,72,194,.10)}

/* ---------- button shine sweep + arrow nudge ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg);transition:left .5s ease}
.btn:hover::after{left:130%}
.btn .arr{display:inline-block;transition:transform .2s ease}
.btn:hover .arr{transform:translateX(5px)}

/* ---------- pulsing purple edge for highlighted panels ---------- */
.fx-pulseborder{animation:fxBorderPulse 2.8s ease-in-out infinite}
@keyframes fxBorderPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(136,111,205,.30)}
  50%{box-shadow:0 0 26px 2px rgba(136,111,205,.24)}}

/* ---------- confirmation checkmark pop ---------- */
.fx-pop{animation:fxPop .6s cubic-bezier(.3,1.6,.4,1) both}
@keyframes fxPop{
  from{transform:scale(.3);opacity:0}
  to{transform:scale(1);opacity:1}}

/* ---------- countdown units heartbeat ---------- */
.fx-beat{animation:fxBeat 1s ease-in-out infinite}
@keyframes fxBeat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-grid,.fx-cube,.fx-cube .core,.fx-ember,.enter,.fx-beat,.fx-pulseborder{animation:none!important}
  .enter{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
}