/* Reduceraren – rörelse (2026-09-26).
   Stilarna som hör till js/13-motion.js. Själva animationerna sköts av JS
   (Web Animations API); här ligger bara det som måste finnas i CSS:
   flikplattan, ljusfläcken på produktkorten, de studsiga tecken-knapparna
   och den frostade bakgrunden bakom dialoger. */

/* --- Glidande flikplatta -------------------------------------------------
   JS lägger in en <span class="motion-glider"> först i flikraden och sätter
   .has-glider på raden. Den aktiva fliken tappar då sin egen vita platta –
   det är den glidande plattan som ÄR markeringen nu. Fliktexten ligger över
   plattan (z-index 1). */
.has-glider {
  position: relative;
  isolation: isolate;
}

.motion-glider {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.has-glider > :not(.motion-glider) {
  position: relative;
  z-index: 1;
}

.motion-glider--tab {
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 33, 64, 0.08), 0 3px 10px rgba(15, 33, 64, 0.06);
}

@media (max-width: 520px) {
  .motion-glider--tab {
    border-radius: 13px;
  }
}

.motion-glider--subtab {
  background: #eaf0f9;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 191, 0.16);
}

.motion-glider--mode {
  background: #fff;
  box-shadow: 0 1px 3px rgba(30, 40, 30, 0.16);
}

.has-glider .tab-button-active,
.has-glider .tab-button-active:hover,
.has-glider .history-subtab-button-active,
.has-glider .history-subtab-button-active:hover,
.has-glider .reduce-mode-btn-active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

/* --- Tecken-knapparna (1/X/2) -------------------------------------------
   "Gelé" i stället för den gamla lilla pop:en: knappen trycks ihop på
   bredden, sväller på höjden och svänger in – som en droppe som landar.
   Den gamla :active-krympningen tas bort eftersom JS-trycket nu gör samma
   sak med fjäder på släppet (annars hade de två krympt knappen dubbelt). */
.sign-toggle:active {
  transform: none;
}

.sign-toggle.chosen {
  animation: motion-jelly 0.62s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes motion-jelly {
  0%   { transform: scale(0.72, 0.72); }
  28%  { transform: scale(1.16, 0.88); }
  46%  { transform: scale(0.92, 1.08); }
  64%  { transform: scale(1.04, 0.97); }
  82%  { transform: scale(0.99, 1.01); }
  100% { transform: scale(1, 1); }
}

/* --- Produktkorten: ljusfläck som följer musen ---------------------------
   Lutningen sätts av JS (rotate-egenskapen); här ritas en mjuk ljuskägla
   där pekaren är, i ett eget lager ovanpå kortets färg. Perspektivet på
   föräldern gör att lutningen får djup i stället för att se platt ut. */
#product-cards {
  perspective: 1100px;
}

/* Ett eget <span> som JS lägger in – kortets ::before är JACKPOT-bandet och
   ::after den befintliga glansen, så inget pseudo-element är ledigt. */
.motion-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(380px circle at var(--motion-mx, 50%) var(--motion-my, 50%), rgba(255, 255, 255, 0.17), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.product-card.motion-lit .motion-spot {
  opacity: 1;
}

/* --- Dialoger -----------------------------------------------------------
   Frostat glas bakom dialogen i stället för en platt mörk hinna – sidan
   syns suddigt igenom, som på iOS. Mörkningen är lite lättare än förut
   eftersom suddet redan tar bort det mesta av bruset bakom. */
.modal-backdrop {
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  background: rgba(10, 24, 48, 0.42);
}

.motion-ghost {
  z-index: 49;
}

@media (prefers-reduced-motion: reduce) {
  .motion-glider {
    transition: none;
  }

  .sign-toggle.chosen {
    animation: none;
  }
}