/* effects.css — minsajt block-effekter (keep-it-simple, tema-medvetna).
 *
 * Appliceras via data-attribut på ett .jw-block (sätts av api/render.php):
 *   data-fx="shimmer|stagger|spin"     — vald effekt
 *   data-fx-speed="lugn|snabb"         — tempo (utelämnas = normal)
 *
 * Delad STATISK fil (serveras ur docroot som /effects.css, ej per sajt) → kräver ingen
 * theme.css-regenerering. Färgerna kommer ur sajtens tema (--accent) och ur elementets
 * egen färg (currentColor), så effekten funkar lika bra på ljus sida som på mörk hero.
 * Respekterar prefers-reduced-motion.
 *
 * DOM att känna till: kedjan är .jw-col > .jw-block > blockets innehåll. En kolumn är
 * alltså FÖRÄLDER till blocket — selektorer som .jw-block .jw-col matchar aldrig.
 */

.jw-block[data-fx] { --fx-dur: 3.2s; }
.jw-block[data-fx-speed="lugn"]  { --fx-dur: 6s; }
.jw-block[data-fx-speed="snabb"] { --fx-dur: 1.8s; }

/* ── 1) SKIMMER — ett ljus-svep genom rubriken, glans över knappen ───────────
   Svepet är en accent-tonad variant av textens EGEN färg (color-mix), inte accenten
   rakt av: en mörk accent tvärs igenom vit text på ett foto läser som ett hål i
   texten. Blandningen håller sig nära textens ljushet och läser som ett skimmer. */
@keyframes jwfxShimmer { to { background-position: 200% center; } }

.jw-block[data-fx="shimmer"] :is(h1, h2, h3) {
  background: linear-gradient(100deg,
    currentColor 38%,
    color-mix(in oklab, var(--accent, #c84812) 55%, currentColor) 50%,
    currentColor 62%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: jwfxShimmer var(--fx-dur) linear infinite;
}
.jw-block[data-fx="shimmer"] .jw-btn { position: relative; overflow: hidden; }
.jw-block[data-fx="shimmer"] .jw-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: jwfxShimmer var(--fx-dur) linear infinite;
}

/* ── 2) STIG IN — innehållet tonar och stiger in ─────────────────────────────
   Blocket stiger in som helhet. Har blocket flera syskon-delar som hör ihop
   (knappar i en knapp-grupp, punkter i en lista, bilder i ett galleri) trappas de
   in i följd — det är där "staggern" faktiskt syns. Ett block har annars bara ett
   enda barn-element, så en per-barn-trappa hade inte gett något.
   Körs EN gång vid inladdning (both → sluttillståndet står kvar). */
@keyframes jwfxRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.jw-block[data-fx="stagger"] { animation: jwfxRise .6s both; }
.jw-block[data-fx="stagger"] :is(.jw-btn-wrap > *, li, .jw-gal-item) { animation: jwfxRise .6s both; }
.jw-block[data-fx="stagger"] :is(.jw-btn-wrap > *, li, .jw-gal-item):nth-child(1) { animation-delay: .10s; }
.jw-block[data-fx="stagger"] :is(.jw-btn-wrap > *, li, .jw-gal-item):nth-child(2) { animation-delay: .18s; }
.jw-block[data-fx="stagger"] :is(.jw-btn-wrap > *, li, .jw-gal-item):nth-child(3) { animation-delay: .26s; }
.jw-block[data-fx="stagger"] :is(.jw-btn-wrap > *, li, .jw-gal-item):nth-child(4) { animation-delay: .34s; }
.jw-block[data-fx="stagger"] :is(.jw-btn-wrap > *, li, .jw-gal-item):nth-child(5) { animation-delay: .42s; }
.jw-block[data-fx="stagger"] :is(.jw-btn-wrap > *, li, .jw-gal-item):nth-child(n+6) { animation-delay: .50s; }

/* ── 3) ROTERANDE GLÖD — mjukt sken bakom knappen (annars bakom blocket) ─────
   @property gör vinkeln animerbar; utan stöd står glöden still (fortfarande snygg).
   Glöden ligger BAKOM innehållet (z-index -1 + isolation på föräldern). */
@property --jwfxA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes jwfxSpin { to { --jwfxA: 360deg; } }

.jw-block[data-fx="spin"] { position: relative; isolation: isolate; }
.jw-block[data-fx="spin"] .jw-btn { position: relative; isolation: isolate; }
.jw-block[data-fx="spin"]:not(:has(.jw-btn))::before,
.jw-block[data-fx="spin"] .jw-btn::before {
  content: ""; position: absolute; inset: -4px; z-index: -1;
  /* Pill-form: knappen kan sakna synlig radie (text-knapp) — en rektangulär glöd
     bakom en naken textlänk läser som en smet, en rundad halo läser som avsikt. */
  border-radius: 999px;
  background: conic-gradient(from var(--jwfxA),
    transparent 0deg,
    color-mix(in oklab, var(--accent, #c84812) 70%, transparent) 90deg,
    transparent 200deg,
    color-mix(in oklab, var(--accent2, var(--accent, #c84812)) 60%, transparent) 300deg,
    transparent 360deg);
  filter: blur(7px); opacity: .9;
  animation: jwfxSpin var(--fx-dur) linear infinite;
}
/* Blocket självt saknar radie — ge glöden en mjuk form när den ligger bakom hela blocket. */
.jw-block[data-fx="spin"]:not(:has(.jw-btn))::before { border-radius: var(--radius, 12px); }
/* Text-knappar (bs-link) ar nakna lankar — dar blir glöden diskretare sa den inte tar over. */
.jw-block[data-fx="spin"] .jw-btn.bs-link::before { inset: -2px 6px; filter: blur(10px); opacity: .6; }

/* ── Tillgänglighet: ingen rörelse för den som bett om mindre rörelse ────────
   Skimmer/glöd fryser i sitt utgångsläge; stig-in hoppar direkt till slutläget
   (annars skulle innehållet bli osynligt kvar på opacity 0). */
@media (prefers-reduced-motion: reduce) {
  .jw-block[data-fx] { animation: none !important; }
  .jw-block[data-fx] *, .jw-block[data-fx] *::before, .jw-block[data-fx] *::after { animation: none !important; }
  .jw-block[data-fx="stagger"], .jw-block[data-fx="stagger"] * { opacity: 1 !important; transform: none !important; }
}