/* Reveal */
.fx-reveal{
  opacity:0;
  transform: translate3d(var(--fx-reveal-x, 0), var(--fx-reveal-y, var(--columnfx-reveal-distance,18px)), 0);
  transition:
    opacity var(--columnfx-reveal-duration,650ms) var(--columnfx-reveal-ease, ease) var(--columnfx-reveal-delay,0ms),
    transform var(--columnfx-reveal-duration,650ms) var(--columnfx-reveal-ease, ease) var(--columnfx-reveal-delay,0ms);
  will-change: transform, opacity;
}
.fx-reveal.fx-in{opacity:1;transform:translate3d(0,0,0);}
.fx-delay-100{transition-delay:100ms;}
.fx-delay-200{transition-delay:200ms;}
.fx-delay-300{transition-delay:300ms;}

/* Tilt */
.fx-tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition: transform var(--columnfx-tilt-reset,220ms) ease;
}

/* Glass */
.fx-glass{
  --fx-glass-blur:var(--columnfx-glass-blur,14px);
  --fx-glass-sat:var(--columnfx-glass-sat,140%);
  --fx-glass-bg:var(--columnfx-glass-bg,rgba(255,255,255,0.12));
  --fx-glass-border:var(--columnfx-glass-border,rgba(255,255,255,0.22));
  --fx-glass-border-width: var(--columnfx-glass-border-width, 1px);
  --fx-glass-shadow-strength: var(--columnfx-glass-shadow-strength, 0.16);
  --fx-glass-shadow-y: var(--columnfx-glass-shadow-y, 10px);
  --fx-glass-shadow-blur: var(--columnfx-glass-shadow-blur, 30px);

  background:var(--fx-glass-bg)!important;
  border: var(--fx-glass-border-width) solid var(--fx-glass-border);
  border-radius:inherit;
  box-shadow: 0 var(--fx-glass-shadow-y) var(--fx-glass-shadow-blur) rgba(0,0,0,var(--fx-glass-shadow-strength));
  -webkit-backdrop-filter: blur(var(--fx-glass-blur)) saturate(var(--fx-glass-sat));
  backdrop-filter: blur(var(--fx-glass-blur)) saturate(var(--fx-glass-sat));
}
.fx-glass.fx-glass-strong{--fx-glass-blur:18px;--fx-glass-sat:160%;--fx-glass-bg:rgba(255,255,255,0.16);--fx-glass-border:rgba(255,255,255,0.26);}
.fx-glass.fx-glass-dark{--fx-glass-bg:rgba(0,0,0,0.20);--fx-glass-border:rgba(255,255,255,0.14);--fx-glass-shadow-strength:0.24;}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.fx-glass{background:rgba(30,30,30,0.10)!important;}}

/* Pixelate */
.fx-pixelate{position:relative;overflow:hidden;}
.fx-pixelate .fx-px{position:absolute;inset:0;z-index:999999;pointer-events:none;display:grid;}
.fx-pixelate .fx-px-cell{background: var(--fx-px-color, var(--columnfx-pixel-color, rgba(0,0,0,0.92))); opacity:1; transform:scale(1); will-change:opacity,transform,filter;}
@keyframes fxPxOut{0%{opacity:1;transform:scale(1);filter:blur(0);}100%{opacity:0;transform:scale(0.65);filter:blur(1px);}}
.fx-pixelate.fx-px-ready .fx-px-cell{animation-name:fxPxOut;animation-duration:var(--fx-px-duration, var(--columnfx-pixel-duration,900ms));animation-timing-function:cubic-bezier(0.2,0.8,0.2,1);animation-fill-mode:forwards;}
.fx-pixelate.fx-px-light .fx-px-cell{background:rgba(255,255,255,0.92);}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fx-pixelate .fx-px{display:none!important;}
  .fx-reveal,.fx-tilt{opacity:1!important;transform:none!important;transition:none!important;}
}
