/* DepthCard on the /workflows/ cover links. Works as a plain link without
   JS (the hover / focus reveal is pure CSS); depth-card.js adds the tilt,
   image parallax and spotlight for fine pointers without reduced motion.
   The title / outcome overlay stays hidden at rest so the cover art and the
   card's own title, tier badge and lock below remain the resting view. */
.depth-card{perspective:1000px;isolation:isolate}
.depth-card__inner{
  position:relative;display:block;width:100%;height:100%;
  border-radius:inherit;transform-style:preserve-3d;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;
  clip-path:inset(0 round var(--frame-inner-radius,14px));
  box-shadow:0 10px 20px rgba(0,0,0,.2);transition:box-shadow .3s ease-out;
}
.depth-card__media{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.depth-card__media img{
  display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.depth-card__spotlight{
  position:absolute;inset:0;z-index:20;pointer-events:none;opacity:0;
  mix-blend-mode:soft-light;filter:blur(2px);transition:opacity .3s ease-out;
}
.depth-card__content{
  position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px 20px;pointer-events:none;text-align:left;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.42) 50%,rgba(0,0,0,0) 100%);
  opacity:0;transition:opacity .4s ease-out;
}
.depth-card__title{
  display:block;margin-bottom:6px;color:#fff;font-weight:700;font-size:1.2rem;line-height:1.2;letter-spacing:-.02em;
  transform:translateY(16px);opacity:.9;transition:transform .5s ease,opacity .5s ease;
}
.depth-card__desc{
  display:block;color:#e5e7eb;font-size:.86rem;line-height:1.45;max-width:46ch;
  transform:translateY(16px);opacity:0;transition:transform .5s ease .075s,opacity .5s ease .075s;
}
.depth-card:hover .depth-card__inner,.depth-card.is-hovered .depth-card__inner,.depth-card:focus-visible .depth-card__inner{box-shadow:0 20px 40px rgba(0,0,0,.4)}
.depth-card:hover .depth-card__content,.depth-card.is-hovered .depth-card__content,.depth-card:focus-visible .depth-card__content{opacity:1}
.depth-card:hover .depth-card__title,.depth-card.is-hovered .depth-card__title,.depth-card:focus-visible .depth-card__title,
.depth-card:hover .depth-card__desc,.depth-card.is-hovered .depth-card__desc,.depth-card:focus-visible .depth-card__desc{transform:none;opacity:1}

/* Visible keyboard focus (the original set focus:outline-none). */
.system-cover.depth-card:focus-visible{outline:2px solid var(--gold-2,#E8CE7A);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .depth-card__inner,.depth-card__spotlight,.depth-card__content,.depth-card__title,.depth-card__desc{transition:none}
}