/* Enccii scroll effects: depth (3D tilt-in, card tilt) + blur-to-sharp with a red glow flare.
   Everything here only applies while js/enccii-fx.js has tagged an element with .efx, so the page is fully visible if the script is missing. */
:root{--fx-ease:cubic-bezier(.2,.7,.2,1)}

html .efx{
  opacity:0!important;
  filter:blur(14px)!important;
  transition:opacity .95s var(--fx-ease),filter .95s var(--fx-ease),transform .95s var(--fx-ease)!important;
  transition-delay:var(--efxd,0s)!important;
  will-change:opacity,filter,transform
}
html .efx.efx-3d{
  transform:perspective(900px) translate3d(0,38px,0) rotateX(12deg) scale(.97)!important;
  transform-origin:50% 100%
}
html .efx.efx-in{opacity:1!important;filter:blur(0)!important}
html .efx.efx-3d.efx-in{transform:none!important}

/* red glow that flares behind a heading as it comes into focus */
.efx-flare{
  position:absolute;left:-10%;top:-70%;width:62%;height:250%;
  pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(closest-side,rgba(255,64,64,.34),transparent 70%);
  animation:efx-flare 2.6s ease-out forwards
}
@keyframes efx-flare{
  0%{opacity:0;transform:scale(.55)}
  30%{opacity:1}
  100%{opacity:0;transform:scale(1.12)}
}

/* cards: soft red lift on hover (the tilt itself is set by the script) */
.efx-tilt{transition:transform .25s var(--fx-ease),box-shadow .3s ease!important;will-change:transform}
.efx-tilt.efx-hot{box-shadow:0 26px 54px -26px rgba(255,64,64,.5)!important}

@media (prefers-reduced-motion:reduce){
  html .efx{opacity:1!important;filter:none!important;transform:none!important;transition:none!important}
  .efx-flare{display:none}
}