/* The showcase (v11, 2026-10-01): the real builds, their most beautiful real screens, on a slow arc of depth.
   Daniel: "start looking at what actually is in there and is the most beautiful, and take that ... a very future proof carousel". */
.show-head{max-width:880px;margin:0 auto 10px;text-align:center}
.show-head .lead{margin-left:auto;margin-right:auto}
.sc-stage{position:relative;height:clamp(560px,46vw,640px);perspective:1700px;perspective-origin:50% 38%;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.sc-stage:active{cursor:grabbing}
.sc-stage::after{content:"";position:absolute;left:8%;right:8%;bottom:4%;height:38%;pointer-events:none;
 background:radial-gradient(60% 55% at 50% 0%,rgba(143,208,242,.10),transparent 70%)}
.sc-track{position:absolute;inset:0;transform-style:preserve-3d}
.sc-item{position:absolute;left:50%;top:6%;width:var(--w,300px);margin-left:calc(var(--w,300px) / -2);transform-style:preserve-3d;will-change:transform,filter,opacity;
 -webkit-box-reflect:below 18px linear-gradient(transparent 72%,rgba(255,255,255,.14))}
/* a phone, drawn: titanium edge, a thin glass bezel, the real screen inside */
.sc-phone{position:relative;aspect-ratio:390/844;border-radius:calc(var(--w,300px) * .155);padding:calc(var(--w,300px) * .028);
 background:linear-gradient(145deg,#3a3f47,#15181d 40%,#2b3037 70%,#101215);
 box-shadow:0 50px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 2px 1px rgba(255,255,255,.22)}
.sc-phone .scr{position:relative;width:100%;height:100%;border-radius:calc(var(--w,300px) * .13);overflow:hidden;background:#000}
.sc-phone img,.sc-slate img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.sc-phone .scr::after,.sc-slate::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 40%,rgba(255,255,255,0) 72%,rgba(255,255,255,.06) 100%)}
.sc-phone .isl{position:absolute;top:calc(var(--w,300px) * .055);left:50%;width:30%;height:calc(var(--w,300px) * .085);transform:translateX(-50%);border-radius:99px;background:#000;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
/* a slate: a frameless glass panel for a card or a photograph */
.sc-slate{position:relative;aspect-ratio:390/844;border-radius:30px;overflow:hidden;background:#0d1015;
 box-shadow:0 50px 120px -30px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.25)}
.sc-slate.card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(120% 80% at 30% 0%,#fbf8f2,#efe9df)}
.sc-slate.card .sl-k{font:600 17px/1.2 var(--sans);letter-spacing:-.02em;color:#1a1d22}.sc-slate.card .sl-s{font:500 12.5px var(--sans);color:#8a8274;text-align:center;max-width:80%}
.sc-slate.card img{width:88%;height:auto;object-fit:contain;border-radius:18px;box-shadow:0 20px 50px -20px rgba(60,50,30,.35)}
/* the caption under the focused build */
.sc-cap{position:relative;text-align:center;min-height:190px;margin-top:-6px}
.sc-cap>div{position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease);pointer-events:none}
.sc-cap>div.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.sc-cap .w{font:500 13.5px var(--sans);color:var(--iris)}
.sc-cap h3{font:600 clamp(28px,2.6vw,38px)/1.1 var(--serif);letter-spacing:-.03em;margin:8px 0 8px}
.sc-cap p{color:var(--ink2);margin:0 auto;max-width:34em;font-size:16.5px}
.sc-cap a{display:inline-flex;gap:8px;align-items:center;margin-top:12px;font:500 14px var(--sans);color:var(--ink);text-decoration:none;opacity:.85}
.sc-cap a::after{content:"\2197";transition:transform .4s var(--ease)}.sc-cap a:hover::after{transform:translate(2px,-2px)}
.sc-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px}
.sc-nav button.arr{width:46px;height:46px;border-radius:50%;padding:0;justify-content:center;font-size:18px}
.sc-dots{display:flex;gap:8px}.sc-dots button{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer;transition:all .4s var(--ease)}
.sc-dots button.on{width:26px;border-radius:99px;background:linear-gradient(90deg,var(--copper),var(--iris))}
.sc-stage:focus-visible{box-shadow:0 0 0 2px rgba(143,208,242,.5);border-radius:24px}
@media (max-width:700px){ .sc-stage{height:600px;perspective:1100px}.sc-item{top:4%}.sc-cap{min-height:150px}.sc-cap p{font-size:15.5px;padding:0 6px} }
@media (prefers-reduced-motion:reduce){ .sc-item{-webkit-box-reflect:none} }

/* danielvangriensven.com: our part, under the line */
.sc-cap p.part{margin-top:12px;font-size:15px;color:var(--ink3)}.sc-cap p.part b{font-weight:500;color:var(--copper);margin-right:6px}
@media (max-width:700px){ .sc-cap{min-height:230px} }