/* JL Tuning – revision 1E: sektionskanter som följer sektionens egen bakgrund + målflagga i processen.
   Lägg sist i jl-komponenter.css. Ändra inte. */

/* Mörk sektion med svängd över- och underkant. Sektionen klipps själv (mask), så kanten och bakgrunden
   (gradient, bild, partiklar) hör alltid ihop. Sektionen lappar över grannarna med --jl-wave så att
   grannens bakgrund syns ovanför/under kurvan. */
.jl-wave{
  --jl-wave:64px;
  position:relative;z-index:1;
  margin-block:calc(-1 * var(--jl-wave));
  padding-block:calc(var(--section-pad, 96px) + var(--jl-wave));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 40 C360 12 760 58 1440 6 L1440 64 L0 64Z%22/%3E%3C/svg%3E") top / 100% var(--jl-wave) no-repeat,
               linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--jl-wave) + 2px) no-repeat,
               url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0 H1440 V34 C1080 60 680 8 0 50 Z%22/%3E%3C/svg%3E") bottom / 100% var(--jl-wave) no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 40 C360 12 760 58 1440 6 L1440 64 L0 64Z%22/%3E%3C/svg%3E") top / 100% var(--jl-wave) no-repeat,
               linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--jl-wave) + 2px) no-repeat,
               url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 64%22 preserveAspectRatio=%22none%22%3E%3Cpath d=%22M0 0 H1440 V34 C1080 60 680 8 0 50 Z%22/%3E%3C/svg%3E") bottom / 100% var(--jl-wave) no-repeat;
}
/* Röd linje exakt på kurvan (samma path som masken). Ligger i sektionen, ritas in med line-draw. */
.jl-wave__line{position:absolute;left:0;width:100%;height:var(--jl-wave);z-index:3;pointer-events:none;display:block}
.jl-wave__line--top{top:0}
.jl-wave__line--bottom{bottom:0}
.jl-wave__line path{fill:none;stroke:#E63C39;stroke-width:8px;vector-effect:non-scaling-stroke}
@media (max-width: 899px){ .jl-wave{--jl-wave:36px} }

/* Processteg: däckspår MELLAN cirklarna + målflagga efter sista steget */
.jl-steps{position:relative}
.jl-step{position:relative}
.jl-step__link{position:absolute;top:22px;left:calc(50% + 34px);width:calc(100% - 68px);height:24px;transform:translateY(-50%);pointer-events:none}
.jl-step__finish{position:absolute;top:22px;left:calc(50% + 34px);width:120px;height:44px;transform:translateY(-50%);display:flex;align-items:center;gap:6px;pointer-events:none}
.jl-step__finish .jl-track{width:70px;height:24px;flex:none}
.jl-flag{width:40px;height:44px;flex:none;transform-origin:4px 40px;transform:scale(0) rotate(-20deg);transition:transform .5s cubic-bezier(.2,.9,.3,1.4) 2.5s}
.jl-steps.is-in .jl-flag,.jl-flag.is-in{transform:scale(1) rotate(0)}
.jl-flag__cloth{animation:jl-wave-flag 1.6s ease-in-out 3s infinite alternate;transform-origin:6px 8px}
@keyframes jl-wave-flag{from{transform:skewY(0)}to{transform:skewY(-6deg)}}
@media (max-width: 899px){ .jl-step__link,.jl-step__finish{display:none} }
@media (prefers-reduced-motion: reduce){ .jl-flag{transition:none;transform:none} .jl-flag__cloth{animation:none} }