/* ============================================================
   LSW Cupen Stege — frontend.css

   Bas-klass på en BB-rad:
     .lswc-stege-right   — stege på höger kant
     .lswc-stege-left    — stege på vänster kant (spegelvänd)
     .lswc-stege-both    — stege på båda sidor

   Storlek (välj en, default = medium):
     .lswc-stege--small   (25 px bred)
     .lswc-stege--medium  (40 px bred)
     .lswc-stege--large   (60 px bred)
     .lswc-stege--xl      (140 px bred)

   Position:
     .lswc-stege--inset   (30 px in från kanten)

   Opacitet:
     .lswc-stege--subtle  (35%)
     .lswc-stege--normal  (70%)
     .lswc-stege--strong  (100%, default)

   Animation (välj en, default = ingen):
     .lswc-stege--anim-build      — bygg upp nedifrån vid scroll-in
     .lswc-stege--anim-shimmer    — ljus pulsvåg sveper uppifrån och ned i loop
     .lswc-stege--anim-pulse      — varje form pulsar fasförskjutet (våg uppåt)
     .lswc-stege--anim-fill       — bottensektionens konturer fylls in successivt
     .lswc-stege--anim-drift      — subtil sidoglidning, evig

   Lutning (valfritt):
     .lswc-stege--tilt-right      — lutar 3° medurs (justera via --lswc-stege-tilt)
     .lswc-stege--tilt-left       — lutar 3° moturs

   Parallax (valfritt, kräver JS):
     .lswc-stege--parallax        — stegen halkar efter vid scroll (±30 px)
   ============================================================ */


/* ---------- Container-defaults (sätts på BB-raden) ---------- */

.lswc-stege-right,
.lswc-stege-left,
.lswc-stege-both {
	--lswc-stege-width: 40px;
	--lswc-stege-edge: 0px;
	--lswc-stege-opacity: 1;
	--lswc-stege-tilt: 0deg;
	--lswc-stege-parallax-y: 0px;
	position: relative;
}


/* ---------- Aside-positionering ---------- */

.lswc-stege__aside {
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--lswc-stege-width);
	pointer-events: none;
	overflow: hidden;
	opacity: var(--lswc-stege-opacity);
	z-index: 1;
}

.lswc-stege__aside--right {
	right: var(--lswc-stege-edge);
}

.lswc-stege__aside--left {
	left: var(--lswc-stege-edge);
	transform: scaleX(-1); /* spegelvänd så stegen lutar mot rätt håll */
}

.lswc-stege__aside svg {
	display: block;
	width: 100%;
	height: auto;
	transform-origin: center;
	transform: translate3d(0, var(--lswc-stege-parallax-y), 0) rotate(var(--lswc-stege-tilt));
	will-change: transform;
	/* Ingen max-height: SVG:n får överskrida radhöjden om aspektförhållandet
	   kräver det. Asiden har overflow:hidden så det som inte får plats
	   klipps bort. Annars kan storleksklasserna (--large, --xl) inte göra
	   stegen bredare eftersom SVG:n då skalas ner till radhöjden. */
}


/* ---------- Storlek ---------- */

.lswc-stege--small  { --lswc-stege-width: 25px; }
.lswc-stege--medium { --lswc-stege-width: 40px; }
.lswc-stege--large  { --lswc-stege-width: 60px; }
.lswc-stege--xl     { --lswc-stege-width: 140px; }


/* ---------- Position ---------- */

.lswc-stege--inset { --lswc-stege-edge: 30px; }


/* ---------- Opacitet ---------- */

.lswc-stege--subtle { --lswc-stege-opacity: 0.35; }
.lswc-stege--normal { --lswc-stege-opacity: 0.7; }
.lswc-stege--strong { --lswc-stege-opacity: 1; }


/* ---------- Lutning ----------
   Roterar SVG:n inuti aside. Eftersom .lswc-stege__aside--left är speglad
   med scaleX(-1) blir lutningen visuellt symmetrisk på vänster sida — vilket
   är önskat när stegen används på båda sidor samtidigt. På höger sida lutar
   den åt höger som förväntat. */

.lswc-stege--tilt-right { --lswc-stege-tilt: 3deg; }
.lswc-stege--tilt-left  { --lswc-stege-tilt: -3deg; }


/* ---------- Parallax ----------
   JS uppdaterar --lswc-stege-parallax-y på containern baserat på
   scroll-position. Klassen finns bara som triggar för JS:en — själva
   transformeringen sker via variabeln på SVG-elementet. */

.lswc-stege--parallax .lswc-stege__aside svg {
	transition: transform 80ms linear;
}


/* ============================================================
   Form-defaults — gör så att animationer kan utgå från center
   på respektive form (annars roterar/skalar de från SVG-origo).
   ============================================================ */

.lswc-stege__shape {
	transform-origin: center;
	transform-box: fill-box;
}


/* ============================================================
   ANIMATION 01 — BUILD (scroll-triggered, bygg upp nedifrån)
   JS lägger till .is-built när elementet syns i viewport.
   ============================================================ */

.lswc-stege--anim-build .lswc-stege__shape {
	opacity: 0;
	transform: translateY(12px) scale(0.6);
	transition:
		opacity 500ms cubic-bezier(.4, 0, .2, 1),
		transform 500ms cubic-bezier(.4, 0, .2, 1);
}

.lswc-stege--anim-build.is-built .lswc-stege__shape {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Stagger nedifrån (pos 14) och upp (pos 1) — som att stegen växer uppåt */
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="14"] { transition-delay: 0ms;   }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="13"] { transition-delay: 70ms;  }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="12"] { transition-delay: 140ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="11"] { transition-delay: 210ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="10"] { transition-delay: 280ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="9"]  { transition-delay: 350ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="8"]  { transition-delay: 420ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="7"]  { transition-delay: 490ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="6"]  { transition-delay: 560ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="5"]  { transition-delay: 630ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="4"]  { transition-delay: 700ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="3"]  { transition-delay: 770ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="2"]  { transition-delay: 840ms; }
.lswc-stege--anim-build.is-built .lswc-stege__shape[data-pos="1"]  { transition-delay: 910ms; }


/* ============================================================
   ANIMATION 02 — SHIMMER (ljusvåg sveper nedåt, evig loop)
   ============================================================ */

.lswc-stege--anim-shimmer .lswc-stege__shape {
	animation: lswc-shimmer 4.2s ease-in-out infinite;
}

/* Stagger uppifrån (pos 1) och ned (pos 14) så vågen rör sig nedåt */
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="1"]  { animation-delay: 0s;     }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="2"]  { animation-delay: 0.13s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="3"]  { animation-delay: 0.26s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="4"]  { animation-delay: 0.39s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="5"]  { animation-delay: 0.52s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="6"]  { animation-delay: 0.65s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="7"]  { animation-delay: 0.78s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="8"]  { animation-delay: 0.91s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="9"]  { animation-delay: 1.04s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="10"] { animation-delay: 1.17s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="11"] { animation-delay: 1.30s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="12"] { animation-delay: 1.43s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="13"] { animation-delay: 1.56s;  }
.lswc-stege--anim-shimmer .lswc-stege__shape[data-pos="14"] { animation-delay: 1.69s;  }

@keyframes lswc-shimmer {
	0%, 100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
	50%      { filter: brightness(1.7) drop-shadow(0 0 6px rgba(110, 196, 204, 0.55)); }
}


/* ============================================================
   ANIMATION 03 — PULSE (våg av opacitet/skalning, rör sig uppåt)
   ============================================================ */

.lswc-stege--anim-pulse .lswc-stege__shape {
	animation: lswc-pulse 3s ease-in-out infinite;
}

/* Stagger nedifrån (pos 14) och upp (pos 1) — vågen färdas uppåt */
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="14"] { animation-delay: 0s;    }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="13"] { animation-delay: 0.10s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="12"] { animation-delay: 0.20s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="11"] { animation-delay: 0.30s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="10"] { animation-delay: 0.40s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="9"]  { animation-delay: 0.50s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="8"]  { animation-delay: 0.60s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="7"]  { animation-delay: 0.70s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="6"]  { animation-delay: 0.80s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="5"]  { animation-delay: 0.90s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="4"]  { animation-delay: 1.00s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="3"]  { animation-delay: 1.10s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="2"]  { animation-delay: 1.20s; }
.lswc-stege--anim-pulse .lswc-stege__shape[data-pos="1"]  { animation-delay: 1.30s; }

@keyframes lswc-pulse {
	0%, 100% { opacity: 1;    transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.85); }
}


/* ============================================================
   ANIMATION 04 — FILL (bottensektionens konturer fylls in)
   Endast de 5 nedersta formerna (data-style="stroke") berörs.
   ============================================================ */

.lswc-stege--anim-fill .lswc-stege__shape[data-style="stroke"] {
	fill: url(#lswcStegeStroke);
	fill-opacity: 0;
	animation: lswc-fill 5s ease-in-out infinite;
}

/* Fyll uppifrån-och-ner i bottensektionen */
.lswc-stege--anim-fill .lswc-stege__shape[data-pos="10"] { animation-delay: 0s;    }
.lswc-stege--anim-fill .lswc-stege__shape[data-pos="11"] { animation-delay: 0.35s; }
.lswc-stege--anim-fill .lswc-stege__shape[data-pos="12"] { animation-delay: 0.70s; }
.lswc-stege--anim-fill .lswc-stege__shape[data-pos="13"] { animation-delay: 1.05s; }
.lswc-stege--anim-fill .lswc-stege__shape[data-pos="14"] { animation-delay: 1.40s; }

@keyframes lswc-fill {
	0%, 100% { fill-opacity: 0; }
	35%, 65% { fill-opacity: 1; }
}


/* ============================================================
   ANIMATION 05 — DRIFT (subtil sidoglidning, evig)
   Diskret rörelse som ger känslan av "vinddraget grafik" utan
   att stjäla uppmärksamhet.
   ============================================================ */

.lswc-stege--anim-drift .lswc-stege__shape {
	animation: lswc-drift 6s ease-in-out infinite;
}

.lswc-stege--anim-drift .lswc-stege__shape:nth-child(odd)  { animation-delay: 0s;   }
.lswc-stege--anim-drift .lswc-stege__shape:nth-child(even) { animation-delay: -3s;  }

@keyframes lswc-drift {
	0%, 100% { transform: translateX(0)    scale(1);    }
	50%      { transform: translateX(1.5px) scale(1.04); }
}


/* ============================================================
   Reduced motion — respektera användarens systeminställning
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.lswc-stege--anim-build .lswc-stege__shape,
	.lswc-stege--anim-shimmer .lswc-stege__shape,
	.lswc-stege--anim-pulse .lswc-stege__shape,
	.lswc-stege--anim-fill .lswc-stege__shape,
	.lswc-stege--anim-drift .lswc-stege__shape {
		animation: none;
		transition: none;
		opacity: 1;
		transform: none;
		fill-opacity: 1;
	}

	/* Pausa parallaxen — tilt får dock vara kvar eftersom den är statisk. */
	.lswc-stege--parallax {
		--lswc-stege-parallax-y: 0px;
	}
}