/* nov.css — slide styles new in the November deck. deck.css is the October file, unchanged. */

/* A heading that swaps in place between steps */
.swap { position: relative; height: 92px; }
.swap h2 { position: absolute; left: 0; top: 0; right: 0; white-space: nowrap; }

/* A label pasted onto a slide from last time */
.stamp {
  position: absolute; right: 120px; top: 70px; z-index: 3; padding: 16px 26px; border-radius: 4px;
  background: var(--yellow); color: #14161b; font: 600 34px/1 var(--sans);
  transform: rotate(-1.6deg); box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.slide.active .stamp { animation: stick .45s var(--ease) .35s both; }
@keyframes stick {
  from { opacity: 0; transform: rotate(-1.6deg) scale(1.25); }
  to { opacity: 1; transform: rotate(-1.6deg) scale(1); }
}

/* October's slide replayed: filtered like an archive picture, the click lifts one card out of it */
.replay .kicker, .replay .card {
  filter: grayscale(1) brightness(.6);
  transition: filter .7s var(--ease), transform .7s var(--ease), border-color .7s var(--ease), box-shadow .7s var(--ease);
}
.replay[data-step="1"] .kicker, .replay[data-step="1"] .card:not(.hit) { filter: grayscale(1) brightness(.32); }
.replay[data-step="1"] .hit { filter: none; position: relative; z-index: 2; border-color: var(--yellow); transform: scale(1.04); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.replay .hl { transition: color .7s var(--ease); }
.replay[data-step="1"] .hl { color: var(--yellow); }

/* ---------- montage ---------- */
#montage { padding-top: 64px; }
#montage h2 { font-size: 60px; }
.clips { position: absolute; left: 110px; right: 110px; top: 212px; bottom: 44px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); gap: 24px 26px; }
.clip {
  background: #f3eee2; color: #1a1a1a; border-radius: 4px; padding: 22px 26px;
  transform: rotate(var(--r, 0deg)); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 10px 12px; overflow: hidden;
}
.clip:not(.shown) { transform: translateY(26px) rotate(var(--r, 0deg)); }
.clip b { font: 700 24px/1.1 var(--sans); letter-spacing: .01em; color: #7c2d12; }
.clip time { font: 500 22px/1.1 var(--sans); color: #6d6a62; }
.clip p { grid-column: 1 / -1; font: 500 33px/1.2 var(--serif); color: #1a1a1a; text-wrap: pretty; }

/* ---------- Tuesday slot ---------- */
.newsrows { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 70px; }
.newsrows .card { display: flex; flex-direction: column; gap: 18px; min-height: 420px; }
.newsrows time { font: 600 26px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.newsrows h3 { font: 400 56px/1.15 var(--serif); }

/* ---------- last time ---------- */
.said { font: italic 400 72px/1.2 var(--serif); color: var(--ink); max-width: 1560px; }
.saidby { margin-top: 26px; font: 400 32px/1.3 var(--sans); color: var(--muted); }
.tl { position: absolute; left: 140px; right: 140px; top: 540px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.tl::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--line); }
.ev { position: relative; padding-top: 48px; }
.ev::before { content: ''; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); }
.ev.now::before { background: var(--blue); }
.ev time { font: 600 26px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.ev.now time { color: var(--blue); }
.ev h3 { font: 400 54px/1.1 var(--serif); margin-top: 14px; }
.ev p { font-size: 32px; margin-top: 12px; }

/* ---------- METR reprise ---------- */
.verdict { position: absolute; left: 0; right: 0; top: 440px; text-align: center; font: 400 176px/1 var(--serif); color: var(--yellow); }

/* ---------- AECI ---------- */
.side2 { position: absolute; left: 1290px; right: 110px; top: 270px; display: flex; flex-direction: column; gap: 34px; }
.side2 .stat .n { font-size: 92px; }
.side2 .stat .l { font-size: 31px; }
.side2 .note { font: 400 36px/1.28 var(--serif); color: var(--ink); }
.side2 .big { font-size: 50px; margin-top: 20px; }
#aeci .source, #cyber .source, #skala .source, #prognos .source { font-size: 21px; }

/* ---------- gap ---------- */
.side3 { position: absolute; left: 1110px; right: 110px; top: 310px; display: flex; flex-direction: column; gap: 56px; }
.side3 .stat .n { font-size: 84px; line-height: 1.08; white-space: nowrap; }
.side3 .stat .l { font-size: 34px; }
.side3 .big { font-size: 50px; }

/* ---------- the prospectus ---------- */
.paper { position: absolute; display: block; background: #fff; border-radius: 3px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.cover { left: 300px; top: 262px; width: 1320px; transform: rotate(-.7deg); }
.passage { left: 140px; top: 356px; width: 1640px; }
.papernote { position: absolute; left: 140px; right: 140px; top: 700px; text-align: center; font: 400 52px/1.25 var(--serif); color: var(--ink); }
.sv { position: absolute; left: 140px; right: 140px; top: 772px; font: italic 400 46px/1.28 var(--serif); color: var(--ink); text-wrap: pretty; }

/* ---------- listening in ---------- */
.tap { position: absolute; left: 140px; right: 140px; top: 268px; bottom: 112px; overflow: hidden; background: #090b0f; border: 1px solid var(--line); border-radius: 14px; }
.tap-h { position: absolute; left: 0; right: 0; top: 0; z-index: 2; height: 74px; padding: 0 34px; display: flex; align-items: center; gap: 16px; background: #0e1116; border-bottom: 1px solid var(--line); font: 600 26px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.tap-h i { width: 16px; height: 16px; border-radius: 50%; background: #e5484d; animation: rec 1.4s ease-in-out infinite; }
.tap-h span { margin-left: auto; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--muted); }
@keyframes rec { 50% { opacity: .25; } }
.stream { position: absolute; left: 44px; right: 44px; top: 74px; bottom: 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.rows { animation: stream 30s linear infinite; transition: opacity .6s var(--ease); }
.rows div { display: flex; gap: 14px; margin-bottom: 22px; }
.rows span { height: 22px; border-radius: 3px; background: #2a303a; }
#avlyss:not(.active) .rows { animation-play-state: paused; }
#avlyss[data-step="1"] .rows { animation-play-state: paused; opacity: .16; }
@keyframes stream { to { transform: translateY(-50%); } }
.caught { position: absolute; left: 0; right: 0; top: 74px; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; text-align: center; background: radial-gradient(60% 55% at 50% 50%, rgba(9, 11, 15, .95) 40%, rgba(9, 11, 15, 0) 100%); }
.caught p { font: 400 58px/1.25 ui-monospace, "SF Mono", Menlo, monospace; color: var(--yellow); }
.caught small { font: italic 400 38px/1.2 var(--serif); color: var(--ink2); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
.two.plain .card { display: flex; flex-direction: column; gap: 24px; min-height: 420px; }
.two.plain h3 { font: 400 56px/1.1 var(--serif); }
.two.plain p { font-size: 36px; }

/* ---------- three traits ---------- */
.agi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 60px; }
.agi .card { display: flex; flex-direction: column; gap: 8px; height: 590px; padding: 34px 40px; transition: border-color .7s var(--ease); }
#agi[data-step="4"] .card { border-color: var(--yellow); }
#agi:not(.active) * { animation-play-state: paused !important; }
.agi h3 { font: 400 62px/1.1 var(--serif); color: var(--blue); }
.agi p { font-size: 33px; }
.ex { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ex svg#loom, .ex svg#phone, .illus { width: 100%; height: 230px; }
.ex b { font: 400 42px/1.2 var(--serif); color: var(--ink); margin-top: 8px; }
.lim { position: relative; align-self: flex-start; font: 400 33px/1.3 var(--sans); color: var(--ink2); transition: color .6s var(--ease); }
.lim::after { content: ''; position: absolute; left: -4px; right: -4px; top: 54%; height: 4px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .15s; }
#agi[data-step="4"] .lim { color: var(--muted); }
#agi[data-step="4"] .lim::after { transform: scaleX(1); }

/* Each example plays once, on its own click. Loom: 10 rows already woven, then 4 passes, one row per pass. */
.loom-cover { fill: var(--bg2); transform-box: fill-box; transform-origin: top; }
#agi:not([data-step="0"]) .loom-cover { animation: loomcover 1.6s steps(4, end) .4s both; }
#agi:not([data-step="0"]) .loom-rise { animation: loomrise 1.6s steps(4, end) .4s both; }
#agi:not([data-step="0"]) .loom-shuttle { animation: shuttle .4s ease-in-out .4s 4 alternate both; }
@keyframes loomcover { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes loomrise { from { transform: translateY(0); } to { transform: translateY(-36px); } }
@keyframes shuttle { from { transform: translateX(0); } to { transform: translateX(340px); } }

.app { opacity: 0; transform-box: fill-box; transform-origin: center; }
#agi:is([data-step="2"], [data-step="3"], [data-step="4"]) .app { animation: appin .35s cubic-bezier(.2, .7, .3, 1.4) both; }
@keyframes appin { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

.illus { display: grid; place-items: center; }
.search { width: 100%; height: 84px; padding: 0 26px; display: flex; align-items: center; gap: 14px; border: 2px solid #4a5160; border-radius: 42px; font: 400 31px/1 var(--sans); color: var(--ink); }
.search svg { width: 32px; height: 32px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; }
.typed { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; }
#agi:is([data-step="3"], [data-step="4"]) .typed { animation: type 1.8s steps(var(--n, 22), end) .6s forwards; }
#agi[data-step="4"] .caret { animation: none; opacity: 0; }
.caret { width: 3px; height: 38px; margin-left: -10px; background: var(--ink); animation: caret 1.1s linear infinite; }
@keyframes type { to { max-width: var(--w, 330px); } }
@keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- RSI ---------- */
.why { position: absolute; left: 860px; right: 110px; top: 280px; display: flex; flex-direction: column; gap: 30px; }
.why h3 { font: 400 48px/1.15 var(--serif); }
.why p { font-size: 31px; margin-top: 6px; }
.flag { border-left: 6px solid var(--yellow); padding: 6px 0 6px 28px; font: 400 37px/1.3 var(--serif); color: var(--ink); }
.flag em { color: var(--yellow); font-style: normal; }

/* ---------- cyber ---------- */
.facts { position: absolute; left: 1170px; right: 110px; top: 280px; display: flex; flex-direction: column; gap: 28px; }
.facts time { font: 600 24px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--orange); }
.facts p { font-size: 31px; margin-top: 8px; }
.facts .flag { font-size: 33px; }

/* ---------- cost ---------- */
.strip { position: absolute; left: 140px; right: 140px; bottom: 122px; font: 400 44px/1.3 var(--serif); color: var(--ink2); }
.strip b { color: var(--ink); font-weight: 400; }

/* ---------- predictions ---------- */
.bets { list-style: none; margin-top: 52px; display: flex; flex-direction: column; gap: 30px; max-width: 1640px; }
.bets li { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: baseline; font: 400 41px/1.26 var(--sans); color: var(--ink); }
.bets time { font: 600 25px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }

/* ---------- takeaways ---------- */
.three-takes { list-style: none; margin-top: 70px; display: flex; flex-direction: column; gap: 56px; max-width: 1560px; }
.three-takes li { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
.three-takes span { font: 400 92px/1 var(--serif); color: var(--blue); }
.three-takes p { font: 400 68px/1.2 var(--serif); color: var(--ink); }
.three-takes .q span { color: var(--yellow); }
.three-takes em { color: var(--yellow); font-style: italic; }

/* ---------- backup ---------- */
.three-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; margin-top: 90px; }
.three-stats .n { font-size: 96px; white-space: nowrap; }
.three-stats .l { font-size: 34px; }
.ftimg { position: absolute; left: 140px; top: 290px; width: 930px; height: 660px; }
.jobs { position: absolute; left: 1120px; right: 110px; top: 300px; list-style: none; display: flex; flex-direction: column; gap: 30px; }
.jobs li { font-size: 33px; }

/* ---- Bågen: demo, svar som fungerat, vad ni kan göra ---- */
.lead { margin-top: 30px; font: 400 40px/1.3 var(--sans); color: var(--ink2); max-width: 1600px; }
#demo .code { position: relative; margin-top: 70px; max-width: 1640px; background: var(--bg2); border: 2px solid var(--line); border-radius: 18px; cursor: copy; transition: border-color .3s, background .3s; }
#demo .code:hover { border-color: #4a5160; }
#demo .code.copied { animation: copied 1.2s ease-out; }
#demo .code.failed { animation: failed 1.2s ease-out; }
@keyframes copied { 0%, 40% { border-color: var(--teal); background: #16302b; } 100% { border-color: var(--line); background: var(--bg2); } }
@keyframes failed { 0%, 40% { border-color: var(--orange); } 100% { border-color: var(--line); } }
#demo pre { margin: 0; padding: 46px 52px 52px; white-space: pre-wrap; font: 400 40px/1.5 ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); }
#demo .copy { position: absolute; right: 24px; bottom: 24px; font: 600 26px/1 var(--sans); color: var(--ink); background: var(--bg3); border: 2px solid var(--line); border-radius: 12px; padding: 16px 28px; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
#demo .copy:hover { border-color: var(--blue); }
#demo .copy.ok { color: var(--bg); background: var(--teal); border-color: var(--teal); }
/* The recorded demo fills the slide (the recording has its own margins). */
.fullvideo { position: absolute; inset: 0; background: var(--bg); }
.fullvideo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#prognos .bets { gap: 24px; }
#prognos .bets li { font-size: 38px; }
#prognos .bets .hope { color: var(--blue); }
#prognos .bets .hope time { color: var(--blue); }
.prec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
.prec .card { display: flex; flex-direction: column; gap: 18px; min-height: 420px; }
.prec time { font: 600 26px/1 var(--sans); letter-spacing: .08em; color: var(--yellow); }
.prec h3 { font: 400 56px/1.1 var(--serif); }
.prec p { font: 400 34px/1.3 var(--sans); color: var(--ink2); }
.punch { margin-top: 50px; font: italic 400 64px/1.2 var(--serif); color: var(--yellow); }
.acts { list-style: none; margin-top: 64px; display: flex; flex-direction: column; gap: 46px; max-width: 1640px; }
.acts li { display: grid; grid-template-columns: 500px 1fr; gap: 30px; align-items: baseline; }
.acts b { font: 400 60px/1.1 var(--serif); color: var(--yellow); white-space: nowrap; }
.acts p { font: 400 40px/1.3 var(--sans); color: var(--ink); }
.thanks p.book { margin-top: 30px; font: 400 36px/1.5 var(--sans); font-style: normal; color: var(--ink2); }
.thanks p.book b { font-weight: 600; color: var(--ink); }
.thanks p.book.tip { margin-top: 0; font-size: 30px; color: var(--muted); }

/* SV/EN toggle on the title slide */
.langtoggle { position: absolute; top: 96px; right: 110px; display: inline-flex; gap: 4px; padding: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; }
.langtoggle > * { font: 700 22px/1 var(--sans); letter-spacing: .14em; padding: 14px 26px 14px 29px; border-radius: 999px; color: var(--muted); text-decoration: none; }
.langtoggle .on { background: var(--blue); color: var(--bg); }
.langtoggle a:hover { color: var(--ink); }

/* The one concrete step on the proposals slide */
#gora .acts { gap: 30px; margin-top: 46px; }
#gora .acts li { grid-template-columns: 600px 1fr; }
#gora .now { margin-top: 44px; max-width: 1640px; padding-left: 28px; border-left: 6px solid var(--yellow); font: 400 38px/1.35 var(--sans); color: var(--ink); }
#gora .now b { color: var(--yellow); font-weight: 600; }

/* Också i nyheterna: Nvidia och Anthropics börsprospekt, två bilder */
#andra .duo { position: absolute; left: 140px; right: 140px; top: 190px; bottom: 120px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
#andra .duo figure { margin: 0; }
#andra .duo .frame img { height: auto; }
#andra .duo .frame.pad { padding: 34px 30px; }
#andra .duo figcaption { margin-top: 18px; font: 400 26px/1.2 var(--sans); color: var(--muted); }

/* Förra gången: rubriker i stället för text på tidslinjen */
#forra .tl { top: 380px; grid-template-columns: 1fr 250px 1fr 1fr; gap: 40px; }
#forra .ev .frame { margin-top: 26px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.4); }
#forra .ev .frame img { height: auto; }
#forra .ev small { display: block; margin-top: 16px; font: 400 26px/1.2 var(--sans); color: var(--muted); }
#forra .ev.now h3 { font-size: 42px; white-space: nowrap; }

/* ---------- light cream theme ---------- */
:root[data-tema="ljus"] .stamp { color: #fffaf0; box-shadow: 0 8px 20px rgba(70, 52, 24, .22); }
:root[data-tema="ljus"] .replay .kicker, :root[data-tema="ljus"] .replay .card { filter: grayscale(1) opacity(.6); }
:root[data-tema="ljus"] .replay[data-step="1"] .kicker, :root[data-tema="ljus"] .replay[data-step="1"] .card:not(.hit) { filter: grayscale(1) opacity(.3); }
:root[data-tema="ljus"] .replay[data-step="1"] .hit { filter: none; box-shadow: 0 24px 60px rgba(70, 52, 24, .25); }
:root[data-tema="ljus"] .clip { background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(70, 52, 24, .14); }
:root[data-tema="ljus"] .paper { box-shadow: 0 22px 56px rgba(70, 52, 24, .2); }
:root[data-tema="ljus"] .search { border-color: #c4b8a2; }
:root[data-tema="ljus"] #forra .ev .frame { box-shadow: 0 16px 40px rgba(70, 52, 24, .16); }

/* Anthropic's R&D chart: only the chart */
#rnd .rsichart { top: 190px; justify-content: center; }
#rnd .rsichart .frame { width: 1218px; height: 780px; }

/* Vad kan vi göra: the last click lays the Call over the list, so one thing is in focus */
#gora .callcard { z-index: 5; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#gora .callbox { width: 1180px; display: grid; gap: 40px; }
#gora .callbox .frame { width: 1180px; height: 620px; }
#gora .callbox .frame img { object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
#gora .callbox .now { margin: 0; max-width: none; }
#gora .source { z-index: 6; }