/* ============================================================
   VIMAB REVEAL — frontend.css
   Blur-fokus reveal när element scrollas in i viewport.
   ============================================================ */


/* ---- vm-reveal: enskilt element fadar/fokuserar in ---- */
.vm-reveal {
  opacity: 0;
  filter: blur(18px);
  /* will-change förbereder GPU-compositing — slänger blur snabbare på mobil */
  will-change: filter, opacity;
}
.vm-reveal.is-revealed {
  opacity: 1;
  filter: blur(0);
  transition: filter 850ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 650ms ease-out;
}

/* Färdiganimerat. JS byter is-revealed → is-done när övergången spelat klart.
   Poängen: reglerna ovan äger transition-egenskapen (shorthand), vilket annars
   permanent skriver över elementets EGNA transitions — t.ex. hover på ett kort.
   Här deklareras ingen transition alls, så elementets egen tar över igen.
   filter och will-change nollställs också: ett kvarliggande filter tvingar
   elementet till en egen renderingskontext, och will-change som aldrig städas
   bort håller ett GPU-lager i onödan. */
.vm-reveal.is-done {
  opacity: 1;
  filter: none;
  will-change: auto;
}


/* ---- Hero: blur-fokus UTAN fade ---- */
/* Element i hero-raden är synliga från första bildrutan och animerar bara
   skärpan. Anledningen är mätbar: Chrome räknar inte element med opacity 0
   som LCP-kandidat, så länge hero-rubriken tonade in från osynlig kunde LCP
   inte registreras förrän fadeen hunnit börja. A/B-mätning 2026-09-16 på
   samma HTML: med fade låg LCP 1213 ms efter FCP, med opacity 1 sammanföll
   de (gap 0 ms). På långsam 4G motsvarade gapet ~3,3 sekunder.

   Ett blurrat element räknas däremot som målat, vilket är hela poängen —
   vi behåller blur-fokus-rörelsen och betalar ingenting för den.

   Gäller MEDVETET bara hero. Längre ner på sidan måste opacity: 0 vara kvar:
   där triggas revealen av scroll, och utan fade skulle man se blurrat
   innehåll skymta i viewportens kant innan det var dess tur. */
.vimab-hero-row .vm-reveal,
.vimab-hero-row .vm-reveal-child,
[data-vimab-hero="1"] .vm-reveal,
[data-vimab-hero="1"] .vm-reveal-child {
  opacity: 1;
}


/* ---- vm-reveal-stagger: barn-element staggrar in ---- */
/* JS taggar de faktiska barnen med .vm-reveal-child + sätter inline
   transition-delay per barn. Det hanterar både egna grids OCH
   BB-strukturer (fl-row → fl-col, fl-col → fl-module). */
.vm-reveal-child {
  opacity: 0;
  filter: blur(14px);
  will-change: filter, opacity;
}
.vm-reveal-stagger.is-revealed .vm-reveal-child {
  opacity: 1;
  filter: blur(0);
  transition: filter 700ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 500ms ease-out;
  /* transition-delay sätts inline av JS per barn (i * 80ms) */
}


/* ---- BB-editor failsafe ---- */
/* Om scriptet trots PHP-guard ändå laddas i BB-editor (t.ex. via cachad bundle),
   se till att inga element är dolda. Annars verkar editorn trasig. */
.fl-builder-edit .vm-reveal,
.fl-builder-edit .vm-reveal-child {
  opacity: 1 !important;
  filter: none !important;
  transition: none !important;
}


/* ---- Reduced motion respekteras ---- */
@media (prefers-reduced-motion: reduce) {
  .vm-reveal,
  .vm-reveal-child {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }
}