/* Design System cover: the Figma frame (930:9482) split into its five cards,
   which settle into place one after another when the tile scrolls into view.
   Scoped under .dc and prefixed dc- so it never collides with site styles. */
.dc{position:absolute;inset:0;overflow:hidden;background:#3F5A72 url("ds-bg.jpg") center/cover no-repeat}
/* Stage keeps the frame's 1114x765 proportions and is centered in the 16:10 tile */
.dc-stage{position:absolute;left:0;top:50%;width:100%;aspect-ratio:1114/765;transform:translateY(-50%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.dc-c{position:absolute;inset:0;background:url("ds-cover.webp") 0 0/100% 100% no-repeat;
  opacity:0;filter:blur(6px);transform:translateY(var(--dy,2.4%));
  transition:opacity .9s ease,filter .9s ease,transform 1.2s cubic-bezier(.16,.84,.24,1);transition-delay:var(--d,0ms);will-change:transform,opacity}
/* Each card is cut from the frame with its own rounded inset (measured from the Figma layers) */
.dc-a{clip-path:inset(10.46% 54.42% 47.91% 0 round 0 .9% .9% 0 / 0 1.3% 1.3% 0);--d:120ms}
.dc-b{clip-path:inset(57.49% 54.42% 0 0 round 0 .9% 0 0 / 0 1.3% 0 0);--d:360ms}
.dc-c1{clip-path:inset(0 0 70.04% 51.15% round 0 0 0 .9% / 0 0 0 1.3%);--d:0ms;--dy:-2.4%}
.dc-d{clip-path:inset(35.36% 0 27.1% 51.15% round .9% 0 0 .9% / 1.3% 0 0 1.3%);--d:240ms}
.dc-e{clip-path:inset(78.3% 0 0 51.15% round .9% 0 0 0 / 1.3% 0 0 0);--d:480ms}
.dc.is-in .dc-c{opacity:1;filter:none;transform:none}
.tile-w:hover .dc-stage{transform:translateY(-50%) scale(1.02)}
@media (prefers-reduced-motion:reduce){.dc-c{transition:none;opacity:1;filter:none;transform:none}}