/* components/fx/fx.css */

/* =========================================
   1) Bricks Builder: show all content
   ========================================= */
.fx-builder .fx,
.fx-builder .fx-stagger .fx-child {
  opacity:     1    !important;
  transform:   none !important;
  filter:      none !important;
  transition:  none !important;
  animation:   none !important;
  will-change: auto !important;
}

/* =========================================
   2) Reduced motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
  .fx,
  .fx * {
    animation:  none !important;
    transition: none !important;
    transform:  none !important;
  }
  .fx,
  .fx-stagger .fx-child {
    opacity: 1 !important;
    filter:  none !important;
  }
}

/* =========================================
   3) Hidden initial state
   Uses CSS `animation` (not transition) so element-level
   `transition` rules (e.g. on .brxe-button) stay untouched.
   ========================================= */
.fx,
.fx-stagger .fx-child {
  opacity: 0;
  will-change: opacity, transform;
}

/* H1 + .standout är LCP-kandidater — paintas DIREKT vid första frame,
   ingen fade-in. Lighthouse kan då registrera Largest Contentful Paint. */
h1.fx,
h1.fx-child,
.standout.fx,
.standout.fx-child,
.fx-stagger h1.fx-child,
.fx-stagger .standout.fx-child {
  opacity: 1 !important;
  animation: none !important;
  will-change: auto !important;
}

/* =========================================
   4) Revealed state — run animation to final values.
   animation-fill-mode: forwards locks the end state.
   ========================================= */
.fx.is-visible,
.fx-stagger .fx-child.is-visible {
  animation-name:            fx-fade-up;
  animation-duration:        var(--fx-dur, 1800ms);
  animation-timing-function: var(--fx-ease, cubic-bezier(.2,.8,.2,1));
  animation-fill-mode:       forwards;
  will-change:               auto;
}

/* Preset overrides — pick animation per variant */
.fx--fade.is-visible        { animation-name: fx-fade; }
.fx--fade-up.is-visible,
.fx-stagger .fx--fade-up.is-visible,
.fx-stagger .fx-child.is-visible { animation-name: fx-fade-up; }
.fx--fade-down.is-visible   { animation-name: fx-fade-down; }
.fx--fade-left.is-visible   { animation-name: fx-fade-left; }
.fx--fade-right.is-visible  { animation-name: fx-fade-right; }
.fx--scale.is-visible       { animation-name: fx-scale; }
.fx--blur.is-visible        { animation-name: fx-blur; }

/* =========================================
   5) Keyframes
   ========================================= */
@keyframes fx-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fx-fade-up {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-fade-down {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-fade-left {
  from { opacity: 0; transform: translate3d(-16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-fade-right {
  from { opacity: 0; transform: translate3d(16px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-scale {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes fx-blur {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: none; }
}

/* =========================================
   6) Parallax
   ========================================= */
.fx-parallax,
.fx-parallax-left,
.fx-parallax-right {
  will-change: transform;
}

/* =========================================
   7) Timing helpers (animation-delay now, not transition-delay)
   ========================================= */
.fx--delay-1 { animation-delay: 120ms; }
.fx--delay-2 { animation-delay: 240ms; }
.fx--delay-3 { animation-delay: 600ms; }

.fx--dur-5 { --fx-dur: 2000ms; }
.fx--dur-9 { --fx-dur: 1200ms; }