/* /cutting-edge-webredesign: builds on pipeline.css (studio window, the line, use-grid, booking dialog) and video.css (phone, hero). */

/* ---------- hero: the live samples, tilted a little in 3D ---------- */
.wr-stage{perspective:1600px}
.wr-stage .studio-window{transform:rotateY(-10deg) rotateX(5deg) rotate(-1deg);transform-origin:60% 50%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wr-stage:hover .studio-window{transform:rotateY(-3deg) rotateX(1.5deg)}
.wr-stage .studio-screen{background:#141210}
.wr-loop{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.wr-stage .phone-out{width:24%;transform:rotateY(14deg) rotate(3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wr-stage:hover .phone-out{transform:rotateY(4deg) rotate(1deg)}
.wr-stage .phone-screen{display:block;background:#ededeb}
.wr-stage .phone-video{aspect-ratio:9/19.5;width:100%;object-fit:cover}

/* ---------- the two samples ---------- */
.wr-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.wr-sample{display:flex;flex-direction:column;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 44px -26px rgba(60,45,25,.35)}
.wr-media{display:block;overflow:hidden;background:#141210;border-bottom:1px solid var(--line)}
.wr-media video{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wr-sample:hover .wr-media video{transform:scale(1.02)}
.wr-sample-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:24px 26px 26px}
.wr-sample-body h3{margin:10px 0 14px;font-size:28px}
.wr-beats{flex:1;margin:0 0 20px;padding:0;list-style:none;counter-reset:beat}
.wr-beats li{position:relative;padding:0 0 10px 34px;font-size:14.5px;line-height:1.6;color:#4a4f45;counter-increment:beat}
.wr-beats li:before{content:counter(beat);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent-deep);font:600 11.5px/22px var(--sans);text-align:center}
#samples .ad-fine{margin-top:22px}

/* ---------- the line: five stations instead of seven ---------- */
.wr-line .line-track{grid-template-columns:repeat(5,minmax(0,1fr))}
.wr-line .belt{left:calc(100% / 10);right:calc(100% / 10)}
.wr-line .line-bar{justify-content:flex-end;margin-bottom:34px}

@media(max-width:900px){
  .wr-samples{grid-template-columns:1fr}
}
@media(max-width:640px){
  .wr-stage .studio-window{transform:rotateY(-6deg) rotateX(3deg)}
  .wr-stage .phone-out{width:30%}
  .wr-sample-body{padding:20px}
  .wr-sample-body h3{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .wr-stage .studio-window,.wr-stage .phone-out,.wr-media video{transition:none}
}