/*
 * Slidestory studio layer. Loaded after styles.css: the living background, the hero picture, the visual entrance motion,
 * the running panel and the deck overview. Cards, options, the gallery and the landing bands have their own files.
 */

/* ---------- living background ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; width: 54vmax; height: 54vmax; border-radius: 50%; filter: blur(72px); animation: drift 28s ease-in-out infinite alternate; will-change: transform; }
.aurora i:nth-child(1) { left: -14vmax; top: -20vmax; background: radial-gradient(circle at 35% 35%, #7d92ff, transparent 62%); opacity: .34; }
.aurora i:nth-child(2) { right: -18vmax; top: 6vmax; background: radial-gradient(circle, #ffd84a, transparent 60%); opacity: .26; animation-duration: 34s; animation-delay: -9s; }
.aurora i:nth-child(3) { left: 18vmax; top: 46vmax; background: radial-gradient(circle, #a58bf2, transparent 60%); opacity: .2; animation-duration: 40s; animation-delay: -15s; }
@keyframes drift { to { transform: translate3d(9vmax, 7vmax, 0) scale(1.16); } }
@media (prefers-color-scheme: dark) { .aurora i:nth-child(1) { opacity: .2; } .aurora i:nth-child(2) { opacity: .1; } .aurora i:nth-child(3) { opacity: .16; } }
body::after { content: ""; position: fixed; left: 0; top: 0; width: 560px; height: 560px; z-index: -1; pointer-events: none; transform: translate(calc(var(--mx, -900px) - 280px), calc(var(--my, -900px) - 280px)); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }

/* ---------- hero ---------- */
.hero h1 .w { display: inline-block; animation: word .8s var(--ease) both; animation-delay: calc(var(--w) * 75ms + 120ms); }
.hero .lede { animation: rise .8s .55s var(--ease) both; }
.hero .art { animation: rise .8s .7s var(--ease) both; }
.ha { width: 100%; height: auto; overflow: visible; }
.ha .card { fill: var(--surface); stroke: var(--line-2); stroke-width: 1.5; }
.ha .card.pick { animation: haPick .5s 1.75s forwards; }
.ha .card.big { filter: drop-shadow(0 14px 22px rgba(14, 21, 48, .2)); }
@keyframes haPick { to { stroke: var(--accent); stroke-width: 3.5; } }
.ha .ink { fill: var(--line-2); } .ha .ink-d { fill: var(--chart-2); } .ha .acc { fill: var(--accent); } .ha .mk { fill: var(--mark); }
.ha .ln { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.ha .p0 { stroke: var(--accent); } .ha .p1 { stroke: var(--chart-2); } .ha .p2 { stroke: var(--chart-3); } .ha .p3 { stroke: var(--line-2); }
.ha .mline { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.ha .chk { fill: var(--accent); } .ha .chkp { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ha-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: vzPop .6s var(--ease) var(--d, 0ms) both; }
.ha-draw { stroke-dasharray: 1; animation: haDraw .8s var(--ease) var(--d, 0ms) both; }
@keyframes haDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ha-grow { transform-box: fill-box; transform-origin: 0 50%; animation: vzGrow .6s var(--ease) var(--d, 0ms) both; }

/* ---------- visual cards: entrance motion (also used inside the downloadable SVG, where it has no effect) ---------- */
.vz { display: block; width: 100%; height: auto; }
.vz-grow { transform-box: fill-box; transform-origin: 0 50%; animation: vzGrow .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.vz-rise { transform-box: fill-box; transform-origin: 50% 100%; animation: vzRise .7s cubic-bezier(.2, .8, .2, 1) var(--d, 0ms) backwards; }
.vz-fade { animation: vzFade .6s ease var(--d, 0ms) backwards; }
.vz-pop { transform-box: fill-box; transform-origin: 50% 50%; animation: vzPop .5s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0ms) backwards; }
.vz-draw { stroke-dasharray: 1; animation: vzDraw 1s ease var(--d, 0ms) backwards; }
.vz-hl { transform-box: fill-box; transform-origin: 0 50%; animation: vzGrow .6s ease var(--d, 300ms) backwards; }
@keyframes vzGrow { from { transform: scaleX(0); } }
@keyframes vzRise { from { transform: scaleY(0); } }
@keyframes vzFade { from { opacity: 0; } }
@keyframes vzPop { from { opacity: 0; transform: scale(.6); } }
@keyframes vzDraw { from { stroke-dashoffset: 1; } }

/* ---------- running panel ---------- */
.rsteps { display: flex; flex-wrap: wrap; gap: 8px; }
.rsteps li { font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); transition: background .3s, color .3s, border-color .3s; }
.rsteps li[data-s="run"] { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.rsteps li[data-s="done"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.psub.words { min-height: 1.6em; }
.psub.swap { animation: swapw .5s var(--ease); }
@keyframes swapw { from { opacity: 0; transform: translateY(7px); } }
.bead[data-s="skip"] { opacity: .45; }
#fields .field label { transition: color .2s; }

/* ---------- overview ---------- */
.ov { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: clamp(18px, 3.2vw, 36px); box-shadow: var(--shadow-soft); }
.ov::before { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--mark) 50%, transparent), transparent 66%); pointer-events: none; animation: drift 14s ease-in-out infinite alternate; }
.ov-top { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3.4vw, 44px); align-items: start; }
.ov-count { display: grid; gap: 4px; justify-items: start; font: 600 15px/1 var(--sans); color: var(--muted); }
.ov-count .big { font: 700 clamp(72px, 11vw, 128px)/.86 var(--display); font-variation-settings: "wdth" 85; letter-spacing: -.045em; color: var(--accent); font-variant-numeric: tabular-nums; }
.ov-main { display: grid; gap: 12px; }
.ov .thesis { max-width: 30ch; }
.ov-skel { display: grid; gap: 14px; }
.ov-skel .skel { height: 22px; } .ov-skel .w1 { width: 34%; } .ov-skel .w2 { width: 78%; height: 40px; } .ov-skel .w3 { width: 56%; }
.acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; position: relative; }
.acts li { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 100ms + 450ms); }
.act { width: 100%; height: 100%; text-align: left; display: grid; gap: 5px; align-content: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
.act:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 26px -16px rgba(14, 21, 48, .45); }
.act .an { font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.act .as { font-size: 14px; color: var(--ink-2); }
.act .ar { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ov .strip { position: relative; }

/* key numbers of the deck */
.ov-keys { position: relative; display: grid; gap: 10px; }
.ov-keys ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.ov-keys li { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 90ms + 300ms); }
.kn { width: 100%; height: 100%; text-align: left; display: grid; gap: 4px; align-content: start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
.kn:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 26px -16px rgba(14, 21, 48, .45); }
.kn .kv { font: 700 clamp(30px, 3.6vw, 42px)/1 var(--display); font-variation-settings: "wdth" 88; letter-spacing: -.035em; color: var(--accent); font-variant-numeric: tabular-nums; }
.kn .kl { font-size: 14.5px; color: var(--ink); text-wrap: pretty; }
.kn .ks { font-size: 12.5px; font-weight: 600; color: var(--muted); }