/* ==========================================================================
   EFFEKTER — allt rörligt. Bara med <body class="fx"> och när besökaren
   inte bett om mindre rörelse. Utan effekter syns allt direkt.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Glider fram: uppåt, från oskärpa till skarpt, i tur och ordning (--i) */
  .fx [data-reveal] {
    opacity: 0; transform: translate3d(0, 36px, 0) scale(.98); filter: blur(10px);
    transition: opacity .9s var(--ease-out) calc(var(--i, 0) * 80ms),
                transform 1.1s var(--ease-out) calc(var(--i, 0) * 80ms),
                filter .9s var(--ease-out) calc(var(--i, 0) * 80ms);
  }
  .fx [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  /* Kort som lutar mot pekaren */
  .fx [data-tilt][data-reveal].is-in {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
    transition: opacity .9s var(--ease-out) calc(var(--i, 0) * 80ms), transform .6s var(--ease-out), filter .9s var(--ease-out), box-shadow .5s;
  }
  .fx [data-tilt].is-tilting { transition: transform .1s linear, box-shadow .5s, opacity .9s, filter .9s; }

  /* Rubrikrader sveper upp en i taget */
  .fx .line-up > span { display: inline-block; transform: translateY(110%); animation: line-up 1.2s var(--ease-out) forwards; animation-delay: calc(.15s + var(--i, 0) * .12s); }
  @keyframes line-up { to { transform: none; } }
  .fx .text-grad { animation: grad-move 8s ease-in-out infinite; }
  @keyframes grad-move { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

  /* Glans som sveper över huvudknappar */
  .fx .btn--shine::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%);
    background-size: 250% 100%; animation: btn-shine 4.5s ease-in-out infinite;
  }
  @keyframes btn-shine { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

  /* Pulserande prick för "anmälan öppen" */
  .fx .live::before { animation: pulse 1.8s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

  /* Platsmätare fylls på när de syns */
  .fx [data-reveal] .meter i { transform: scaleX(0); transition: transform 1.4s var(--ease-out) .3s; }
  .fx [data-reveal].is-in .meter i { transform: scaleX(1); }
}