/* Presenter · webbsidan. Berättelsen: Du, AI, du, En tanke per klick, Formerna (ordfältet) och Tangenterna. */

/* ---------- 01 · Du, AI, du: grundprincipen ----------
   Rubrikens ord och spalten under varje ord framhävs i tur och ordning medan du rullar (--ps-p): du, AI,
   du, och sist alla tre. Det som har varit dämpas, som i en föreläsning. På datorn står avsnittet stilla
   medan det pågår, och Enter stannar i varje läge (sida.js); på mobilen följer det med rullningen. */
.pres-sida .princip { height: calc(100vh + 4 * 45vh); }
.pres-sida .princip-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 600px;
  padding: calc(var(--head) + clamp(18px, 3.4vh, 40px)) var(--gut) clamp(28px, 6vh, 72px);
  display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 32px);
  overflow: clip;
}
.pres-sida .duaidu {
  display: flex; align-items: center; gap: 0.08em;
  margin-top: auto;
  font-size: clamp(72px, min(15vw, 26vh), 300px);
  line-height: 0.8;
  --smal: 0.3;
}
/* --c är ledets plats i förloppet. --f är 1 när ledet är i tur, och för alla tre i slutet (--slut).
   Det sista ”du” står kvar när det väl har kommit. */
.pres-sida .dad, .pres-sida .led {
  --d: max(var(--ps-p) - var(--c), var(--c) - var(--ps-p));
  --slut: clamp(0, (var(--ps-p) - 0.74) / 0.12, 1);
  --f: max(clamp(0, 1 - max(var(--d) - 0.07, 0) / 0.09, 1), var(--slut));
}
.pres-sida .dad-1, .pres-sida .led-1 { --c: 0.08; }
.pres-sida .dad-2, .pres-sida .led-2 { --c: 0.35; }
.pres-sida .dad-3, .pres-sida .led-3 { --c: 0.62; --d: max(var(--c) - var(--ps-p), 0); }
.pres-sida .dad {
  /* Sist står alla tre fullt, men smalare (--fw, --smal), så att raden ryms. */
  --fw: calc(var(--f) * (1 - var(--smal) * var(--slut)));
  font-variation-settings: "wdth" calc(var(--dad-min, 50) + (var(--wd-max) + 30 - var(--dad-min, 50)) * var(--fw)), "wght" calc(300 + (var(--wg-max) - 300) * var(--f)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  opacity: calc(0.42 + 0.58 * var(--f));
}
.pres-sida .dad-2 { color: var(--acc); }
/* Pilarna ritas mellan leden; spetsen kommer när linjen är framme. */
.pres-sida .dad-pil {
  flex: 1; min-width: 0.4em; height: 0.06em; position: relative;
  background: currentColor; transform-origin: left;
  --rit: clamp(0, (var(--ps-p) - 0.15) / 0.12, 1);
  transform: scaleX(var(--rit));
}
.pres-sida .dad-pil-2 { --rit: clamp(0, (var(--ps-p) - 0.42) / 0.12, 1); }
.pres-sida .dad-pil::after {
  content: ""; position: absolute; right: -0.02em; top: 50%; width: 0.22em; height: 0.22em;
  border-top: 0.06em solid currentColor; border-right: 0.06em solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  opacity: clamp(0, (var(--rit) - 0.9) * 10, 1);
}
.pres-sida .princip-lead { max-width: 34em; font-size: clamp(19px, 0.7vw + 12px, 28px); line-height: 1.36; }
/* Spalterna står under sina ord. Linjen överst fylls när ledet är i tur. */
.pres-sida .princip-led { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-bottom: auto; }
.pres-sida .led {
  position: relative; padding-top: 16px;
  border-top: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  opacity: calc(0.34 + 0.66 * var(--f));
}
.pres-sida .led::before {
  content: ""; position: absolute; left: 0; top: -3px; width: 100%; height: 4px;
  background: currentColor; transform-origin: left; transform: scaleX(var(--f));
}
.pres-sida .led-2::before { background: var(--acc); }
.pres-sida .led-vem { display: block; margin-bottom: 10px; opacity: 0.8; }
/* Spaltrubrikerna har fast bredd och vikt: radbrytningen ändras aldrig mellan lägena, så inget hoppar. */
.pres-sida .led h3 {
  font-family: var(--display); font-size: clamp(24px, 2.2vw, 42px); line-height: 1; margin-bottom: 10px;
  text-transform: var(--case); letter-spacing: var(--track);
  font-variation-settings: "wdth" 104, "wght" 760, "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}
.pres-sida .led p { max-width: 24em; }

/* ---------- 02 · En tanke per klick: rullsteg som clickertryck ---------- */
.pres-sida .klick { height: calc(100vh + 7 * 58vh); }
.pres-sida .klick-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 560px;
  padding: calc(var(--head) + clamp(18px, 3.4vh, 40px)) var(--gut) clamp(18px, 3vh, 32px);
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  overflow: clip;
}
.pres-sida .klick-rad { grid-row: 1; grid-column: 1; display: flex; justify-content: space-between; gap: 24px; }
.pres-sida .klick-hoger { display: flex; align-items: center; gap: 18px; }
.pres-sida .klick-rakn b { color: var(--acc); font-weight: 600; display: inline-block; min-width: 2ch; }
.pres-sida .klick-rakn b.tick { animation: ps-tick .45s var(--ease); }
@keyframes ps-tick { from { transform: translateY(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
.pres-sida .klick-streck { display: flex; gap: 5px; }
.pres-sida .klick-streck i { display: block; width: clamp(18px, 2.4vw, 34px); height: 4px; background: currentColor; opacity: 0.22; transition: opacity .3s, background-color .3s; }
.pres-sida .klick-streck i.on { opacity: 1; background: var(--acc); }

.pres-sida .klick-rubrik {
  grid-row: 2; grid-column: 1; align-self: center;
  font-size: clamp(64px, 11.5vw, 230px);
  line-height: 0.8;
  transition: transform .9s var(--ease), opacity .6s var(--ease);
}
.pres-sida .klick-rubrik em { display: block; color: var(--acc); }
.pres-sida .klick-rubrik .l {
  --ps-in: 0;
  font-variation-settings: "wdth" calc(50 + (var(--wd-max) - 50) * var(--ps-in)), "wght" calc(250 + (var(--wg-max) - 250) * var(--ps-in)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  transition: --ps-in 1s var(--ease);
  transition-delay: calc(var(--i) * 45ms);
}
.pres-sida .klick-pin.syns .klick-rubrik .l { --ps-in: 1; }
.pres-sida .klick-pin:not([data-step="0"]) .klick-rubrik { transform: translateY(-34%) scale(0.92); opacity: 0; }

.pres-sida .klick-tankar {
  grid-row: 2; grid-column: 1; align-self: center;
  display: grid; gap: 0.12em;
  font-family: var(--display);
  font-size: clamp(30px, 4.5vw, 86px);
  line-height: 1;
  letter-spacing: var(--track);
  max-width: 17em;
}
.pres-sida .klick-tankar li { opacity: 0; transform: translateY(0.4em); transition: opacity .55s var(--ease), transform .75s var(--ease); }
.pres-sida .klick-tankar li.on { opacity: 1; transform: none; }
.pres-sida .klick-tankar li.forr { opacity: 0.24; }
.pres-sida .klick-tankar li .l {
  font-variation-settings: "wdth" var(--ps-lw), "wght" var(--ps-lg), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  transition: --ps-lw .8s var(--ease), --ps-lg .8s var(--ease);
  transition-delay: calc(var(--i) * 12ms);
}
.pres-sida .klick-tankar li.on .l { --ps-lw: var(--wd-max); --ps-lg: var(--wg-max); }
.pres-sida .klick-tankar li.forr .l { --ps-lw: 86; --ps-lg: 480; transition-delay: 0ms; }
.pres-sida .klick-tankar em { color: var(--acc); font-size: calc(var(--acc-size) * 1em); }
.pres-sida .klick-tankar li.forr em { color: inherit; }

.pres-sida .klick-fot { grid-row: 3; grid-column: 1; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.pres-sida .klick-pil { display: inline-block; animation: ps-knuff 1.6s var(--ease) infinite; }
@keyframes ps-knuff { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(5px); } }

/* ---------- 03 · Formerna: ordfältet ---------- */
.pres-sida .former { height: 240vh; }
.pres-sida .former-pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh; min-height: 560px;
  padding: calc(var(--head) + clamp(18px, 3.4vh, 40px)) var(--gut) clamp(70px, 12vh, 130px);
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
  overflow: clip;
}
.pres-sida .ordfalt {
  align-self: center;
  font-size: clamp(38px, 6.1vw, 126px);
  line-height: 0.98;
  text-transform: none;
  letter-spacing: -0.02em;
  max-width: 14.5em;
}
.pres-sida[data-theme="tryck"] .ordfalt { text-transform: uppercase; font-size: clamp(30px, 4.6vw, 92px); }
.pres-sida .ordfalt em { color: var(--acc); }
.pres-sida .ordfalt .w {
  --q: clamp(0, (var(--ps-p) * 1.75 - var(--d, 0)) / 0.85, 1);
  transform:
    translate(calc(var(--x, 0px) * (1 - var(--q))), calc(var(--y, 0px) * (1 - var(--q))))
    rotate(calc(var(--r, 0deg) * (1 - var(--q))))
    scale(calc(var(--s0, 1) + (1 - var(--s0, 1)) * var(--q)));
  transform-origin: 0 50%;
  font-variation-settings:
    "wdth" calc(var(--w0, 100) + (var(--wd-max) - var(--w0, 100)) * var(--q)),
    "wght" calc(var(--g0, 800) + (var(--wg-max) - var(--g0, 800)) * var(--q)),
    "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  white-space: nowrap;
}
.pres-sida .former-lead {
  max-width: 34em;
  font-size: clamp(18px, 0.6vw + 12px, 26px);
  line-height: 1.38;
  opacity: clamp(0, (var(--ps-p) - 0.72) * 6, 1);
  transform: translateY(calc((1 - clamp(0, (var(--ps-p) - 0.72) * 6, 1)) * 24px));
}

/* ---------- 04 · Tangenterna ---------- */
.pres-sida .tangenter { padding: calc(var(--head) + 8vh) var(--gut) 12vh; }
.pres-sida .tangenter-rubrik { font-size: clamp(56px, 9.2vw, 190px); margin: 14px 0 clamp(28px, 5vh, 60px); }
.pres-sida .tangenter-rubrik em { display: block; color: var(--acc); padding-top: 0.06em; }
.pres-sida .tangenter-yta {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 80px); align-items: start;
}
.pres-sida .tangenter-lead { font-size: clamp(18px, 0.6vw + 12px, 25px); line-height: 1.38; max-width: 22em; margin-bottom: clamp(26px, 4.5vh, 48px); }
/* Rullningen trycker tangenterna. Tangentbordet och visningen står kvar under sträckan (.tangenter-spar),
   och tangenter.js väljer R, I, N, M och T i tur medan den rullas: en femtedel var. */
.pres-sida .tangenter-yta { position: sticky; top: calc(var(--head) + clamp(16px, 3vh, 34px)); }
.pres-sida .tangenter-vanster { align-self: center; }
.pres-sida .tangenter-spar { height: 200vh; }

/* Tangentbordet: sex tangenter som ritas som tangenter, med ovansida och sida. */
.pres-sida .tangentbord {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px) clamp(12px, 1.4vw, 22px);
  max-width: 540px;
}
.pres-sida .tk {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  display: grid; gap: 14px; justify-items: stretch; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pres-sida .tk:focus-visible { outline-offset: 6px; }
.pres-sida .kap { --djup: clamp(6px, 0.7vw, 10px); position: relative; display: block; aspect-ratio: 1; margin-bottom: var(--djup); }
.pres-sida .kap:not(.kap-enter)::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--djup); bottom: calc(-1 * var(--djup));
  background: currentColor;
}
.pres-sida .kap-topp {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--bg); color: var(--fg);
  border: 2px solid currentColor;
  transition: transform .12s ease-out, background-color .3s var(--ease), color .3s var(--ease);
}
.pres-sida .kap-tecken {
  position: relative;
  font-family: var(--display); font-size: clamp(40px, 4.6vw, 88px); line-height: 1;
  text-transform: uppercase;
  font-variation-settings: "wdth" calc(72 + (var(--wd-max) + 20 - 72) * var(--ps-kv)), "wght" calc(720 + 180 * var(--ps-kv)), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
  transition: --ps-kv .5s var(--ease);
}
.pres-sida .tk:hover .kap-tecken, .pres-sida .tk:focus-visible .kap-tecken, .pres-sida .tk[aria-pressed="true"] .kap-tecken { --ps-kv: 1; }
.pres-sida .tk.ned .kap-topp, .pres-sida .tk:active .kap-topp { transform: translateY(var(--djup)); transition-duration: .06s; }
.pres-sida .tk[aria-pressed="true"] .kap-topp { transform: translateY(var(--djup)); background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pres-sida .tk-etikett { opacity: 0.85; }
.pres-sida .tk[aria-pressed="true"] .tk-etikett { opacity: 1; }

/* Enter-tangenten: samma ISO-form som i ordmärket. */
.pres-sida .kap-enter .kap-sida { position: absolute; left: 0; top: var(--djup); width: 100%; height: 100%; overflow: visible; }
.pres-sida .kap-enter .kap-sida path { fill: currentColor; }
.pres-sida .kap-enter .kap-topp { border: 0; background: none; place-items: start end; padding: 14% 16%; }
.pres-sida .kap-enter .kap-yta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pres-sida .kap-enter .kap-yta path { fill: var(--bg); stroke: currentColor; stroke-width: 2px; transition: fill .3s var(--ease); }
.pres-sida .kap-enter .kap-tecken { font-family: var(--mono); font-size: clamp(30px, 3vw, 52px); font-variation-settings: "wght" 600; }
.pres-sida .tk-enter:hover .kap-yta path, .pres-sida .tk-enter:focus-visible .kap-yta path { fill: var(--acc); }

/* Visningen: skärmbilden ur appen och en eller två rader. */
.pres-sida .tangentvisning { display: grid; }
.pres-sida .tv { grid-area: 1 / 1; visibility: hidden; position: relative; }
.pres-sida .tv.aktiv { visibility: visible; z-index: 2; }
.pres-sida .tv.forra { visibility: visible; z-index: 1; }
.pres-sida .tv-bild {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0d0d10;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .65s var(--ease-snap);
}
.pres-sida .tv.aktiv .tv-bild, .pres-sida .tv.forra .tv-bild { clip-path: inset(0 0 0 0); }
.pres-sida .tv-bild img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.pres-sida .tv-teman img { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .65s var(--ease-snap); }
.pres-sida .tv-teman img.nu, .pres-sida .tv-teman img.var { clip-path: inset(0 0 0 0); }
.pres-sida .tv-teman img.nu { z-index: 2; }
.pres-sida .tv figcaption { display: grid; gap: 8px; margin-top: 18px; background: var(--bg); }
.pres-sida .tv-tangent { color: var(--fg); opacity: 0.85; }
.pres-sida .tv-rubrik {
  font-family: var(--display); font-size: clamp(26px, 2.5vw, 46px); line-height: 1;
  text-transform: var(--case); letter-spacing: var(--track);
  font-variation-settings: "wdth" var(--wd-max), "wght" var(--wg-max), "SOFT" var(--soft), "WONK" var(--wonk), "opsz" 144;
}
.pres-sida .tv-text { max-width: 32em; }
.pres-sida .tv.aktiv figcaption > * { animation: ps-tv-in .55s var(--ease) both; }
.pres-sida .tv.aktiv .tv-rubrik { animation-delay: .06s; }
.pres-sida .tv.aktiv .tv-text { animation-delay: .12s; }
@keyframes ps-tv-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* I en kolumn blir tangentbordet en rad, så att raden och visningen ryms i bilden medan de står kvar. */
@media (max-width: 900px) {
  .pres-sida .tangenter-yta { grid-template-columns: 1fr; gap: clamp(18px, 3vh, 28px); }
  .pres-sida .tangentbord { max-width: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px; }
  .pres-sida .kap { --djup: 5px; }
  .pres-sida .kap-tecken { font-size: clamp(22px, 7vw, 48px); }
  .pres-sida .kap-enter .kap-tecken { font-size: clamp(18px, 5vw, 36px); }
}
/* På telefonen står bara tangenterna; visningen säger vad de gör. Etiketten är knappens namn och finns kvar för skärmläsare. */
@media (max-width: 760px) {
  .pres-sida .tk-etikett {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; margin: -1px; padding: 0; border: 0;
  }
  .pres-sida .tk { gap: 0; }
}