/* Presenter · webbsidan. Visningen: Slides i rörelse (remsan), Så jobbar jag och Efter föreläsningen. */

/* Rubriker som sträcker ut sig bokstav för bokstav medan de rullar in (--ps-p ur motorer.css). */
.pres-sida .rorelse-rubrik .l, .pres-sida .jag-rubrik .l, .pres-sida .efter-rubrik .l, .pres-sida .tangenter-rubrik .l,
.pres-sida .ladan-rubrik .l, .pres-sida .fragor-rubrik .l, .pres-sida .start-rubrik .l {
  --st: clamp(0, var(--ps-p) * 1.6 - var(--i) * 0.08, 1);
  font-variation-settings: "wdth" calc(50 + (var(--wd-max) - 50) * var(--st)), "wght" calc(300 + (var(--wg-max) - 300) * var(--st)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}

/* ---------- 05 · Slides i rörelse: remsan ---------- */
.pres-sida .rorelse { height: calc(100vh + var(--shift, 280vw)); }
.pres-sida .rorelse-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 560px;
  padding: calc(var(--head) + clamp(16px, 3vh, 36px)) 0 clamp(14px, 2.6vh, 28px);
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  overflow: clip;
}
.pres-sida .rorelse-huvud { padding: 0 var(--gut); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 24px; }
.pres-sida .rorelse-huvud .etikett { grid-column: 1 / -1; }
.pres-sida .rorelse-rubrik { font-size: clamp(52px, 7.6vw, 150px); }
.pres-sida .rorelse-rubrik em { color: var(--acc); }
.pres-sida .rorelse-rakn { font-size: clamp(13px, 1vw, 16px); padding-bottom: 0.6em; }
.pres-sida .rorelse-rakn b { color: var(--acc); font-weight: 600; }
.pres-sida .remsa-ram { align-self: center; overflow: visible; }
.pres-sida .remsa {
  display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 56px);
  padding: 0 var(--gut);
  width: max-content;
  transform: translate3d(calc(var(--ps-p) * -1 * var(--shift, 0px)), 0, 0);
}
.pres-sida .klipp { --c: 0; width: var(--klipp-b, min(52vw, calc((100svh - 380px) * 16 / 9))); display: grid; gap: 14px; }
.pres-sida .klipp-bild { aspect-ratio: 16 / 9; background: #000; overflow: hidden; transform: scale(calc(0.86 + 0.14 * var(--c))); transform-origin: 50% 100%; position: relative; }
.pres-sida .klipp-bild video, .pres-sida .klipp-bild img { width: 100%; height: 100%; object-fit: cover; opacity: calc(0.45 + 0.55 * var(--c)); }
.pres-sida .klipp-text { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; row-gap: 2px; align-items: baseline; opacity: calc(0.4 + 0.6 * var(--c)); }
.pres-sida .klipp-nr {
  grid-row: 1 / span 3;
  font-family: var(--display);
  font-size: clamp(54px, 5.4vw, 108px); line-height: 0.8;
  font-variation-settings: "wdth" calc(50 + 80 * var(--c)), "wght" calc(300 + 560 * var(--c)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  color: var(--acc);
  min-width: 1.4em;
}
.pres-sida .klipp-text h3 {
  font-family: var(--display); font-size: clamp(20px, 1.7vw, 32px); line-height: 1.05;
  font-variation-settings: "wdth" 100, "wght" 760, "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  text-transform: var(--case); letter-spacing: var(--track);
}
.pres-sida .klipp-tema { font-size: clamp(19px, 1.5vw, 28px); line-height: 1.1; color: var(--acc); }
.pres-sida .klipp-text p:last-child { font-size: clamp(15px, 0.35vw + 11px, 18px); max-width: 30em; opacity: 0.86; }
.pres-sida .rorelse-fot { padding: 0 var(--gut); padding-right: max(var(--gut), 340px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
.pres-sida .rorelse-linje { height: 2px; background: color-mix(in srgb, currentColor 24%, transparent); position: relative; overflow: hidden; }
.pres-sida .rorelse-linje i { position: absolute; inset: 0; background: var(--acc); transform-origin: left; transform: scaleX(var(--ps-p)); }

/* ---------- 06 · Så jobbar jag ---------- */
.pres-sida .jag { padding: calc(var(--head) + 9vh) var(--gut) 12vh; }
.pres-sida .jag-huvud { display: grid; gap: clamp(18px, 3vh, 30px); margin-bottom: clamp(44px, 8vh, 100px); }
.pres-sida .jag-rubrik { font-size: clamp(52px, 8.6vw, 176px); }
.pres-sida .jag-rubrik em { display: block; color: var(--acc); padding-top: 0.06em; }
.pres-sida .jag-lead { max-width: 30em; font-size: clamp(19px, 0.7vw + 12px, 28px); line-height: 1.36; }

.pres-sida .steg {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(24px, 4vw, 80px); align-items: start;
  padding: clamp(36px, 7vh, 90px) 0;
  border-top: 2px solid currentColor;
}
.pres-sida .steg:last-child { border-bottom: 2px solid currentColor; }
.pres-sida .steg-text { position: sticky; top: calc(var(--head) + 4vh); display: grid; gap: 12px; align-content: start; }
.pres-sida .steg-nr {
  font-family: var(--display); color: var(--acc);
  font-size: clamp(80px, 10vw, 200px); line-height: 0.78;
  --st: clamp(0, var(--ps-p) * 2.4, 1);
  font-variation-settings: "wdth" calc(50 + (var(--wd-max) + 20 - 50) * var(--st)), "wght" calc(300 + 600 * var(--st)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  margin-bottom: 0.08em;
}
.pres-sida .steg-vem { opacity: 0.8; }
.pres-sida .steg h3 {
  font-family: var(--display); font-size: clamp(28px, 3vw, 58px); line-height: 0.95;
  text-transform: var(--case); letter-spacing: var(--track);
  font-variation-settings: "wdth" calc(var(--wd-max) - 12), "wght" var(--wg-max), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}
.pres-sida .steg-text p:last-child { max-width: 26em; }
.pres-sida .steg-bild figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; opacity: 0.85; }
.pres-sida .skarm img { aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }

/* Steg 1: samtalet. Ett utskrivet samtal, inte en chattapp: talaren i mono, repliken stort. */
.pres-sida .samtal { border-top: 2px solid currentColor; }
.pres-sida .samtal-rad { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 16px; padding: clamp(18px, 3.2vh, 34px) 0; border-bottom: 2px solid currentColor; align-items: baseline; }
.pres-sida .samtal-du p {
  font-family: var(--display); font-size: clamp(22px, 2vw, 38px); line-height: 1.12;
  font-variation-settings: "wdth" 96, "wght" 620, "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 60;
}
.pres-sida .samtal-ai { background: var(--acc); color: var(--bg); margin: 0 calc(-1 * clamp(10px, 1vw, 18px)); padding-left: clamp(10px, 1vw, 18px); padding-right: clamp(10px, 1vw, 18px); border-bottom: 0; }
.pres-sida .samtal-ai p {
  font-family: var(--accent); font-style: var(--acc-style); font-weight: var(--acc-wght);
  font-variation-settings: "wght" var(--acc-wght), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  font-size: calc(clamp(24px, 2.3vw, 44px) * var(--acc-size)); line-height: 1.08;
}
/* Svaret skrivs fram ord för ord medan steget rullar in. */
.pres-sida .samtal-ai .w { opacity: clamp(0.12, (var(--ps-p) * 1.7 - var(--d, 0)) * 7, 1); }
.pres-sida .samtal-not { margin-top: 12px; opacity: 0.6; }

/* Steg 4: samma slide i tre teman, som sveper in medan du rullar. */
.pres-sida .teman-svep { position: relative; }
.pres-sida .teman-svep img + img { position: absolute; left: 0; top: 0; width: 100%; }
.pres-sida .teman-svep img:nth-of-type(2) { clip-path: inset(0 calc(100% - 100% * clamp(0, (var(--ps-p) - 0.28) * 4, 1)) 0 0); }
.pres-sida .teman-svep img:nth-of-type(3) { clip-path: inset(0 calc(100% - 100% * clamp(0, (var(--ps-p) - 0.56) * 4, 1)) 0 0); }
.pres-sida .teman-namn { display: flex; gap: 1.2em; }
.pres-sida .teman-namn b { font-weight: 500; opacity: 0.4; }
.pres-sida .teman-namn b:nth-child(1) { opacity: calc(0.4 + 0.6 * clamp(0, 1 - (var(--ps-p) - 0.28) * 4, 1)); }
.pres-sida .teman-namn b:nth-child(2) { opacity: calc(0.4 + 0.6 * clamp(0, (var(--ps-p) - 0.28) * 4, 1) * clamp(0, 1 - (var(--ps-p) - 0.56) * 4, 1)); }
.pres-sida .teman-namn b:nth-child(3) { opacity: calc(0.4 + 0.6 * clamp(0, (var(--ps-p) - 0.56) * 4, 1)); }

/* Steg 5: granskningsvyn. Den långa bilden glider förbi i ett fönster medan du rullar. */
.pres-sida .granska-fonster { aspect-ratio: 16 / 10; overflow: hidden; background: #0d0d10; }
.pres-sida .granska-fonster img { width: 100%; height: auto; aspect-ratio: auto; transform: translateY(calc(var(--ps-p) * -1 * var(--pan, 45%))); }

/* ---------- 07 · Efter föreläsningen ---------- */
.pres-sida .efter { padding: calc(var(--head) + 9vh) var(--gut) 12vh; }
.pres-sida .efter-rubrik { font-size: clamp(52px, 8.6vw, 176px); margin: 14px 0 clamp(36px, 6vh, 72px); }
.pres-sida .efter-rubrik em { display: block; color: var(--acc); padding-top: 0.06em; }
.pres-sida .efter-yta { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3.2vw, 60px); align-items: start; }
.pres-sida .efter-sida { display: grid; gap: clamp(30px, 5vh, 60px); }
.pres-sida .efter-bild { aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.pres-sida .efter-bild img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pres-sida .efter-del { --ps-p: 1; }
.pres-sida .efter-del .efter-bild { clip-path: inset(calc((1 - clamp(0, var(--ps-p) * 2.2, 1)) * 100%) 0 0 0); }
.pres-sida .efter-del figcaption { display: grid; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 2px solid currentColor; }
.pres-sida .efter-nr { color: var(--acc); }
.pres-sida .efter-h3 {
  font-family: var(--display); font-size: clamp(24px, 2.3vw, 44px); line-height: 1;
  text-transform: var(--case); letter-spacing: var(--track);
  --st: clamp(0, var(--ps-p) * 2, 1);
  font-variation-settings: "wdth" calc(60 + (var(--wd-max) - 60) * var(--st)), "wght" var(--wg-max), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}
.pres-sida .efter-stor .efter-h3 { font-size: clamp(30px, 3.2vw, 60px); }
.pres-sida .efter-text { max-width: 30em; opacity: 0.9; }
.pres-sida .efter-lank { display: block; width: fit-content; margin-top: 0.7em; font-family: var(--mono); font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.pres-sida .efter-lank:hover, .pres-sida .efter-lank:focus-visible { color: var(--acc); }

/* Frågor från publiken: mobilen själv, med texten bredvid. */
.pres-sida .efter-mobil { display: grid; grid-template-columns: minmax(110px, 30%) minmax(0, 1fr); gap: clamp(16px, 1.6vw, 28px); align-items: end; }
.pres-sida .efter-mobil figcaption { margin-top: 0; }
.pres-sida .efter-telefon {
  aspect-ratio: 600 / 1298; overflow: hidden; background: #000;
  border: 2px solid color-mix(in srgb, currentColor 40%, transparent); border-radius: clamp(14px, 1.4vw, 22px);
  clip-path: inset(calc((1 - clamp(0, var(--ps-p) * 2.2, 1)) * 100%) 0 0 0 round clamp(14px, 1.4vw, 22px));
}
.pres-sida .efter-telefon img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .pres-sida .steg, .pres-sida .efter-yta { grid-template-columns: 1fr; }
  .pres-sida .steg-text { position: static; }
  .pres-sida .samtal-rad { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 760px) {
  /* Långa ord som FÖRELÄSNINGEN ryms i smal bredd: rubriken krymper med skärmen och blir smalare. */
  .pres-sida .efter-rubrik { font-size: clamp(34px, 10.4vw, 80px); --wd-max: 74; }
  .pres-sida .jag-rubrik, .pres-sida .tangenter-rubrik { font-size: clamp(40px, 12.4vw, 80px); }
  .pres-sida .klipp { --klipp-b: 84vw; }
  .pres-sida .rorelse-rubrik { font-size: clamp(46px, 13vw, 80px); }
  .pres-sida .klipp-nr { font-size: 56px; }
  .pres-sida .rorelse-fot { padding-right: max(var(--gut), 112px); }
}