/* e13-inzoomningen.html – lyft ur startsektionerna med kalla/sx_in.py (ändra i källan och kör om) */
.e13 { position: relative; }
.e13-spar { position: relative; height: calc(var(--vh) * 600); }
.e13-klibb { position: sticky; top: 0; height: calc(var(--vh) * 100); min-height: 560px; overflow: hidden; background: var(--natt); }
.e13-scen { position: absolute; inset: 0; overflow: hidden; contain: strict; }
.e13-niva { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform, opacity; pointer-events: none; }
.e13-niva img { display: block; width: 100%; height: 100%; max-width: none; }
.e13-mork { position: absolute; inset: 0; background: var(--natt); opacity: 0; pointer-events: none; }
/* toppen börjar i sidans natt (helt täckande) så att scenen glider in utan kant; mjuk toning (smoothstep) i båda ändar */
.e13-vinjett { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4, 10, 24, 1.00) 0.0%, rgba(4, 10, 24, 0.98) 2.9%, rgba(4, 10, 24, 0.91) 6.5%, rgba(4, 10, 24, 0.78) 10.8%, rgba(4, 10, 24, 0.59) 15.8%, rgba(4, 10, 24, 0.38) 20.9%, rgba(4, 10, 24, 0.19) 25.9%, rgba(4, 10, 24, 0.06) 30.6%, rgba(4, 10, 24, 0.01) 33.8%, rgba(4, 10, 24, 0.00) 36.0%, rgba(4, 10, 24, 0.00) 68.0%, rgba(4, 10, 24, 0.01) 70.6%, rgba(4, 10, 24, 0.04) 73.8%, rgba(4, 10, 24, 0.11) 77.6%, rgba(4, 10, 24, 0.21) 82.1%, rgba(4, 10, 24, 0.31) 86.6%, rgba(4, 10, 24, 0.40) 91.0%, rgba(4, 10, 24, 0.47) 95.2%, rgba(4, 10, 24, 0.49) 98.1%, rgba(4, 10, 24, 0.50) 100.0%); }
/* skannerlinjen som skär upp pannan: kall (is och blått) – bärnstenen hör till lågan; ett svagt ljusband efter linjen */
.e13-skanner { position: absolute; left: 0; top: 0; width: 0; height: 1px; pointer-events: none; opacity: 0; }
.e13-skanner::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(31, 116, 184, 0), #1f74b8 10%, #cfdbe7 50%, #1f74b8 90%, rgba(31, 116, 184, 0)); box-shadow: 0 0 14px rgba(159, 180, 196, .55); }
.e13-skanner::after { content: ""; position: absolute; top: 4%; bottom: 4%; right: 0; width: 110px; background: linear-gradient(270deg, rgba(159, 180, 196, .14), rgba(159, 180, 196, 0)); }
.e13-spot { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; opacity: 0; }
.e13-spot i { position: absolute; left: -150vmax; top: -150vmax; width: 300vmax; height: 300vmax; border-radius: 50%; transform: scale(var(--ss, .3));
  background: radial-gradient(closest-side, rgba(4, 10, 24, 0) 5%, rgba(4, 10, 24, .3) 12%, rgba(4, 10, 24, .78) 21%, rgba(4, 10, 24, .96) 34%);
  box-shadow: 0 0 0 150vmax rgba(4, 10, 24, .96); }   /* skuggan: mörkret fortsätter utanför ringen, ingen kant när ringen är liten */
.e13-gloria { position: absolute; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; opacity: 0; }
.e13-gloria i { position: absolute; left: -50vmax; top: -50vmax; width: 100vmax; height: 100vmax; border-radius: 50%; transform: scale(var(--gs, .5));
  background: radial-gradient(closest-side, rgba(255, 215, 160, .3), rgba(242, 154, 60, .2) 30%, rgba(242, 154, 60, .07) 60%, rgba(242, 154, 60, 0)); animation: e13-andas 4s ease-in-out infinite; }
@keyframes e13-andas { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
/* värmen: eldstadens ljusa keramik tonas mot bärnsten (multiply, bara på bilderna) när kameran går in till lågan */
.e13-varme { position: absolute; left: -500px; top: -500px; width: 1000px; height: 1000px; pointer-events: none; opacity: 0; mix-blend-mode: multiply;
  background: radial-gradient(closest-side, #ff9f4a, rgba(255, 170, 90, .88) 42%, rgba(255, 196, 135, .45) 72%, rgba(255, 255, 255, 0)); }
.e13.vila .e13-gloria i { animation-play-state: paused; }

/* etiketterna: små pills med ledarlinje till det man ser */
.e13-linjer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.e13-linjer line { stroke: rgba(212, 226, 243, .55); stroke-width: 1; }
.e13-linjer circle { fill: var(--natt); stroke: var(--is); stroke-width: 1.25; }
.e13-linjer .e13-nr { fill: var(--is); font-size: 11px; font-weight: 500; paint-order: stroke; stroke: rgba(4, 10, 24, .85); stroke-width: 3px; stroke-linejoin: round; }
.e13-pill { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(14, 28, 56, .72); box-shadow: inset 0 0 0 1px var(--linje-2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: .8125rem; font-weight: 420; color: var(--is); opacity: 0; pointer-events: none; transition: box-shadow .3s ease; }
.e13-pill span { color: var(--is-3); font-weight: 360; font-variant-numeric: tabular-nums; }
.e13-pill .pil { width: 16px; height: 10px; color: var(--bla); }
.e13-pill.pa { pointer-events: auto; }
a.e13-pill:hover { box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .6); }
.e13-pill.varm { background: rgba(4, 10, 24, .7); box-shadow: inset 0 0 0 1px rgba(242, 154, 60, .45); }
.e13-pill.varm i { width: 7px; height: 7px; border-radius: 50%; background: var(--varm); box-shadow: 0 0 10px rgba(242, 154, 60, .8); }

/* texterna: rubriken i fotots himmel, avslutningen över lågans mörker */
.e13-intro { position: absolute; left: 0; right: 0; top: clamp(72px, 13vh, 150px); pointer-events: none; }
.e13-intro .bredd > div { max-width: 640px; }
.e13-intro .t-etikett { margin-bottom: 24px; color: var(--is-2); }
.e13-intro .t-ingress { margin-top: 22px; max-width: 34ch; color: var(--is); text-shadow: 0 1px 18px rgba(4, 10, 24, .6); }
.e13-slut { position: absolute; left: 50%; top: 50%; width: min(760px, calc(100% - 2 * var(--marg))); transform: translate(-50%, -50%); text-align: center; opacity: 0; pointer-events: none; }
.e13-slut.pa { pointer-events: auto; }
.e13-slut .t-ingress { margin: 22px auto 0; max-width: 40ch; }
.e13-slut .e13-vagar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px 28px; margin-top: 32px; }

/* mobil: etiketterna staplas nederst */
.e13-stapel { display: none; }

/* reducerad rörelse och skärmdump: fyra stillbilder i följd */
.e13-stilla { display: none; }
.e13.stilla .e13-spar { display: none; }
.e13.stilla .e13-stilla { display: block; padding-top: var(--sektion); padding-bottom: var(--sektion); }
.e13-stilla .e13-foljd { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(36px, 4vw, 64px); }
.e13-stilla .t-etikett { margin-bottom: 24px; }
.e13-stilla .t-ingress { margin-top: 22px; max-width: 40ch; }
.e13-stilla figure { margin: 0; }
.e13-stilla figure > p { margin-top: 12px; font-size: .75rem; font-weight: 600; font-stretch: 80%; letter-spacing: .16em; text-transform: uppercase; color: var(--is-3); }
.e13-stilla .ram-bild { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--natt-2); }
.e13-stilla .ram-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.e13-stilla .ram-bild.foto img { object-fit: cover; }
/* den uppskurna pannan i centralen: utsnittets tonade kanter beskärs bort */
.e13-stilla .ram-bild.panna img { object-fit: cover; object-position: 50% 52%; transform: scale(1.09); }
.e13-stilla figcaption { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; font-size: .9375rem; color: var(--is-2); }
.e13-stilla figcaption span { color: var(--is-3); }
.e13-stilla figcaption b { font-weight: 420; color: var(--is); }
.e13-stilla figcaption b.varm::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 0; border-radius: 50%; background: var(--varm); box-shadow: 0 0 10px rgba(242, 154, 60, .8); }
.e13-stilla .e13-vagar { display: flex; flex-wrap: wrap; gap: 18px 28px; margin-top: 30px; }

@media (max-width: 760px) {
  .e13-stilla .e13-foljd { grid-template-columns: 1fr; }
  .e13-intro { top: 56px; }
  .e13-intro .t-ingress { font-size: 1.0625rem; }
  .e13-skanner::after { width: 64px; }
  .e13-linjer line { display: none; }
  .e13-pill.lose { display: none; }
  .e13-stapel { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: absolute; left: var(--marg); right: var(--marg); bottom: 28px; }
  .e13-stapel .e13-pill { position: relative; left: auto; top: auto; height: 34px; font-size: .78rem; }
  .e13-stapel .e13-pill b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: .6875rem; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(238, 243, 250, .6); }
  .e13-stapel .e13-pill.varm b { color: var(--natt); background: var(--glod); box-shadow: 0 0 10px rgba(242, 154, 60, .6); }
  .e13-slut .t-h2 { font-size: 2.125rem; }
}