/* Flödet: en annons per skärm som man sveper uppåt mellan. I mobilen fyller det hela skärmen,
   på dator ligger det som en telefonbred kolumn mitt på skärmen. */
/* Medan flödet är öppet göms resten av sidan, och sidan stannar på en annons i taget. */
html.flode-lage { scroll-snap-type: y mandatory; background: var(--flode-farg, var(--bakgrund)); transition: background-color 200ms ease-out; }

html.flode-lage body { background: none; }

html.flode-lage body > :not(.flode):not(dialog) { display: none !important; }

.flode {
  position: relative;
  width: min(480px, 100%);
  margin: 0 auto;
  background: var(--bakgrund);
  color: var(--text);
}

/* En annons är exakt en skärm hög och stannar alltid helt i bild, som i TikTok. */
.flode-kort {
  position: relative;
  display: flex;
  flex-direction: column;
  /* En vit bit under varje annons fyller remsan under Safaris knappar, så att nästa annons inte tittar fram där. */
  --remsa: 96px;
  height: calc(100vh + var(--remsa));
  height: calc(100lvh + var(--remsa));
  padding-bottom: var(--remsa);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}

.flode-bild { position: relative; display: grid; place-items: center; flex: 0 0 42%; padding-top: calc(56px + env(safe-area-inset-top)); color: #2a2d31; }

.flode-bild > svg { width: 55%; max-width: 220px; height: auto; }

.flode-bild .yta { fill: var(--bakgrund); }

/* Ett foto fyller bilden under toppens knappar. Ovanför syns branschens färg, som fortsätter upp under klockan. */
.flode-bild .foto {
  position: absolute;
  top: calc(60px + env(safe-area-inset-top));
  left: 0;
  width: 100%;
  height: calc(100% - 60px - env(safe-area-inset-top));
  object-fit: cover;
}

/* Fotografens namn till vänster, så att knapparna för upp och ner på datorn inte täcker det. */
.flode-bild .fotokalla { left: 8px; right: auto; }

.flode-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 18px 84px calc(28px + env(safe-area-inset-bottom)) 20px;
}

.flode-status { margin: 0 0 6px; font-size: 0.9375rem; font-weight: 700; }

.flode-namn { margin: 0; font-size: 1.75rem; line-height: 1.15; }

.flode-plats { margin: 4px 0 10px; color: var(--dampad); font-size: 0.9375rem; }

.flode-gora {
  display: -webkit-box;
  margin: 0 0 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.flode-fakta, .flode-sok { margin: 0 0 4px; font-size: 0.9375rem; }

.flode-sok { color: var(--dampad); }

.flode-tips { margin: 12px 0 0; color: var(--dampad); font-size: 0.875rem; }

/* Knappen ligger alltid längst ner och fyller bredden, även hjärtats kolumn. */
.flode-mer { width: calc(100% + 64px); margin-top: auto; }

/* Toppen: X, flikarna och 2/27. Den ligger fast och är genomskinlig, så att annonsens bild syns bakom den och upp under klockan. */
.flode-topp {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 3;
  width: min(480px, 100%);
  background: var(--flode-farg, var(--bakgrund));
  transform: translateX(-50%);
  transition: background-color 200ms ease-out;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
}

.flode-stang {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--bakgrund);
  cursor: pointer;
}

/* X:et snurrar in när flödet öppnas och vrider sig ett kvarts varv när man pekar eller trycker på det. */
.flode-stang svg { animation: snurra-in 520ms cubic-bezier(0.3, 1.3, 0.5, 1); transition: transform 200ms ease-out; }

.flode-stang:active svg { transform: rotate(90deg) scale(0.9); }

@media (hover: hover) { .flode-stang:hover svg { transform: rotate(90deg); } }

@keyframes snurra-in {
  from { transform: rotate(-270deg) scale(0.3); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.flode-stang svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; }

.flode-flikar {
  position: relative;
  justify-self: center;
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
}

.flode-flik {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--dampad);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out;
}

.flode-flik { position: relative; z-index: 1; }

.flode-flik[aria-pressed="true"] { color: var(--text); }

/* Markören bakom den valda fliken: glider dit man trycker och gungar som gelé, precis som typvalet i listan. */
.flode-markor {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  pointer-events: none;
  transition: transform 420ms cubic-bezier(0.34, 1.4, 0.64, 1), width 420ms cubic-bezier(0.34, 1.4, 0.64, 1);
}

.flode-markor-direkt { transition: none; }

.flode-gele {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--bakgrund);
  box-shadow: 0 1px 2px rgb(22 24 27 / 0.15);
  transition: background-color 300ms ease-out;
}

.flode-markor.flyttar .flode-gele { animation: gele 520ms ease-out; }

/* Diskret räknare, liten och utan ram. */
.flode-antal {
  justify-self: end;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

.flode-tomt { min-height: 100dvh; margin: 0; padding: 140px 24px 0; color: var(--dampad); text-align: center; }

/* Hjärtat till höger, en bit under mitten, där tummen vilar när man sveper. */
.flode-gilla {
  position: absolute;
  top: calc(50% - var(--remsa) / 2);
  right: 14px;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
}

.flode-gilla svg {
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 13px;
  border: 2px solid var(--linje);
  border-radius: 999px;
  background: var(--bakgrund);
  fill: transparent;
  stroke: var(--text);
  stroke-width: 2;
  stroke-linejoin: round;
  transition: transform 100ms ease-out;
}

.flode-gilla:active svg { transform: scale(0.9); }

.flode-gilla[aria-pressed="true"] svg { fill: var(--text); }

/* När en annons sparas: hjärtat studsar upp, snurrar ett varv och landar. */
.flode-gilla.fira svg { animation: snurrpop 620ms cubic-bezier(0.3, 1.4, 0.5, 1); }

@keyframes snurrpop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.3) rotate(220deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/* Gnistorna: åtta små streck som skjuts ut från hjärtats mitt och tonar bort. */
.flode-gnistor { position: absolute; top: 29px; left: 50%; z-index: 1; pointer-events: none; }

.flode-gnistor i {
  position: absolute;
  top: -5px;
  left: -1.5px;
  width: 3px;
  height: 10px;
  border-radius: 2px;
  background: var(--fargklick);
  transform: rotate(var(--vinkel)) translateY(-26px);
  opacity: 0;
  animation: gnistra 620ms ease-out forwards;
}

.flode-gnistor i:nth-child(even) { height: 7px; background: var(--text); animation-delay: 60ms; }

@keyframes gnistra {
  0% { transform: rotate(var(--vinkel)) translateY(-34px) scaleY(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: rotate(var(--vinkel)) translateY(-62px) scaleY(1); opacity: 0; }
}

/* Stort hjärta mitt på annonsen när man dubbeltrycker. */
.flode-pang {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: 2;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  pointer-events: none;
  animation: pang 700ms ease-out forwards;
}

.flode-pang svg { width: 100%; height: 100%; fill: var(--text); stroke: var(--bakgrund); stroke-width: 1; }

@keyframes pang {
  0% { transform: scale(0.4); opacity: 0; }
  25% { transform: scale(1.1); opacity: 1; }
  60% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* Kortet som öppnar flödet, under Filtrera. Mörkt mot den ljusa sidan, så att det syns som något eget. */
.flodekort {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 76px;
  margin-top: 12px;
  padding: 10px 12px 10px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--text);
  color: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 120ms ease-out;
}

.flodekort[hidden] { display: none; }

.flodekort:active { transform: scale(0.98); }

/* Förhandstittet: en liten telefon där annonsernas färger glider uppåt, som när man sveper i flödet. */
.flodekort-mini {
  flex: none;
  width: 42px;
  height: 62px;
  padding: 3px;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 10px;
  overflow: hidden;
}

.flodekort-spar { display: grid; gap: 3px; animation: mini-svep 2.4s ease-in-out 1s 4 alternate both; }

.flodekort-kort {
  display: block;
  height: 52px;
  border-radius: 5px;
  /* Färgen överst som annonsens bild, och två små grå rader som text under. */
  background:
    linear-gradient(#b9bdc2, #b9bdc2) 4px 72% / 62% 3px no-repeat,
    linear-gradient(#b9bdc2, #b9bdc2) 4px 86% / 40% 3px no-repeat,
    linear-gradient(var(--farg) 0 56%, #fff 56% 100%);
}

@keyframes mini-svep {
  0%, 35% { transform: none; }
  65%, 100% { transform: translateY(-55px); }
}

.flodekort-text { display: grid; flex: 1; gap: 2px; min-width: 0; }

.flodekort-rubrik { font-size: 1.125rem; font-weight: 800; line-height: 1.2; }

.flodekort-under { color: rgb(255 255 255 / 0.75); font-size: 0.9375rem; }

.flodekort-pil {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--fargklick);
  transition: transform 150ms ease-out;
}

.flodekort-pil svg { width: 20px; height: 20px; fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) { .flodekort:hover .flodekort-pil { transform: translateX(3px); } }

/* Upp och ner för dator: två runda knappar till höger, ovanför hjärtat. Syns bara med mus. */
.flode-styr { display: none; }

@media (hover: hover) and (pointer: fine) {
  .flode-styr {
    position: fixed;
    top: 28%;
    right: max(14px, calc(50% - 240px + 14px));
    z-index: 3;
    display: grid;
    gap: 10px;
  }
}

.flode-styr-knapp {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid var(--linje);
  border-radius: 999px;
  background: var(--bakgrund);
  cursor: pointer;
  transition: background-color 120ms ease-out, transform 100ms ease-out;
}

.flode-styr-knapp:hover { background: var(--fargklick-ljus); }

.flode-styr-knapp:active { transform: scale(0.94); }

.flode-styr-knapp svg { width: 22px; height: 22px; fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.flode-styr-ned svg { transform: rotate(180deg); }

/* Guiden första gången: grå hinna över annonsen, pilar som pekar uppåt och ett finger som sveper. */
.flode-guide {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 24px calc(160px + env(safe-area-inset-bottom));
  background: rgb(22 24 27 / 0.74);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  text-align: center;
  touch-action: none;
  cursor: pointer;
  animation: tona-in 250ms ease-out;
}

/* När man släpper glider hinnan klart uppåt, eller tillbaka om man inte drog tillräckligt. */
.flode-guide-slapp { transition: transform 280ms ease-out, opacity 280ms ease-out; }

.flode-guide-borta { transform: translateY(-100%); opacity: 0; pointer-events: none; }

@keyframes tona-in { from { opacity: 0; } }

.flode-guide-pilar { display: grid; justify-items: center; margin-bottom: 12px; }

.flode-guide-pilar svg { width: 34px; height: 22px; margin-top: -6px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: pil-upp 1.6s ease-in-out infinite; }

.flode-guide-pilar svg:nth-child(1) { animation-delay: 0.4s; }

.flode-guide-pilar svg:nth-child(2) { animation-delay: 0.2s; }

@keyframes pil-upp {
  0%, 100% { opacity: 0.25; transform: translateY(4px); }
  50% { opacity: 1; transform: translateY(-4px); }
}

.flode-guide-rubrik { margin: 0; font-size: 1.5rem; font-weight: 800; }

.flode-guide-text { margin: 4px 0 0; font-size: 1rem; opacity: 0.85; }

/* Handen trycker till längst ner och viftar sedan uppåt med handleden, som när man sveper med tummen. */
.flode-guide-hand {
  position: absolute;
  bottom: calc(40px + env(safe-area-inset-bottom));
  left: 50%;
  width: 56px;
  margin-left: -20px;
  fill: #fff;
  stroke: #2a2d31;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Handleden är vridpunkten, nere till vänster i handen. */
  transform-origin: 35% 100%;
  animation: finger-svep 2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes finger-svep {
  0% { transform: translateY(30px) rotate(-22deg); opacity: 0; }
  12% { transform: translateY(30px) rotate(-22deg); opacity: 1; }
  22% { transform: translateY(34px) rotate(-22deg) scale(0.88); }
  58% { transform: translateY(-100px) rotate(12deg) scale(0.88); opacity: 1; }
  68% { transform: translateY(-118px) rotate(20deg) scale(1.04); opacity: 1; }
  82%, 100% { transform: translateY(-124px) rotate(22deg) scale(1); opacity: 0; }
}

/* Efter guiden: Spara studsar och en ring växer ut runt den, tills man har tryckt på den. */
.flode-gilla.locka svg { animation: locka-studs 1.6s ease-in-out infinite; }

.flode-gilla.locka::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 58px;
  height: 58px;
  margin-left: -29px;
  border: 3px solid var(--fargklick);
  border-radius: 999px;
  pointer-events: none;
  animation: locka-ring 1.6s ease-out infinite;
}

@keyframes locka-studs {
  0%, 55%, 100% { transform: none; }
  12% { transform: scale(1.14) rotate(-10deg); }
  26% { transform: scale(1.14) rotate(10deg); }
  40% { transform: scale(1); }
}

@keyframes locka-ring {
  0% { transform: scale(1); opacity: 0.9; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}