/* Shared pieces for the work: a drawn laptop that turns through real pages, the part we played as a lit timeline,
   and the Certified heptagon. (danielvangriensven.com next, v2, 2026-10-01) */

/* a laptop, drawn: a thin dark bezel, the real pages inside crossfading, a slim base */
.laptop{position:relative;width:100%;max-width:980px;margin:0 auto}
.laptop .lid{position:relative;border-radius:18px 18px 8px 8px;padding:1.6% 1.6% 2.2%;background:linear-gradient(180deg,#2a2f37,#14171c);
 box-shadow:0 60px 140px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.18)}
.laptop .scr{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:#05070a}
.laptop .scr video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity 1s var(--ease)}
.laptop .scr video.on{opacity:1}
.laptop .scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.08),rgba(255,255,255,0) 30%)}
.laptop .base{height:14px;margin:0 -5%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#3a4049,#1b1f25 60%,#0e1013);box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.laptop .base::before{content:"";display:block;width:16%;height:5px;margin:0 auto;border-radius:0 0 8px 8px;background:#0b0d10}
.laptop .glow{position:absolute;left:10%;right:10%;bottom:-40px;height:80px;background:radial-gradient(50% 60% at 50% 0,rgba(143,208,242,.12),transparent 70%);pointer-events:none}
.pages{display:flex;justify-content:center;gap:22px;margin-top:30px;flex-wrap:wrap}
.pages button{background:none;border:0;padding:6px 0;cursor:pointer;font:500 14.5px var(--sans);color:var(--ink3);position:relative;transition:color .3s}
.pages button.on{color:var(--ink)}.pages button.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--copper),var(--iris))}

/* our part: a short timeline, each step a point of light that lights as you read */
.part2{position:relative;margin:34px 0 0;padding:0 0 0 30px;list-style:none}
.part2::before{content:"";position:absolute;left:5px;top:44px;bottom:8px;width:1px;background:rgba(255,255,255,.12)}
.part2::after{content:"";position:absolute;left:5px;top:44px;width:1px;height:calc((100% - 52px) * var(--f,0));background:linear-gradient(var(--iris),var(--copper));box-shadow:0 0 10px rgba(226,178,138,.5);transition:height .2s linear}
.part2 .lab{font:500 13.5px var(--sans);color:var(--copper);margin:0 0 14px -30px}
.part2 li{position:relative;padding:0 0 18px;color:var(--ink3);font-size:17px;line-height:1.45;transition:color .6s var(--ease)}
.part2 li::before{content:"";position:absolute;left:-30px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--ground);border:1.5px solid rgba(255,255,255,.28);transition:all .6s var(--ease)}
.part2 li.lit{color:var(--ink)}.part2 li.lit::before{background:var(--copper);border-color:var(--copper);box-shadow:0 0 14px rgba(226,178,138,.75)}
.part2 li b{font-weight:600;color:inherit}
.part2 li:last-child{padding-bottom:0}

/* the Certified heptagon: seven dimensions, drawn in light */
.hepta{position:relative;width:100%;max-width:520px;aspect-ratio:1;margin:0 auto}
.hepta svg{width:100%;height:100%;overflow:visible}
.hepta .ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1}
.hepta .shape{fill:url(#hg);stroke:url(#hs);stroke-width:1.6;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 2.6s var(--ease),opacity 1.6s;opacity:.0}
.hepta.in .shape{stroke-dashoffset:0;opacity:1}
.hepta .spoke{stroke:rgba(255,255,255,.07);stroke-width:1}
.hepta .dot{fill:#f3c99a;filter:drop-shadow(0 0 6px rgba(243,201,154,.9));opacity:0;transition:opacity .8s}
.hepta.in .dot{opacity:1}
.hepta text{font:500 13px var(--sans);fill:rgba(241,239,233,.62)}
@media (prefers-reduced-motion:reduce){ .hepta .shape{stroke-dashoffset:0;opacity:1;transition:none}.hepta .dot{opacity:1} .laptop .scr video{transition:none} }
@media (max-width:700px){ .hepta{width:80%} .hepta text{font-size:17px} }