/* featured-sites slider: a pinned stage whose moments dissolve into each other while scrolling,
   with a rail of numbers on the side built from the moments themselves */
.dms-root{--dms-rail-side:4vw;--dms-rail-gap:1.1vw;--dms-rail-size:.95vw;--dms-rail-dash:1.1vw;--dms-rail-dash-on:2.4vw;--dms-rail-line:1px;--dms-rail-dim:.45;--dms-hour-gap:1.4vw;--dms-fade:1.4s;--dms-blur:18px;--dms-zoom:1.06;position:relative;isolation:isolate;background:#0a0620;color:#fbf8f5}
.dms-root.is-pinned{height:var(--dms-track,auto)}
.dms-root .dms-stage{position:relative;overflow:hidden;height:100vh;height:100svh;min-height:560px}
.dms-root.is-pinned .dms-stage{position:sticky;top:var(--dms-sticky-top,0px)}

.dms-root .dms-moment{position:absolute;inset:0;display:flex;flex-direction:row;align-items:flex-end;justify-content:flex-start;padding:0 14vw 7vw 6vw;opacity:0;visibility:hidden;transition:opacity var(--dms-fade) ease,visibility 0s linear var(--dms-fade)}
.dms-root .dms-moment.is-on{opacity:1;visibility:visible;transition:opacity var(--dms-fade) ease,visibility 0s;z-index:1}
.dms-root .dms-moment::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(270deg,rgba(10,6,32,.9) 0%,rgba(10,6,32,.78) 34%,rgba(10,6,32,.2) 62%,rgba(10,6,32,0) 78%),linear-gradient(0deg,rgba(10,6,32,.94) 0%,rgba(10,6,32,.55) 38%,rgba(10,6,32,0) 78%),linear-gradient(180deg,rgba(10,6,32,.55),rgba(10,6,32,0) 22%);pointer-events:none}

.dms-root .dms-media{position:absolute;inset:0;background-size:cover;background-position:center top;background-repeat:no-repeat;transform:scale(var(--dms-zoom));filter:blur(var(--dms-blur));will-change:transform,filter}
.dms-root .dms-moment.is-on .dms-media{transform:scale(1.01);filter:blur(0)}

.dms-root .dms-copy{position:relative;z-index:2;width:44%;display:flex;flex-direction:column;align-items:flex-start;opacity:0;filter:blur(6px);translate:0 12px;transition:opacity .55s ease,filter .55s ease,translate .55s ease}
.dms-root .dms-moment.is-on .dms-copy{opacity:1;filter:blur(0);translate:0 0;transition-delay:.22s}
.dms-root .dms-hour{margin:0;font-family:'Rubik',Arial,sans-serif;color:#e6d9cd;font-size:clamp(1rem,1.5vw,1.6rem);font-weight:300;letter-spacing:.08em;line-height:1}
.dms-root .dms-hour h4{margin:0;font:inherit;color:inherit;letter-spacing:inherit}
.dms-root .dms-title{margin:.5vw 0 .7vw;font-family:'Rubik',Arial,sans-serif;font-size:clamp(2rem,3.6vw,3.8rem);font-weight:700;line-height:1.1;color:#fff;background:linear-gradient(90deg,#fff,#e4d3ff 60%,#ffc4ec);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dms-root .dms-text{margin:0;color:#e3dcf2;font-size:clamp(1rem,1.25vw,1.25rem);line-height:1.65;max-width:34em}
.dms-root .dms-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.dms-root .dms-tags li{font-size:.9rem;padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dms-root .dms-go{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:11px 24px;border-radius:99px;background:linear-gradient(90deg,#c9a6ff,#ff7ad9);color:#1a1040;font-weight:700;font-size:1rem;box-shadow:0 12px 34px -12px rgba(255,92,200,.7);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.dms-root .dms-go:hover{transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(255,92,200,.9)}
.dms-root .dms-go svg{width:18px;height:18px}

/* the number, turned beside the text */
.dms-root .dms-copy .dms-hour{position:absolute;left:calc(100% + var(--dms-hour-gap));top:50%;width:var(--dms-copy-h,150px);direction:ltr;white-space:nowrap;text-align:center;transform:translate(-50%,-50%) rotate(90deg)}

.dms-root .dms-rail{position:absolute;z-index:3;top:50%;right:var(--dms-rail-side);transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--dms-rail-gap);align-items:flex-start}
.dms-root .dms-rail-item{display:flex;flex-direction:row;align-items:center;gap:.6vw;padding:.2vw 0;border:0;background:transparent;cursor:pointer;opacity:var(--dms-rail-dim);transition:opacity .3s ease;color:#fff;font:inherit}
.dms-root .dms-rail-item.is-on,.dms-root .dms-rail-item:hover{opacity:1}
.dms-root .dms-rail-item i{display:block;width:var(--dms-rail-dash);height:var(--dms-rail-line);background:currentColor;transition:width .3s ease}
.dms-root .dms-rail-item.is-on i{width:var(--dms-rail-dash-on)}
.dms-root .dms-rail-item:focus-visible{outline:1px solid currentColor;outline-offset:5px}
.dms-root .dms-rail-label,.dms-root .dms-rail-label *{margin:0;padding:0;font-size:var(--dms-rail-size);line-height:1;direction:ltr;font-family:'Rubik',Arial,sans-serif;font-weight:400;color:inherit}

@media(max-width:1024px){.dms-root .dms-copy{width:66%}.dms-root .dms-moment{padding:0 16vw 9vw 7vw}.dms-root{--dms-rail-size:1.8vw;--dms-rail-gap:1.8vw}}
@media(max-width:767px){
  .dms-root .dms-moment{padding:0 6vw 26vw 6vw}
  .dms-root .dms-copy{width:100%}
  .dms-root .dms-rail{top:auto;bottom:6%;right:6%;left:6%;transform:none;flex-direction:row;justify-content:flex-start;align-items:center;gap:3.5vw}
  .dms-root .dms-rail-item{flex-direction:column-reverse;gap:1.5vw}
  .dms-root .dms-rail-item i{width:5vw;height:2px}
  .dms-root .dms-rail-item.is-on i{width:9vw}
  .dms-root .dms-rail-label,.dms-root .dms-rail-label *{font-size:3.4vw}
  .dms-root .dms-copy .dms-hour{position:static;width:auto;transform:none;text-align:right;direction:rtl;margin-bottom:2vw}
}
@media(prefers-reduced-motion:reduce){.dms-root .dms-media,.dms-root .dms-copy,.dms-root .dms-moment{transition-duration:.2s!important;filter:none!important;transform:none!important;translate:none!important}}

/* framed-picture version: light stage, the site picture in a frame (not full screen), only the "view site" button */
.dms-root{background:#fff;color:#2a1a4d}
.dms-root .dms-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(38vw 38vw at 12% 18%,rgba(205,180,255,.7),transparent 70%),radial-gradient(34vw 34vw at 88% 82%,rgba(255,184,220,.65),transparent 70%),radial-gradient(26vw 26vw at 60% 8%,rgba(227,204,255,.55),transparent 70%)}
.dms-root .dms-moment{align-items:center;justify-content:center;padding:84px 8vw 96px}
.dms-root .dms-moment::before{display:none}
.dms-root .dms-media{position:relative;inset:auto;flex:none;height:min(calc(100svh - 230px),43vw);min-height:260px;aspect-ratio:16/9;max-width:80vw;border-radius:10px;background-size:cover;background-position:center top;box-shadow:0 40px 90px -40px rgba(70,30,140,.55),0 0 0 1px rgba(138,43,226,.14)}
.dms-root .dms-copy{position:absolute;left:50%;bottom:clamp(22px,5.5vh,52px);width:auto;display:block;translate:-50% 12px}
.dms-root .dms-moment.is-on .dms-copy{translate:-50% 0}
.dms-root .dms-copy .dms-hour{display:none}
.dms-root .dms-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;-webkit-text-fill-color:currentColor}
.dms-root .dms-go{margin:0}
.dms-root .dms-rail-item{color:#2a1a4d}
.dms-root .dms-rail-label,.dms-root .dms-rail-label *{color:inherit}
@media(max-width:1024px){.dms-root .dms-moment{padding:80px 5vw 96px}.dms-root .dms-media{max-width:90vw;height:min(calc(100svh - 230px),50vw)}}
@media(max-width:767px){
  .dms-root .dms-moment{padding:76px 4vw 130px}
  .dms-root .dms-media{height:auto;width:92vw;max-width:none;min-height:0}
  .dms-root .dms-copy{bottom:70px}
}

/* the picture sits in the same frame as the project cards: gradient tile, browser bar with three dots, screenshot below */
.dms-root .dms-media{display:flex;flex-direction:column;padding:14px 14px 0;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,var(--c1,#4b1d8f),var(--c2,#d86bd8));background-image:linear-gradient(135deg,var(--c1,#4b1d8f),var(--c2,#d86bd8));box-shadow:0 40px 90px -40px rgba(70,30,140,.55),0 0 0 1px rgba(255,255,255,.18)}
.dms-root .dms-bar{flex:none;display:flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:12px 12px 0 0;background:rgba(255,255,255,.22)}
.dms-root .dms-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.75)}
.dms-root .dms-shot{flex:1;min-height:0;background-size:cover;background-position:center top;background-repeat:no-repeat}

/* same frame as the project cards that carry a screenshot: no gradient margin around the picture, the bar spans the full width */
.dms-root .dms-media{padding:0}
.dms-root .dms-bar{border-radius:0;height:34px;padding:0 16px}
.dms-root .dms-bar i{width:10px;height:10px}